Crear una página web con GitHub Pages y Actions

Descubre cómo transformar tu repositorio de GitHub en un sitio web con GitHub Pages y GitHub Actions.

Configuración básica

1. Crear un repositorio de GitHub

# Crear un nuevo repositorio
git init mon-site
cd mon-site

# Crear la estructura básica
mkdir docs
touch docs/index.html

2. Configuración de GitHub Pages

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  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

Creación del sitio

1. Estructura HTML básica

<!-- docs/index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur mon site</h1>
    </header>
    <main>
        <section>
            <h2>À propos</h2>
            <p>Description de mon site...</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Mon Site</p>
    </footer>
</body>
</html>

2. Configuración con Jekyll

# _config.yml
title: Mon Site
description: Description de mon site
baseurl: ""
url: ""

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag

Despliegue automático

1. Configuración de las Actions

# .github/workflows/jekyll.yml
name: Deploy Jekyll 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
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Build site
        run: bundle exec jekyll build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: '_site'

  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

2. Configuración del dominio personalizado

# CNAME
mon-site.com

Optimización y SEO

1. Configuración de SEO

<!-- _includes/head.html -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
    <meta name="description" content="{{ page.description | default: site.description }}">
    <link rel="canonical" href="{{ page.url | absolute_url }}">
    {% include social-meta.html %}
</head>

2. Optimización del rendimiento

# _config.yml
# Optimisations
compress_html:
  clippings: all
  comments: all
  endings: all
  profile: false
  blanklines: false
  ignore:
    envs: [development]

Buenas prácticas

1. Estructura del sitio

   • Organización clara de los archivos
   • Navegación intuitiva
   • Diseño responsive
   • Accesibilidad

2. Rendimiento

   • Optimización de las imágenes
   • Minificación de los assets
   • Caché eficaz
   • Carga rápida

3. Seguridad

   • HTTPS obligatorio
   • Protección de los formularios
   • Validación de las entradas
   • Actualizaciones periódicas

Conclusión

Puntos clave que recordar:

• Configuración de GitHub Pages
• Despliegue automático
• Optimización SEO
• Buenas prácticas

Recomendaciones:

• Utilizar Jekyll
• Automatizar el despliegue
• Optimizar el rendimiento
• Seguir las buenas prácticas
• Formarse en GitHub Pages