GitHub Pages للمواقع الثابتة — نشر المواقع والدومينات

GitHub Pages

استضافة مجانية من GitHub للمواقع الثابتة.

متى تستخدم GitHub Pages؟

✅ مواقع شخصية / Portfolio

✅ توثيق المشاريع

✅ مدونات (مع Jekyll)

✅ مشاريع open source

الإعداد اليدوي

1. إنشاء Repository

# اسم خاص: username.github.io
# للموقع الرئيسي

2. رفع الملفات

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/repo.git
git push -u origin main

3. تفعيل Pages

- Settings → Pages

- Source: Deploy from branch

- Branch: main / root

- Save

4. الانتظار

الموقع جاهز على: https://username.github.io/repo

GitHub Actions (للبناء التلقائي)

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

إعدادات للـ SPA

vite.config.js

export default {
  base: '/repo-name/', // مهم!
}

404.html (للـ routing)

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>جارٍ التحويل…</title>
  <script>
    // Redirect to index.html with the path
    const path = window.location.pathname;
    window.location.replace('/' + '?p=' + path);
  </script>
</head>
<body></body>
</html>

دومين مخصص

1. أضف CNAME file

example.com

2. DNS Settings

A Records:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

CNAME (www):
username.github.io

3. Enforce HTTPS

Settings → Pages → ✅ Enforce HTTPS

Jekyll (للمدونات)

# _config.yml
title: مدونتي
description: مدونة تقنية
baseurl: ""
url: "https://username.github.io"

theme: minima

plugins:
  - jekyll-feed
  - jekyll-seo-tag

---
layout: post
title: "أول مقالة"
date: 2024-01-15
categories: tech
---

# مرحباً بالعالم

هذه أول مقالة في مدونتي.

حدود GitHub Pages

⚠️ 1GB حجم Repository

⚠️ 100GB bandwidth/شهر

⚠️ 10 builds/ساعة

⚠️ Static فقط (لا backend)

⚠️ لا private repos (مجاني)

# ملف: .github/workflows/deploy.yml
# نشر تلقائي لمشروع React/Vite

name: Deploy

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@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install
        run: npm ci

      - name: Build
        run: npm run build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to Pages
        id: deployment
        uses: actions/deploy-pages@v4