Hosting estático gratuito: Hugo + Github Pages + Cloudflare

06/06/2023 1106 palabras 6 minutos

Github ofrece alojamiento para webs estáticas de forma totalmente gratuita. Tiene ciertos límites pero están bastante bien. En este post enseñaré como alojar páginas web estáticas generadas con Hugo en GitHub Pages con un dominio propio y como hacer para que con cada cambio se publiquen automáticamente. Por último también enseñaré como agregar un dominio personalizado usando Cloudflare.

Anécdota: en el último mes he creado dos pequeños proyectos personales con sus respectivas páginas web estáticas, sin embargo he pagado servidores hosting para alojarlas. ¿Por qué? No tengo ni idea. Sabía de la existencia de este servicio de GitHub pero por algún motivo no se me ocurrió utilizarlo, así que mi trabajo ahora es migrarlas, y de paso escribo este post.

GoHugo

Hugo es uno de los generadores de sitios web estáticos open-source más populares. En mi caso, me encanta porque es muy sencillo de usar y hay muchos templates para elegir. En mi caso, no soy especialista en crear páginas web, así que uso Hugo no sólo para crear esta página mía personal, sino para los proyectos que hago.

Si no tienes todavía una web y no sabes usar Hugo, te recomiendo que busques en internet tutoriales para hacerlo, ya que en este post no voy a pararme en explicarlo todo.

Una vez tengas tu sitio generado con Hugo:

Crea un nuevo repositorio en GitHub.
Sube los archivos de tu sitio Hugo al repositorio.

GitHub Pages

Para comenzar a alojar la web en GitHub Pages, sigue los siguientes pasos:

1. Crea una branch llamada “gh-pages”

Este paso es necesario para el despliegue automático de GitHub Actions. Es una rama especial que GitHub utiliza para GitHub Pages.

2. Establece correctamente los permisos

Dirigete hacia Settings -> Actions -> General -> Workflow permissions y activa “Read and write permissions”.

No olvides darle al botón de guardar!

3. Establece el despliegue por GitHub Actions

Ve a Settings -> Pages y pon como fuente del despliegue GitHub Actions.

4. Crea el archivo de configuración de GitHub Actions

En tu directorio de trabajo, crea una carpeta llamada .github y dentro crea otra carpeta llamada workflows. Dentro de esta última crea una archivo llamado deploy.yml y copia dentro de el lo siguiente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb                    
      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"                    
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

(Obtenido de la documentación oficial de Hugo)

5. Desplegar

Una vez hayas hecho los pasos anteriores, sólo queda desplegar la web. Para ello, sube los cambios realizados en el repositorio (creación del archivo) haciendo un commit y luego un push. Automáticamente cuando se haga el push se va a desencadenar el GitHub Action que generará y desplegará la web en la branch gh-pages.

Dominio personalizado y Cloudflare

Por defecto, podrás acceder a la web desde https://usuario.github.io/repositorio lo cual es totalmente gratuito. Sin embargo si quieres usar un dominio propio deberás seguir los siguientes pasos. Ten en cuenta que yo voy a usar Cloudflare como servidor DNS para mi dominio, pero esto no es obligatorio para usar un dominio personalizado con GitHub pages.

Configuración en Cloudflare

Comprar el dominio. Si aún no lo tienes, compra el dominio que más te guste. Yo recomiendo Google Domains para hacerlo por su sencillez.
Pasar el dominio a Cloudflare. No indagaré mucho en este paso, hay mucha información en internet sobre esto y dependerá de dónde hayas comprado el dominio.
Cuando tengas tu dominio correctamente en Cloudflare, toca configurar el DNS para que apunte a los serviores de GitHub Pages. A continuación, la siguiente foto es un ejemplo de cómo debe quedar tu configuración:

Ve hacia el panel izquierdo -> DNS. Básicamente debes crear cuatro registros A que apunten a cuatro direcciones IP de GitHub Pages:

  185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Toda esta información está en la documentación oficial de GitHub. Es bueno que la revises por si ha habido algún cambio desde que he escrito esto.

También debes crear un registro CNAME www que apunte hacia tu-usuario.github.io

Supuestamente, ya está todo listo, sin embargo en mi caso he encontrado problemas con el SSL y para solucionarlo he tenido que cambiar otra configuración:

En el panel izquierdo de Cloudflare ve hacia SSL/TLS y cambia el modo de encriptación de flexible a Completo.

Configuración en GitHub

Una vez nuestro dominio apunte correctamente hacia los servidores de GitHub Pages, dirígete a tu repositorio en GitHub, ve hacia Settings -> Pages -> Custom Domain y escribe tu dominio. Como ves, es muy sencillo. Al pulsar “Save” se realizará la comprobación de que los registros DNS están bien configurados.

Cuando veas el tick verde que dice “DNS check successfull”, ya estará todo listo! Dirigete a tu dominio, y si todo ha ido bien, deberías ver tu sitio web generado con Hugo y alojado de forma totalmente gratuita! 😀