DEV Community

Cover image for Construyendo un blog estático con Hugo
charly3pins
charly3pins

Posted on • Originally published at charly3pins.dev on

Construyendo un blog estático con Hugo

Si quieres crear un sitio web estático rápido te recomiendo Hugo. Está escrito en Go y es muy útil para configurar y adaptarse a sus necesidades. Además, puedes elegir entre diferentes temas creados por el equipo y otros por la comunidad o incluso crear uno propio.

Aquí explicaré en algunos pasos cómo crear un blog con Hugo y cómo ser alojado e implementado en GitHub y GitHub Pages. Si necesita más detalles visite los [documentos de Hugo] oficiales (https://gohugo.io/documentation/).

Inicio

Primero que nada necesitas instalar Hugo, en mi caso usando Homebrew:

brew install hugo
Enter fullscreen mode Exit fullscreen mode

Verifique la versión instalada:

hugo version
Enter fullscreen mode Exit fullscreen mode

Crear sitio

Una vez que haya instalado Hugo, podrá crear su sitio web usando el comando:

hugo new site your-blog-name
Enter fullscreen mode Exit fullscreen mode

Después de eso, verá una nueva carpeta llamada your-blog-name y si mira dentro verá el siguiente árbol:
Folder tree

  • Archetypes son archivos de plantilla de contenido para su proyecto, que se utilizan cuando ejecuta el comando hugo new.
  • Content es donde se almacenan todas las publicaciones y páginas. La misma estructura en esta carpeta se utilizará para organizar las URL en su sitio renderizado.
  • Data es una carpeta para almacenar datos adicionales para generar su sitio.
  • Layouts es la carpeta donde se almacena la plantilla de tu sitio si no estás usando un tema.
  • Static almacena todos los archivos estáticos de su sitio.
  • Themes es donde se almacenan los temas que instalas.
  • config.toml almacena la configuración principal de su sitio.

Instalar el tema

Si quieres utilizar un tema ya creado puedes hacerlo de dos formas. Para comprobar los temas existentes, visite el sitio web oficial de temas de Hugo donde puede ver una demostración de cada uno.

En primer lugar, debe iniciar un repositorio de git dentro de su proyecto:

cd your-blog-name;\
git init;
Enter fullscreen mode Exit fullscreen mode

Luego puede clonar el repositorio dentro de la carpeta themes:

git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
Enter fullscreen mode Exit fullscreen mode

Si no desea realizar ningún cambio, es mejor incluir el tema como un submódulo de git y puede obtener nuevas actualizaciones cuando estén disponibles. Hágalo con:

git submodule add https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
Enter fullscreen mode Exit fullscreen mode

Crear contenido

Para generar su primera publicación de blog, puede usar el comando hugo new y establecer la ruta que desee, en mi caso posts:

hugo new posts/my-first-post.md
Enter fullscreen mode Exit fullscreen mode

Obtendrá el siguiente archivo:
Example post

La primera sección es para los parámetros y la segunda es para el contenido en este caso en markdown. Consulte esta Hoja de referencia de Markdown una referencia rápida y un escaparate.

Ejecute su sitio

Una vez que haya creado la publicación, puede construir su sitio usando el comando hugo server. La bandera -D es para renderizar borradores:

hugo server -D
Enter fullscreen mode Exit fullscreen mode

Y aparecerán los registros de renderizado y al final un mensaje similar a:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Enter fullscreen mode Exit fullscreen mode

Copie la URL en su navegador y verá su sitio en funcionamiento.

Host en GitHub

Usaremos las páginas de usuario / organización https://<USERNAME|ORGANIZATION>.github.io/.

Cree un repositorio <YOUR-PROJECT> en GitHub. Este repositorio contendrá el contenido de Hugo y otros archivos fuente.

Cree un repositorio de GitHub <USERNAME>.github.io. Este es el repositorio que contendrá la versión completamente renderizada de su sitio web Hugo.

git clone https://github.com/<USERNAME>/<YOUR-PROJECT>
cd <YOUR-PROJECT>
Enter fullscreen mode Exit fullscreen mode

Ejecute su sitio web localmente usando el comando hugo server o si está usando el tema hugo server -t <THEME_NAME>. Siga las instrucciones en la consola para acceder a él. El servidor web debe estar disponible en http: // localhost: 1313 /

Finalmente, debe agregar el repositorio <USERNAME>.github.io dentro de la carpeta public como un submódulo de git para actualizar su sitio web una vez que lo regenere.

git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public
Enter fullscreen mode Exit fullscreen mode

Si no tiene configurada la clave de par RSA, deberá agregar el submódulo a través de HTTP:

git submodule add -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public
Enter fullscreen mode Exit fullscreen mode

Para automatizar los siguientes pasos, puede guardarlo en deploy.sh. Recuerde hacerlo ejecutable con:

chmod +x deploy.sh
Enter fullscreen mode Exit fullscreen mode

deploy.sh

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..
Enter fullscreen mode Exit fullscreen mode

No dude en comentar aquí o contactarme en mis redes sociales para cualquier comentario, pregunta o sugerencia.

Top comments (0)