Criando uma Página Web com GitHub Pages e Actions

Descubra como transformar seu repositório GitHub em um site web com GitHub Pages e GitHub Actions.

Configuração Básica

1. Criar um Repositório GitHub

# Criar um novo repositório
git init mon-site
cd mon-site

# Criar a estrutura básica
mkdir docs
touch docs/index.html

2. Configuração do 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

Criação do Site

1. Estrutura 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. Configuração com 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

Implantação Automática

1. Configuração das 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. Configuração do Domínio Personalizado

# CNAME
mon-site.com

Otimização e SEO

1. Configuração 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. Otimização de Desempenho

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

Boas Práticas

1. Estrutura do Site

   • Organização clara dos arquivos
   • Navegação intuitiva
   • Design responsivo
   • Acessibilidade

2. Desempenho

   • Otimização de imagens
   • Minificação dos assets
   • Cache eficiente
   • Carregamento rápido

3. Segurança

   • HTTPS obrigatório
   • Proteção dos formulários
   • Validação das entradas
   • Atualizações regulares

Conclusão

Pontos-chave a lembrar:

• Configuração do GitHub Pages
• Implantação automática
• Otimização de SEO
• Boas práticas

Recomendações:

• Usar Jekyll
• Automatizar a implantação
• Otimizar o desempenho
• Seguir as boas práticas
• Aprofundar-se em GitHub Pages