Aloja un blog estatico con eleventy en GitHub Pages y GitHub Actions

Octubre 20, 2023

🍿 4 Minutos de lectura

GitHub Pages es una muy buena herramienta para alojar sitios web completamente estaticos sin necesidad de muchos pasos, de hecho este portafolio esta alojado alli.

Pero apesar de su facilidad suele ser un poco coplicado (en algunos casos) alojar sitios construidos con ciertas tecnologias, como es el caso de Eleventy.

Bueno, en mi caso me costo un monton.

Eleventy es un maravilloso (y sobretodo rapido) generador de sitios estaticos, este soporta diferentes formatos de plantillas (nunjucks, liquid, html, pug, ect) y tambien soporta Markdown, de hecho este es su mayor fuerte.

Pero al momento de alojar un sitio web o blog hay herramientas como Render o Netlify que hacen facil el proceso, pero otros, al ver que el sitio es solo contenido estatico, optan por utilizar el servicio de GitHub Pages.

Asi que en este tutorial te mostrare como implementar tu sitio en esta plataforma de manera rapida y sensilla, asi que comencemos!

En primer lugar, vas a ir al la carpeta donde tienes tu codigo y crearas un archivo en la raiz, el archivo es un .yml que utilizara Github Actions para construir el sitio y subirlo a GitHub Pages.

El archivo lo ubicaras aquí: .github/workflows/build.yml.

Puedes sustituir el nombre de build por el que quieras.

Una vez que lo tengas colocaras en su interior el siguiente codigo.

# Flujo de trabajo simple para implementar contenido estático en Github Pages
name: Implementar contenido estático a Pages

on:
  # Se ejecuta en anotaciones dirigidas a la rama predeterminada
  push:
    branches: ['main']

  # Te permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones
  workflow_dispatch:

# Establece los permisos de GITHUB_TOKEN para permitir la implementación en GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Permite una implementación simultánea
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Trabajo de implementación único ya que solo estamos implementando
  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 7
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install
      - name: Build
        run: pnpm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Subir repositorio dist
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

En path: './dist' hay que sustituir dist por la carpeta de salida de eleventy, ya sea que se llame out u otro nombre, esto es muy importante se realizar, sino GitHub Pages no encontrara el archivo index.html.

Ten en cuenta que para este ejemplo estoy utilizando el administrador de paquetes pnpm

Si no lo quieres utilizar solo debes modificar las siguientes lineas:

# ...
-     - uses: pnpm/action-setup@v2
-       with:
-         version: 7
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
-         cache: 'pnpm'
+         cache: 'npm'
      - name: Install dependencies
-       run: pnpm install
+       run: npm install
      - name: Build
-       run: pnpm run build
+       run: npm run build
# ...

Por increible que suene este es el ejemplo que utiliza Vite en su documentacion, el cual resuelve perfectamete nuestra necesidad.

Ahora lo unico que resta es hacer in push al repositorio donde esta alojado el codigo y listo, solo hay que esperar a que GitHub Actions haga su magia.