Estos días he estado ayudando a una amiga a crear su sitio web 🌐. Como queríamos evitar costes iniciales 💸, decidimos desarrollarlo con Jekyll y desplegarlo directamente en GitHub Pages 🚀, para que pudiera tener su propia página personal sin complicaciones.

En este artículo quiero compartir contigo la configuración de Dev Containers 🛠️ que estoy utilizando para desarrollarlo y probarlo en local 🧪, así como el workflow de GitHub Actions 🔁 que he preparado para automatizar el despliegue. ¡Espero que te sea útil!

Configuración de Dev Containers para Jekyll

Si no conoces Dev Containers te invito a que le eches un vistazo a este vídeo que grabé sobre ello:

La configuración en este caso es súper sencilla, ya que ya existe una imagen que contiene Jekyll:

{
	"name": "Jekyll Dev Environment",
	"image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye",
	"features": {
		"ghcr.io/devcontainers/features/github-cli:1": {}
	}
}

Para crear un nuevo sitio con jekyll solamente tienes que lanzar este comando dentro de este dev container:

jekyll new my-awesome-site

Si necesitas más información sobre esto puedes echar un vistazo a su documentación oficial.

Workflow de GitHub Actions para desplegar Jekyll

Una vez que ya tienes tu sitio web listo para desplegar en tu cuenta de GitHub puedes hacerlo de forma sencilla utilizando este flujo de GitHub Actions:

name: Build and deploy Jekyll site to GitHub Pages
on:
  push:
    branches:
      - main
permissions:
  id-token: write
  pages: write
jobs:
  github-pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1.213.0
        with:
          ruby-version: '3.2'
          bundler-cache: true
      
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5.0.0
        
      - name: Build site
        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
        env:
          JEKYLL_ENV: production
          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3.0.1
        with:
          path: "_site/"
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4.0.5

🚨Importante: para que el sitio web sea gratuito necesitas que el repositorio sea público.

Si quieres saber más sobre GitHub Actions aquí te dejo una serie que grabé sobre ello:

¡Nos vemos 👋🏻!