Create a Web Page with GitHub Pages and Actions

Learn how to turn your GitHub repository into a website with GitHub Pages and GitHub Actions.

Basic Setup

1. Create a GitHub Repository

# Create a new repository
git init mon-site
cd mon-site

# Create the basic structure
mkdir docs
touch docs/index.html

2. GitHub Pages Configuration

# .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

Creating the Site

1. Basic HTML Structure

<!-- 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 with 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

Automatic Deployment

1. Configuring 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. Custom Domain Configuration

# CNAME
mon-site.com

Optimization and SEO

1. SEO Configuration

<!-- _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. Performance Optimization

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

Best Practices

1. Site Structure

   • Clear file organization
   • Intuitive navigation
   • Responsive design
   • Accessibility

2. Performance

   • Image optimization
   • Asset minification
   • Effective caching
   • Fast loading

3. Security

   • HTTPS required
   • Form protection
   • Input validation
   • Regular updates

Conclusion

Key takeaways:

• GitHub Pages configuration
• Automatic deployment
• SEO optimization
• Best practices

Recommendations:

• Use Jekyll
• Automate deployment
• Optimize performance
• Follow best practices
• Get trained on GitHub Pages