Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo utilizar Hugo Static Site Generator en Linux

 

Una ventana de terminal en una computadora portátil.

Los sitios web estáticos son fáciles de crear y extremadamente rápidos de usar. Si aprende a usar Hugo, puede generar sitios web estáticos basados ​​en temas en Linux. ¡Crear sitios web es divertido de nuevo!

El generador de sitios web Hugo

Un sitio estático es aquel que no crea ni modifica páginas web sobre la marcha. No hay una base de datos en segundo plano, procesamiento de comercio electrónico o  PHPTodas las páginas web están completamente preconstruidas y se pueden mostrar a los visitantes muy rápidamente.

Pero eso no significa que un sitio estático deba ser aburrido. Pueden usar todo lo que proporciona HTML, además de hojas de estilo en cascada (CSS) y  JavaScriptTambién pueden hacer que cosas como carruseles de imágenes y páginas web se deslicen sobre imágenes de fondo.

El generador de sitios de Hugo funciona con una plantilla y cualquier contenido que haya creado para generar un sitio web completo. Luego puede colocarlo en una plataforma de alojamiento e inmediatamente tener un sitio web en vivo.

Hugo usa  rebajas para las páginas y entradas de blog que crea. Markdown es el lenguaje de marcado más simple que existe, lo que simplifica el mantenimiento de su sitio.

Los archivos de configuración de Hugo están en Tom's Obvious, Minimal Language (TOML) y YAML Ain't Markup Language (YAML), que son igual de fáciles. Otra ventaja es que Hugo es increíblemente rápido: algunos sitios se cargan en menos de un segundo. Tiene muchas plantillas entre las que puede elegir, y se agregan más todo el tiempo, por lo que es fácil comenzar. Simplemente elija una plantilla y agregue contenido que la haga suya.

Hugo también actúa como un pequeño servidor web directamente en su computadora. Puede ver una versión en vivo de su sitio web mientras lo diseña y crea, y cada vez que agrega una nueva publicación. También se actualiza automáticamente cada vez que "Guardar" en el editor, para que pueda ver inmediatamente el efecto de los cambios en su navegador.

Alojamiento de su sitio

Cuando se trata de alojar su sitio web estático, tiene muchas opciones para elegir. La mayoría de las empresas ofrecen alojamiento gratuito para uso personal o de código abierto. Por supuesto, también puede elegir una empresa de alojamiento web habitual, como cualquiera de las siguientes:

  • Acrobático
  • Amazon S3
  • Azur
  • CloudFront
  • DreamHost
  • Firebase
  • Páginas de GitHub
  • Ve papi
  • Almacenamiento en la nube de Google
  • Heroku
  • Páginas de GitLab
  • Netlify
  • Rackspace
  • Oleada

Instalando Hugo

Junto con Hugo, debes tener instalado Git. Git ya estaba instalado en Fedora 32 y Manjaro 20.0.1. En Ubuntu 20.04 (Focal Fossa), se agregó automáticamente como dependiente de Hugo.

Para instalar Hugo en Ubuntu, use este comando:

sudo apt-get install hugo

sudo apt-get install hugo en una ventana de terminal.

En Fedora, debe escribir:

sudo dnf instalar hugo

sudo dnf instala hugo en una ventana de terminal.

El comando para Manjaro es:

sudo pacman -Syu hugo

sudo pacman -Syu hugo en una ventana de terminal.

Creando un sitio web con Hugo

Cuando le pedimos a Hugo que cree un sitio nuevo, nos crea un conjunto de directorios. Estos contendrán los diferentes elementos de nuestro sitio web. Sin embargo, este no es el sitio web final que se cargará en su plataforma de alojamiento. Estos directorios contendrán el tema, los archivos de configuración, el contenido y las imágenes que Hugo usará como entrada cuando le pidamos que construya el sitio web real.

Es como la diferencia entre el código fuente y un programa compilado. El código fuente es lo que utiliza el compilador para generar el producto final. Del mismo modo, Hugo toma el contenido de estos directorios y genera un sitio web funcional.

El comando que vamos a ejecutar creará un directorio con el mismo nombre que el sitio que desea crear. Ese directorio se creará en el directorio en el que ejecute el comando.

Entonces, muévase al directorio en el que desea que se cree su sitio web. Estamos usando nuestro directorio de inicio, así que escribimos lo siguiente:

hugo nuevo sitio geek-demo

el nuevo sitio de hugo geek-demo en una ventana de terminal.

Esto crea un directorio "geek-demo". Escribimos lo siguiente para cambiar a ese directorio y ejecutar  ls:

cd geek-demo /
ls

cd geek-demo / en una ventana de terminal.

Vemos el archivo de configuración “config.toml” y los directorios que se han creado. Sin embargo, estos están prácticamente vacíos, ya que esto es solo el andamio para el sitio web.

Inicializar Git y agregar un tema

Necesitamos agregar un tema para que Hugo sepa cómo queremos que se vea el sitio terminado. Para hacer esto, tenemos que inicializar Git. En la carpeta raíz de su sitio (la que contiene el archivo "config.toml"), ejecute este comando:

git init

git init en una ventana de terminal.

Hay cientos de temas entre los que puede elegir, y cada uno tiene una página web que lo describe. Puede ejecutar una demostración de un tema y averiguar cuál es el comando para descargarlo. Usaremos uno llamado Meghna.

Para incorporar ese tema en nuestro sitio web, debemos cambiar a nuestra carpeta "Temas" y ejecutar el git clonecomando:

temas de cd
clon de git https://github.com/themefisher/meghna-hugo.git

Git muestra algunos mensajes a medida que avanza. Cuando está terminado, usamos lspara ver el directorio que contiene el tema:

ls

git clone https://github.com/themefisher/meghna-hugo.git en una ventana de terminal.

Los temas de Hugo incluyen un sitio web de ejemplo funcional. Debe copiar ese sitio predeterminado en los directorios de su sitio web.

Primero, regrese al directorio raíz de su sitio web. Estamos usando la opción -r(recursiva) cppara incluir subdirectorios y la -fopción (forzar) para sobrescribir cualquier archivo existente:

discos compactos ..
cp themes / meghna-hugo / exampleSite / * -rf.

cp themes / meghna-hugo / exampleSite / * -rf en una ventana de terminal.

Lanzamiento de su sitio localmente

Hemos hecho lo suficiente para lanzar un nuevo sitio web localmente. Todavía contendrá el texto y las imágenes del marcador de posición, pero esos son simplemente cambios cosméticos. Primero verifiquemos que los bits técnicos funcionen.

Le decimos a Hugo que ejecute su servidor web y use la -Dopción (borrador) para asegurarse de que cualquier archivo que pueda estar etiquetado con "borrador" esté incluido en el sitio web:

servidor hugo -D

servidor hugo -D en una ventana de terminal.

La siguiente imagen muestra el resultado de nuestro  hugocomando.

salida del comando hugo server -D en una ventana de terminal.

Nos dicen que Hugo construyó el sitio en 142 milisegundos (dijimos que era rápido, ¿no?). También nos dice que presionemos Ctrl + C para detener el servidor, pero déjelo funcionando por ahora.

Abra su navegador y diríjase a localhost:1313 para ver su sitio web.

Un sitio web estático del tema "Meghna" predeterminado en Firefox que se ejecuta en localhost: 1313.

Modificación del contenido predeterminado del sitio

Mientras se ejecuta así, Hugo está sirviendo las páginas web desde la memoria. No ha creado el sitio web en el disco duro, sino una copia de trabajo en la RAM. Sin embargo, está monitoreando los archivos y las imágenes en el disco duro. Si se cambia alguno de ellos, se actualiza el sitio en su navegador; ni siquiera tiene que presionar Ctrl + F5.

Abra otra ventana de terminal y navegue hasta el directorio raíz de su sitio web. Abra el archivo "config.toml" en un editor. Cambie la "baseURL" por el dominio en el que se alojará su sitio web y cambie el "título" por el nombre de su sitio web. Guarde sus cambios, pero deje el editor abierto.

config.toml en un editor, con cambios.

Hugo detecta que ha habido cambios en el archivo "config.toml", por lo que los lee, reconstruye el sitio y actualiza el navegador.

Navegador actualizado con un nuevo nombre web que se muestra en la pestaña.

Ahora debería ver el nombre que eligió para su sitio en la pestaña del navegador. Obtener información visual inmediata sobre los cambios guardados acelera significativamente el proceso de personalización de un sitio web.

Todos los temas son diferentes, pero descubrimos que los que solíamos ser bastante sencillos de seguir. Las diferentes secciones del sitio web tienen nombres obvios, al igual que las configuraciones en cada sección, por lo que siempre es obvio lo que está cambiando.

Y, nuevamente, tan pronto como guarde un cambio, verá lo que ha modificado en su navegador. Si no le gusta, simplemente invierta el cambio y vuelva a guardar.

Los diversos archivos de configuración que controlan el sitio web están dedicados a un solo trabajo y están etiquetados de manera significativa. Rastrearlos no es difícil, ya que no hay muchos lugares en los que puedan estar en el directorio. Normalmente, se encuentran en la carpeta "Datos".

Debido a que estamos usando una plantilla bilingüe, nuestros archivos de configuración en inglés están en el subdirectorio "En".

Si abre el archivo Datos> En> banner.yml en un editor, verá la colección de configuraciones que gobiernan el área del banner del sitio web.

data / en / banner.yml archivo en un editor.

Cuando cambia la configuración de "Título" y "Contenido", modifica el texto en la página de banner.

También cambiamos la configuración de "Etiqueta", por lo que el texto del botón dice "Más información". Para su sitio, probablemente también desee cambiar la imagen.

banner.yaml con cambios en un editor.

Tan pronto como guarde sus cambios, los verá en su navegador.

Sitio web estático de tema predeterminado en Firefox que se ejecuta en localhost: 1313.

Cambiar otros elementos de un sitio web

Puede cambiar todos los demás elementos de forma similar. Simplemente busque el archivo de configuración apropiado y cambie la configuración y el texto para satisfacer sus necesidades.

También querrá cambiar las imágenes. Se hará referencia a la imagen predeterminada en el archivo de configuración. Puede encontrar fácilmente y echar un vistazo a la imagen original para ver cuáles son sus dimensiones.

Las imágenes se colocan en el directorio “Estático> Imágenes” con subdirectorios para las diferentes secciones del sitio web. Coloque los favicons y logotipos directamente en el directorio "Estático> Imágenes".

Agregar nuevo contenido de blog

Hasta ahora, hemos buscado cambiar lo que ya está ahí. Pero, ¿cómo agregamos una nueva publicación de blog? Hugo usa un concepto llamado "Arquetipos" para crear contenido nuevo. Si no creamos un arquetipo para nuestras entradas de blog, se creará un archivo predeterminado para nosotros cada vez que le pedimos a Hugo que cree una nueva entrada de blog.

Esto está bien, pero con un arquetipo, podemos ahorrarnos un poco de esfuerzo y asegurarnos de que se ingrese la mayor cantidad posible de la parte frontal por adelantado.

En este tema, las entradas del blog se encuentran en Contenido> Inglés> Blog. Si abrimos una entrada de blog existente en un editor, como “simple-blog-post-1.md”, podemos ver el tema principal.

Necesitamos copiar esa sección, editar las entradas actuales para que se pueda usar como una plantilla de arquetipo y luego guardarla en la carpeta "Arquetipos". Si lo llamamos "blog.md", se utilizará automáticamente como plantilla para las nuevas entradas del blog.

En gedit, podemos hacer esto de la siguiente manera:

contenido de gedit / english / blog / simple-blog-post-1.md

gedit content / english / blog / simple-blog-post-1.md en una ventana de terminal.

Resalte la sección superior, incluidas las dos líneas discontinuas, y luego presione Ctrl + C para copiarla. Presione Ctrl + N para iniciar un nuevo archivo y luego Ctrl + V para pegar lo que copió.

tema principal en una entrada de blog existente en un editor.

Ahora, realice los siguientes cambios y asegúrese de dejar un espacio después de los dos puntos (:) en cada línea:

  • Título: cámbielo a "{{ replace .Name "-" " " | title }}" (incluya las comillas). Se insertará automáticamente un título para cada nueva publicación de blog. Se forma a partir del nombre de archivo que le pasa al hugo newcomando, como veremos.
  • Fecha: cambie esto a {{ .Date }}La fecha y hora en que se crea el blog se ingresarán automáticamente.
  • Image_webp: esta es la ruta a la imagen del encabezado del blog  en formato webpSi el tema no puede encontrar uno, usará la imagen de la siguiente línea.
  • imagen: esta es la ruta a la imagen del encabezado del blog en formato JPEGTambién puede dejarlos apuntando a las imágenes predeterminadas. Luego, todas las publicaciones del blog tendrán una imagen provisional, incluso antes de encontrar, cambiar el tamaño o guardar una personalizada. Una vez hecho esto, puede editar fácilmente el nombre del archivo para que coincida con el de su imagen personalizada.
  • Autor: cámbielo por su nombre.
  • Descripción: escribe una breve descripción de cada publicación aquí. Si cambia esto a una cadena vacía ( ""), puede escribir una descripción para cada blog nuevo sin tener que editar el texto antiguo.

Materia preliminar editada en un archivo de arquetipo en un editor.

Guarde este nuevo archivo como “arquetipos / blog.md” y luego cierre geditHugo ahora usará este nuevo arquetipo cada vez que desee crear una nueva entrada de blog.

Tenga en cuenta que nuestro archivo debe tener una extensión ".md" porque usaremos markdown para escribir nuestra entrada de blog:

nuevo blog de hugo / first-new-blog-post-on-this-site.md

hugo new blog / first-new-blog-post-on-this-site.md en una ventana de terminal.

Ahora, queremos abrir nuestra nueva entrada de blog en un editor:

gedit content / english / blog / first-new-blog-post-on-this-site.md

gedit content / english / blog / first-new-blog-post-on-this-site.md en una ventana de terminal.

Nuestra nueva publicación de blog se abre en gedit.

Nueva publicación de blog en gedit.

Se han agregado todas las siguientes partes del material preliminar para nosotros:

  • Título: Esto se dedujo del nombre del archivo. Si necesita algún ajuste, puede editarlo aquí.
  • Hora y fecha:  se agregan automáticamente.
  • Imagen predeterminada:  probablemente querrá encontrar una imagen relevante libre de derechos de autor. Suéltelo en Estático> Imágenes> Blog. Tendrá que escribir el nombre de archivo real de la imagen aquí.
  • Autor: Su nombre se agrega automáticamente.
  • Descripción: Esto ha sido editado.

Escriba el blog usando markdown y use el marcado estándar para encabezados, negrita, cursiva, imágenes, enlaces, etc. Cada vez que guarda su archivo, Hugo reconstruye el sitio web y lo actualiza en su navegador.

La siguiente imagen muestra cómo aparece nuestra nueva entrada de blog en la página de inicio.

Una nueva entrada de blog en la página de inicio.

La siguiente imagen muestra cómo se ve la nueva entrada de blog en su propia página.

Una nueva entrada de blog en la página de inicio.

Una vez que termine de escribir la publicación de su blog, guarde los cambios y luego cierre el editor. También puede cerrar su navegador porque vamos a detener el servidor de Hugo.

En la ventana de terminal en la que se está ejecutando el servidor Hugo, presione Ctrl + C.

Construyendo el sitio web

En el directorio raíz de su sitio web, ejecute el siguiente comando para crear su sitio web:

Hugo

hugo en una ventana de terminal.

Hugo crea el sitio web y enumera la cantidad de páginas y otros componentes que creó. Tomó 134 milisegundos crear el nuestro.

Hugo crea un nuevo directorio llamado "Público" en el directorio raíz de su sitio web. En el directorio "Público", encontrará todos los archivos que necesita transferir a su plataforma de alojamiento.

Tenga en cuenta que debe cargar los archivos y directorios dentro del directorio "Público" a su plataforma de alojamiento, no al directorio "Público" en sí.

Los archivos del sitio web que deben cargarse en la plataforma de alojamiento.

Ahora sabes lo básico

Cada tema requerirá un poco de exploración para descubrir cómo puede hacer que se vea como desea, ¡pero esa es la parte divertida! Dada la capacidad de Hugo para representar cambios inmediatamente en una ventana del navegador, nada lleva demasiado tiempo.

Probablemente encontrará que escribir su texto y encontrar y recortar imágenes son las partes del proceso que toman más tiempo.

El sitio de documentación de Hugo también es útil, pero extenso. Con suerte, este recorrido básico será suficiente para comenzar.

Si usa Git y  GithubGitLab o BitBucket, también hay integraciones disponibles para esas plataformas. Ellos vigilan su repositorio Hugo remoto y reconstruyen su sitio en vivo cada vez que ingresa cambios.

Publicar un comentario

0 Comentarios