إنشاء صفحة ويب باستخدام GitHub Pages وGitHub Actions

تعرّف على كيفية تحويل مستودع GitHub الخاص بك إلى موقع ويب باستخدام GitHub Pages وGitHub Actions.

الإعداد الأساسي

1. إنشاء مستودع 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. إعداد 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

إنشاء الموقع

1. بنية HTML الأساسية

<!-- 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. الإعداد باستخدام 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

النشر التلقائي

1. إعداد 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. إعداد النطاق المخصص

# CNAME
mon-site.com

التحسين وSEO

1. إعداد 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. تحسين الأداء

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

أفضل الممارسات

1. بنية الموقع

   • تنظيم واضح للملفات
   • تنقّل سهل وبديهي
   • تصميم متجاوب (Responsive design)
   • إمكانية الوصول

2. الأداء

   • تحسين الصور
   • تصغير حجم الأصول (Minification)
   • ذاكرة تخزين مؤقت فعّالة
   • تحميل سريع

3. الأمان

   • اشتراط HTTPS
   • حماية النماذج
   • التحقق من صحة المدخلات
   • تحديثات منتظمة

الخلاصة

النقاط الأساسية التي ينبغي تذكّرها:

• إعداد GitHub Pages
• النشر التلقائي
• تحسين SEO
• أفضل الممارسات

التوصيات:

• استخدام Jekyll
• أتمتة عملية النشر
• تحسين الأداء
• اتباع أفضل الممارسات
• التدرّب على GitHub Pages