בין אם אתם בונים פרויקט בשביל העולם או רק בשביל קורות החיים, דף ווב לפרויקט הזה שמסביר מה הוא עושה יכול לעזור לאנשים למצוא אתכם, או לבוסים פוטנציאליים להתרשם מהעבודה שלכם. ואם כבר הפרויקט שמור על גיטהאב בואו נבנה לו גם דף מידע שיאוחסן באותו מקום, בתשתית של Github Pages.

1. איך ליצור דף Github Pages לפרויקט

אחרי שהעליתם את הפרויקט לגיטהאב הגיע הזמן ליצור עבורו דף מידע. הדף הוא פרויקט Front End רגיל שנשמר בתיקייה נפרדת בפרויקט, בדוגמה שלי אני קורא לתיקיה gh-pages. אני מנהל את הקבצים בדף המידע בענף נפרד, שגם לו אני קורא בשביל הנוחות gh-pages. כל פעם שנעלה שינוי לאותו ענף באופן אוטומטי גיטהאב יבנה את דף המידע ויעדכן אותו ברשת. הכתובת של דף המידע תהיה:

https://<user>.github.io/<repo>

כאשר user הוא שם המשתמש בגיטהאב שלכם ו repo הוא שם המאגר של הפרויקט. מוכנים? בואו ניכנס לתיקיית הפרויקט ונצא לדרך-

1. צרו את הענף gh-pages בו יישמר הדף:

$ git switch -c gh-pages

1. באותו ענף צרו תיקיה חדשה עבור הקבצים של הדף. אפשר ליצור את הפרויקט עם vite.

$ npm create vite@latest gh-pages

1. ערכו את הקבצים שבתיקייה כדי ליצור פרויקט צד-לקוח (אני בחרתי ריאקט וטייפסקריפט, אבל אפשר לבחור כל טכנולוגיית צד לקוח שתרצו). מה שחשוב שהפרויקט יוכל להיבנות עם npm build בלי שגיאות.

2. מעלים את העבודה שלנו לענף החדש במאגר:

$ git add .
$ git commit -m 'created gh page'
$ git push --set-upstream origin gh-pages

1. תקנו את ההגדרות - בקובץ vite.config.js או vite.config.ts יש לעדכן את מפתח ה base כדי שיתאים לדומיין אליו אתם הולכים להעלות את הפרויקט. אנחנו יוצרים דף גיטהאב לפרויקט קיים ובמקרה שלי שם המאגר הוא blog-to-telegram לכן אני אשתמש בשם הפרויקט בתור base. הקובץ אחרי השינוי נראה כך:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/blog-to-telegram/',
  plugins: [react()],
})

1. צרו תיקיה חדשה בפרויקט (תחת התיקיה הראשית) בשם .github/workflows ובתוכה צרו קובץ באיזה שם שתבחרו עם סיומת yml, למשל לקובץ שלי קראתי deploy-gh-page.yml. תוכן הקובץ הוא:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['gh-pages']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
          cache-dependency-path: '**/package-lock.json'
      - name: Install dependencies
        working-directory: ./gh-pages
        run: npm install
      - name: Build
        working-directory: ./gh-pages
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload dist repository
          path: './gh-pages/dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

1. דחפו את כל השינויים לפרויקט:

$ git add .
$ git commit -m 'add workflow'
$ git push

כעת הכנסו לדף הפרויקט שלכם בגיטהאב ובחרו בטאב Actions. לחצו על האקשן החדש שיצרתם ואם הכל עבד כמו שצריך אתם תראו לידה סימן של וי ירוק שמסמן שהיא בוצעה בהצלחה. לחצו על הוי הירוק ותגיעו למסך ההרצה ובו יש תיבה בשם deploy עם הנתיב לאן נשמר הדף שלכם. לחצו על הלינק כדי לראות את העמוד באוויר.

1. מעכשיו כל שינוי שתעשו בענף gh-pages ותדחפו לגיטהאב יגרום לבנייה מחדש של דף הפרויקט.