Crear un Blog con Hugo y Publicarlo en GitHub Pages

Tabla de contenido

Introducción
#

Hugo es un generador de sitios estáticos rápido y flexible que permite crear y personalizar blogs de manera sencilla. Publicar tu blog en GitHub Pages es una excelente manera de alojarlo de forma gratuita y con alta disponibilidad. En esta guía, aprenderás a crear un blog con Hugo y publicarlo en GitHub Pages paso a paso.

Prerrequisitos
#

Antes de comenzar, asegúrate de tener lo siguiente:

Git instalado en tu máquina.
Hugo instalado.
Una cuenta en GitHub.

Crear tu Blog con Hugo
#

Inicializar un Nuevo Proyecto de Hugo
Crea un directorio para tu blog e inicializa el proyecto:
```
mkdir MiBlog
cd MiBlog
hugo new site .
```

Elegir un Tema
Busca un tema que te guste en Hugo Themes y clónalo en tu proyecto:

git init
git submodule add https://github.com/<autor>/<tema>.git themes/<tema>
echo 'theme = "<tema>"' >> config.toml

Crear tu Primer Artículo
Genera un archivo de contenido:
```
hugo new posts/mi-primer-articulo.md
```
Edita el archivo creado en content/posts/mi-primer-articulo.md y agrega contenido relevante.
Previsualizar el Blog Localmente
Inicia el servidor de desarrollo para ver tu blog en el navegador:
```
hugo server
```
Abre http://localhost:1313 en tu navegador para ver tu blog.

Publicar en GitHub Pages
#

Crear un Repositorio en GitHub
Ve a GitHub y crea un nuevo repositorio. Anota la URL del repositorio.

Configurar el Repositorio Local
Conecta tu proyecto a GitHub:

git remote add origin https://github.com/<tu-usuario>/<repositorio>.git

Configurar la Rama para Publicación
Hugo genera los archivos del sitio estático en el directorio public. Configuraremos esta carpeta como la rama gh-pages:

hugo
cd public
git init
git remote add origin https://github.com/<tu-usuario>/<repositorio>.git
git checkout -b gh-pages
git add .
git commit -m "Publicar sitio inicial"
git push origin gh-pages --force

Configurar GitHub Pages
Ve a la configuración del repositorio en GitHub, selecciona Pages, y elige la rama gh-pages como fuente.

Automatizar Publicaciones (Opcional)
Puedes configurar GitHub Actions para automatizar la publicación cada vez que hagas un cambio:

Crea un archivo .github/workflows/deploy.yml:

name: Deploy Hugo Site

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
      with:
        submodules: true
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
    - name: Build
      run: hugo
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

Realiza un commit y haz un push del archivo.

Extra: Publicar en el github-page del usuario con un Submódulo
#

Si quieres usar el repositorio especial <User>.github.io para alojar tu blog, puedes configurar la carpeta public como un submódulo. Este método permite que tu código fuente y los archivos generados del sitio estén separados, manteniendo el repositorio principal limpio.

Pasos:
#

Crear el Repositorio Especial
Ve a GitHub y crea un repositorio con el nombre exacto <User>.github.io.
Configurar el Submódulo para public
Desde la raíz de tu proyecto Hugo, añade el repositorio como submódulo vinculado a la carpeta public:
```
git submodule add -b main https://github.com/<User>/<User>.github.io.git public
```
Generar el Sitio Estático
Construye el sitio estático de Hugo, que generará los archivos en la carpeta public:
```
hugo
```
Publicar los Archivos en <User>.github.io
Navega a la carpeta public, agrega y realiza un commit de los archivos generados, y luego súbelos al repositorio remoto:
```
cd public
git add .
git commit -m "Publicar sitio inicial"
git push origin main
cd ..
```
Guardar el Código Fuente del Blog
Vuelve al repositorio principal (el directorio raíz de tu proyecto Hugo) y realiza un commit de los cambios relacionados con el submódulo:
```
git add .
git commit -m "Configurar submódulo para publicar en GitHub Pages"
git push origin main
```
Configurar GitHub Pages
GitHub detectará automáticamente el contenido publicado en el repositorio <User>.github.io y lo servirá desde https://<User>.github.io.

Notas:
#

Cada vez que realices cambios en tu blog y generes los archivos estáticos, deberás navegar a la carpeta public, hacer un commit y un push para actualizar tu sitio.
Si deseas automatizar este proceso, puedes configurar un script o usar GitHub Actions.

Esta opción es ideal si prefieres que tu blog esté alojado en el dominio principal de GitHub Pages (<User>.github.io) en lugar de un subdirectorio.

Conclusión
#

¡Eso es todo! Ahora tienes un blog funcional en Hugo alojado gratuitamente en GitHub Pages. Puedes personalizarlo, agregar más artículos y compartir tu contenido con el mundo. Si necesitas más ayuda, consulta la documentación oficial de Hugo y GitHub Pages.

Introducción #

Prerrequisitos #

Crear tu Blog con Hugo #

Publicar en GitHub Pages #

Extra: Publicar en el github-page del usuario con un Submódulo #

Pasos: #

Notas: #

Conclusión #