نشر المواقع الإلكترونية باستخدام GitHub Actions

تعرّف على كيفية نشر أنواع مختلفة من المواقع الإلكترونية باستخدام GitHub Actions.

نشر موقع React

1. إعداد المشروع

// package.json
{
  "name": "mon-site-react",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

2. سير عمل GitHub Actions

# .github/workflows/react.yml
name: Deploy React App

on:
  push:
    branches: [ main ]

jobs:
  build-and-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: ./build

نشر موقع Vue.js

1. إعداد المشروع

// package.json
{
  "name": "mon-site-vue",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

2. سير عمل GitHub Actions

# .github/workflows/vue.yml
name: Deploy Vue App

on:
  push:
    branches: [ main ]

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

نشر موقع Next.js

1. إعداد المشروع

// package.json
{
  "name": "mon-site-next",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

2. سير عمل GitHub Actions

# .github/workflows/next.yml
name: Deploy Next.js App

on:
  push:
    branches: [ main ]

jobs:
  build-and-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: Export
        run: npm run export
        
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

نشر موقع Hugo

1. إعداد المشروع

# config.yml
baseURL: "https://mon-site.com/"
languageCode: "fr-fr"
title: "Mon Site Hugo"

2. سير عمل GitHub Actions

# .github/workflows/hugo.yml
name: Deploy Hugo 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
        with:
          submodules: recursive
          fetch-depth: 0
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      
      - name: Build with Hugo
        run: hugo --minify
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  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

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

1. الإعداد

   • متغيرات البيئة
   • أسرار GitHub (Secrets)
   • التخزين المؤقت للاعتماديات
   • الاختبارات الآلية

2. الأداء

   • بناء محسَّن
   • ملفات Assets مصغَّرة
   • تخزين مؤقت فعّال
   • المراقبة

3. الأمان

   • رموز Tokens آمنة
   • أقل قدر ممكن من الصلاحيات
   • التحقق من صحة المدخلات
   • تحديثات منتظمة

الخلاصة

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

• النشر التلقائي
• إعداد مناسب
• أداء محسَّن
• أمان معزَّز

التوصيات:

• اختيار سير العمل المناسب
• أتمتة الاختبارات
• تأمين العمليات
• اتباع أفضل الممارسات
• التدرّب على GitHub Actions