
Posted on • Originally published atcharly3pins.dev on
Construyendo un blog estático con Hugo
Si quieres crear un sitio web estático rápido te recomiendoHugo. Está escrito en Go y es muy útil para configurar y adaptarse a sus necesidades. Además, puedes elegir entre diferentestemas 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 usandoHomebrew:
brew install hugo
Verifique la versión instalada:
hugoversion
Crear sitio
Una vez que haya instalado Hugo, podrá crear su sitio web usando el comando:
hugonew site your-blog-name
Después de eso, verá una nueva carpeta llamadayour-blog-name
y si mira dentro verá el siguiente árbol:
- 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 detemas 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;
Luego puede clonar el repositorio dentro de la carpetathemes
:
git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
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 submoduleadd https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
Crear contenido
Para generar su primera publicación de blog, puede usar el comandohugo new
y establecer la ruta que desee, en mi casoposts
:
hugonew posts/my-first-post.md
Obtendrá el siguiente archivo:
La primera sección es para los parámetros y la segunda es para el contenido en este caso en markdown. Consulte estaHoja 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 comandohugo server
. La bandera-D
es para renderizar borradores:
hugo server-D
Y aparecerán los registros de renderizado y al final un mensaje similar a:
Web Serveris available at http://localhost:1313/(bind address127.0.0.1)
Copie la URL en su navegador y verá su sitio en funcionamiento.
Host en GitHub
Usaremos las páginas de usuario / organizaciónhttps://<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>
Ejecute su sitio web localmente usando el comandohugo server
o si está usando el temahugo 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 carpetapublic
como un submódulo de git para actualizar su sitio web una vez que lo regenere.
git submoduleadd-b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public
Si no tiene configurada la clave de par RSA, deberá agregar el submódulo a través de HTTP:
git submoduleadd-b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public
Para automatizar los siguientes pasos, puede guardarlo endeploy.sh
. Recuerde hacerlo ejecutable con:
chmod+x deploy.sh
deploy.sh
#!/bin/bashecho-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 foldercdpublic# Add changes to git.git add.# Commit changes.msg="rebuilding site`date`"if[$#-eq 1]thenmsg="$1"figit commit-m"$msg"# Push source and build repos.git push origin master# Come Back up to the Project Rootcd ..
No dude en comentar aquí o contactarme en mis redes sociales para cualquier comentario, pregunta o sugerencia.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse