Despliegue de sitios web con GitHub Actions

Descubre cómo desplegar distintos tipos de sitios web con GitHub Actions.

Despliegue de un sitio React

1. Configuración del proyecto

// package.json
{
  "name": "mon-site-react",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

2. Workflow de GitHub Actions

# .github/workflows/react.yml
name: Deploy React App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

Despliegue de un sitio Vue.js

1. Configuración del proyecto

// package.json
{
  "name": "mon-site-vue",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

2. Workflow de GitHub Actions

# .github/workflows/vue.yml
name: Deploy Vue App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Despliegue de un sitio Next.js

1. Configuración del proyecto

// package.json
{
  "name": "mon-site-next",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

2. Workflow de GitHub Actions

# .github/workflows/next.yml
name: Deploy Next.js App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Build
        run: npm run build
        
      - name: Export
        run: npm run export
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

Despliegue de un sitio Hugo

1. Configuración del proyecto

# config.yml
baseURL: "https://mon-site.com/"
languageCode: "fr-fr"
title: "Mon Site Hugo"

2. Workflow de GitHub Actions

# .github/workflows/hugo.yml
name: Deploy Hugo site to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      
      - name: Build with Hugo
        run: hugo --minify
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  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

Buenas prácticas

1. Configuración

   • Variables de entorno
   • Secretos de GitHub
   • Caché de dependencias
   • Pruebas automatizadas

2. Rendimiento

   • Build optimizado
   • Assets minificados
   • Caché eficiente
   • Monitorización

3. Seguridad

   • Tokens seguros
   • Permisos mínimos
   • Validación de las entradas
   • Actualizaciones periódicas

Conclusión

Puntos clave que hay que recordar:

• Despliegue automático
• Configuración adaptada
• Rendimiento optimizado
• Seguridad reforzada

Recomendaciones:

• Elegir el workflow adecuado
• Automatizar las pruebas
• Proteger los procesos
• Seguir las buenas prácticas
• Formarse en GitHub Actions