Créer une Page Web avec GitHub Pages et Actions

Découvrez comment transformer votre dépôt GitHub en site web avec GitHub Pages et GitHub Actions.

Configuration de Base

1. Créer un Dépôt GitHub

# Créer un nouveau dépôt
git init mon-site
cd mon-site

# Créer la structure de base
mkdir docs
touch docs/index.html

2. Configuration 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

Création du Site

1. Structure HTML de Base

<!-- 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. Configuration avec 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

Déploiement Automatique

1. Configuration des 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. Configuration du Domaine Personnalisé

# CNAME
mon-site.com

Optimisation et SEO

1. Configuration 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. Optimisation des Performances

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

Bonnes Pratiques

Structure du Site
- Organisation claire des fichiers
- Navigation intuitive
- Responsive design
- Accessibilité
Performance
- Optimisation des images
- Minification des assets
- Cache efficace
- Chargement rapide
Sécurité
- HTTPS obligatoire
- Protection des formulaires
- Validation des entrées
- Mises à jour régulières

Conclusion

Points clés à retenir :

Configuration GitHub Pages
Déploiement automatique
Optimisation SEO
Bonnes pratiques

Recommandations :

Utiliser Jekyll
Automatiser le déploiement
Optimiser les performances
Suivre les bonnes pratiques
Se former sur GitHub Pages

À propos de InSkillCoach

Expert en formation et technologies

Coach spécialisé dans les technologies avancées et l'IA, porté par GNeurone Inc.

GitHub Voir tous les articles

Certifications:

AWS Certified Solutions Architect – Professional
Certifications Google Cloud
Microsoft Certified: DevOps Engineer Expert
Certified Kubernetes Administrator (CKA)
CompTIA Security+

1.2k

293