Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

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

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
Enter fullscreen modeExit fullscreen mode

Verifique la versión instalada:

hugoversion
Enter fullscreen modeExit fullscreen mode

Crear sitio

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

hugonew site your-blog-name
Enter fullscreen modeExit fullscreen mode

Después de eso, verá una nueva carpeta llamadayour-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 comandohugo 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;
Enter fullscreen modeExit fullscreen mode

Luego puede clonar el repositorio dentro de la carpetathemes:

git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
Enter fullscreen modeExit 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 submoduleadd https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit 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 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
Enter fullscreen modeExit fullscreen mode

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)
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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

chmod+x deploy.sh
Enter fullscreen modeExit fullscreen mode

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 ..
Enter fullscreen modeExit fullscreen mode

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

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Work
    SWE @Sword Health
  • Joined

More fromcharly3pins

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp