Έργο 14 — CI/CD με GitHub Actions · Επίπεδο αρχάριος → ενδιάμεσο · Εκτιμώμενη διάρκεια: 1 ώρα 30 έως 2 ώρες

Λαμβάνετε έναν στατικό μίνι-ιστότοπο ήδη συνδεδεμένο με δύο λειτουργικά workflows GitHub Actions. Κλωνοποιείτε, ωθείτε, ο ιστότοπός σας είναι στο διαδίκτυο. Αλλάζετε ένα χρώμα στο config.json, ωθείτε ξανά, η δημόσια σελίδα ενημερώνεται μόνη της. Τελειώνετε επισκευάζοντας τρία ελαττωματικά workflows που απεικονίζουν τα κλασικά σφάλματα του CI/CD.

Πίνακας περιεχομένων

Το πλαίσιο
Ουσιώδεις έννοιες πριν ξεκινήσετε
Η στοχευμένη αρχιτεκτονική
Διάταξη των αρχείων
Οι κανόνες του παιχνιδιού
Προετοιμασία
Οι αποστολές
Παραδοτέα
Ερωτήσεις προβληματισμού
Βαθμολόγιο
Εργαλειοθήκη GitHub Actions
ΠΑΡΑΡΤΗΜΑ A — Ο στατικός ιστότοπος
ΠΑΡΑΡΤΗΜΑ B — Τα παρεχόμενα workflows
ΠΑΡΑΡΤΗΜΑ C — Το σενάριο κατασκευής
ΠΑΡΑΡΤΗΜΑ D — Οι τρεις βλάβες προς επισκευή

Το πλαίσιο

Μόλις προσληφθήκατε ως junior σε μια διαδικτυακή εταιρεία. Η πρώτη σας εργασία: ένας μίνι-ιστότοπος «portfolio» προς δωρεάν φιλοξενία. Η εντολή του προϊσταμένου:

«Θέλω να μπορώ να αλλάξω το χρώμα του ιστότοπου τροποποιώντας ένα μόνο αρχείο, να κάνω git push, και αυτό να ενημερώνεται μόνο του. Κανένα FTP, κανένας διακομιστής προς διαχείριση.»

Ο senior της ομάδας έχει ήδη γράψει τα δύο workflows GitHub Actions και το σενάριο κατασκευής. Η δουλειά σας:

Να αναλάβετε το παραδομένο έργο (git clone + push + ενεργοποίηση του Pages).
Να εξατομικεύσετε το config.json με τα στοιχεία σας και τα χρώματά σας.
Να αποδείξετε ότι ο κύκλος push → Pages λειτουργεί αλλάζοντας το χρώμα τουλάχιστον δύο φορές.
Να επισκευάσετε τρία ελαττωματικά workflows που δεν ξεκινούν από το μηδέν αλλά απεικονίζουν τα 3 πιο συχνά σφάλματα του CI/CD.

Αυτό το έργο δεν είναι εργαστήριο όπου γράφετε YAML από το μηδέν. Είναι εργαστήριο όπου αναλαμβάνετε μια αλυσίδα CI/CD ήδη στη θέση της, όπως σε μια πραγματική ομάδα: δεν επανεφεύρετε τα workflows, τα κατανοείτε, εξατομικεύετε, αποσφαλματώνετε.

Ουσιώδεις έννοιες πριν ξεκινήσετε

Αυτό το έγγραφο είναι αυτάρκες. Κανένα εξωτερικό μάθημα προς άνοιγμα για να το ολοκληρώσετε.

1. Τι είναι το GitHub Actions;

Το GitHub Actions είναι μια μηχανή εκτέλεσης ενσωματωμένη στο GitHub. Σε κάθε γεγονός (push, pull_request, χρονοδιακόπτης, χειροκίνητο κουμπί), εκκινεί workflows περιγραφόμενα σε YAML, σε runners (δωρεάν VM Ubuntu / Windows / macOS για δημόσια αποθετήρια).

2. Ανατομία ενός workflow YAML

yaml

name: Mon premier workflow            # εμφανίζεται στο UI

on:                                   # ΠΟΤΕ να εκτελεστεί
  push:
    branches: [main]

jobs:                                 # ΤΙ να γίνει (>= 1 job)
  construire:                         # ελεύθερο όνομα του job
    runs-on: ubuntu-latest            # ΠΟΥ να εκτελεστεί (εικόνα της VM)
    steps:                            # τα βήματα του job
      - uses: actions/checkout@v4     # βήμα "επαναχρησιμοποιήσιμη ενέργεια"
      - run: echo "Bonjour"           # βήμα "εντολή κελύφους"

Δύο τύποι βημάτων:

uses: καλεί μια δημοσιευμένη ενέργεια (actions/checkout@v4, actions/setup-python@v5, κ.λπ.).
run: εκτελεί μια εντολή κελύφους στον runner.

3. Οι 4 ενεργοποιητές που πρέπει να γνωρίζετε

`on:`	Ενεργοποιείται όταν…
`push: { branches: [main] }`	Ωθούμε μια δέσμευση στο `main`
`pull_request: { branches: [main] }`	Κάποιος ανοίγει / ενημερώνει μια PR προς `main`
`schedule: [{ cron: "0 6 * * *" }]`	Κάθε μέρα στις 06:00 UTC
`workflow_dispatch:`	Χειροκίνητο κουμπί στην καρτέλα Actions

Το ίδιο workflow μπορεί να έχει πολλούς ενεργοποιητές ταυτόχρονα — αυτή είναι η περίπτωση του deployer-pages.yml (push + χειροκίνητο).

4. Τι είναι το GitHub Pages;

Το GitHub Pages είναι στατική φιλοξενία που προσφέρεται με κάθε δημόσιο αποθετήριο. Δημοσιεύουμε HTML/CSS/JS μέσω μίας από τις ακόλουθες μεθόδους:

Από έναν κλάδο gh-pages (παλιά μέθοδος).
Από έναν φάκελο /docs του main (άλλη μέθοδος).
Από ένα workflow GitHub Actions (σύγχρονη μέθοδος, αυτή του έργου).

Το δημόσιο URL είναι https://<utilisateur>.github.io/<nom-du-depot>/ — προσβάσιμο από οποιονδήποτε περιηγητή.

5. Το τρίο επίσημων ενεργειών για το Pages

Για δημοσίευση από Actions, το deployer-pages.yml αλυσιδώνει τρεις επίσημες ενέργειες:

Κεφαλαιώδης περιορισμός: το job που δημοσιεύει χρειάζεται ιδιαίτερα δικαιώματα, αλλιώς λαμβάνουμε Resource not accessible by integration. Το παρεχόμενο workflow τα δηλώνει ήδη:

yaml

permissions:
  contents: read
  pages: write
  id-token: write

Αυτή είναι επίσης η βλάβη 1 της αποστολής 3 — κρατήστε την.

6. Αυτόματες μεταβλητές που παρέχει ο runner

Σε κάθε εκτέλεση, το GitHub Actions εκθέτει χρήσιμες μεταβλητές περιβάλλοντος:

Μεταβλητή	Περιεχόμενο
`GITHUB_SHA`	Το SHA της δέσμευσης που ενεργοποίησε το run
`GITHUB_REF_NAME`	Το όνομα του κλάδου (`main`, `feature-x`, κ.λπ.)
`GITHUB_RUN_NUMBER`	Ένας μετρητής που αυξάνεται σε κάθε run

Σε αυτό το έργο, το outils/build.py διαβάζει αυτές τις τρεις μεταβλητές για να τις εμφανίσει στη δημοσιευμένη σελίδα. Οπτική απόδειξη ότι η ανάπτυξη προέρχεται όντως από Actions και όχι από τοπικό python build.py.

Η στοχευμένη αρχιτεκτονική

Αναμενόμενος τελικός βρόχος — πρέπει να τον αναπαραγάγετε τουλάχιστον 2 φορές:

Άνοιγμα του site/config.json στο VS Code.
Αλλαγή του couleur_fond (π.χ. #0f172a → #7c3aed).
git add site/config.json && git commit -m "changement de fond" && git push.
Μετάβαση στην καρτέλα Actions του αποθετηρίου → παρατήρηση του workflow να τρέχει ζωντανά (~40 s).
Μόλις όλα είναι πράσινα, άνοιγμα του https://<vous>.github.io/<depot>/ → το φόντο είναι βιολετί.

Διάταξη των αρχείων

projet14-github-actions-pages-tp/
├── 00-ENONCE.md                             <- αυτό το έγγραφο
├── 02-CORRECTION.md                         <- λεπτομερείς λύσεις (να διαβαστούν ΜΕΤΑ τη δοκιμή)
├── README.md
│
├── site/                                    <- Ο ΙΣΤΟΤΟΠΟΣ (πηγή)
│   ├── config.json                          <- ΕΣΕΙΣ ΤΡΟΠΟΠΟΙΕΙΤΕ : χρώματα, τίτλος, συγγραφέας
│   └── src/
│       ├── index.html.template              <- πρότυπο HTML (δείκτες {{...}})
│       └── css/
│           └── style.css.template           <- πρότυπο CSS (δείκτες {{...}})
│
├── outils/
│   └── build.py                             <- ΠΑΡΕΧΕΤΑΙ — να μην τροποποιηθεί
│
├── .github/                                 <- ΗΔΗ ΛΕΙΤΟΥΡΓΙΚΑ WORKFLOWS
│   └── workflows/
│       ├── deployer-pages.yml               <- κατασκευή + δημοσίευση στο Pages
│       └── verifier-config.yml              <- επικύρωση του config.json σε PR
│
├── casses/                                  <- 3 ελαττωματικά workflows (Αποστολή 3)
│   ├── casse-1-permissions-manquantes.yml
│   ├── casse-2-declencheur-errone.yml
│   └── casse-3-chemin-artefact.yml
│
└── .gitignore                               <- αγνοεί το dist/

Σημαντικό σημείο: τα δύο workflows είναι ήδη στο .github/workflows/. Δεν έχετε τίποτα να γράψετε για το μέρος της ανάπτυξης — μόνο να κατανοήσετε τι συμβαίνει και να εξατομικεύσετε το config.json.

Οι κανόνες του παιχνιδιού

Δεν τροποποιείτε το outils/build.py — είναι το συμβόλαιο μεταξύ του config.json και του τελικού HTML/CSS.
Δεν ωθείτε τον φάκελο dist/: εμφανίζεται στο .gitignore και ανακατασκευάζεται σε κάθε run.
Κάθε ευαίσθητο δεδομένο (κωδικοί, κλειδιά API) πηγαίνει στο Settings → Secrets and variables → Actions, ποτέ σε αρχείο YAML.
Κάθε αλλαγή χρώματος πρέπει να περάσει από μια δέσμευση — καμία χειροκίνητη τροποποίηση στον δημοσιευμένο ιστότοπο.
Το αποθετήριο πρέπει να είναι δημόσιο (το GitHub Pages σε ιδιωτικά αποθετήρια απαιτεί επί πληρωμή πλάνο).

Προετοιμασία

Προαπαιτούμενα

Git εγκατεστημένο (git --version).
Python 3.10+ εγκατεστημένο (python --version — για τοπική δοκιμή του build.py).
Ένας λογαριασμός GitHub.
Αυτός ο φάκελος projet14-github-actions-pages-tp/ στον δίσκο σας.

Βήμα 0 — Δημιουργία του αποθετηρίου GitHub σας

Στο GitHub, κάντε κλικ στο New repository.
Προτεινόμενο όνομα: projet14-actions-pages.
Ορατότητα: Public (υποχρεωτικό για δωρεάν GitHub Pages).
Χωρίς README ούτε .gitignore (ήδη παρέχονται).

Βήμα 1 — Τοπική δοκιμή του build

Από τη ρίζα του έργου:

powershell

python .\outils\build.py

Πρέπει να δείτε:

OK  dist/index.html      genere
OK  dist/css/style.css   genere
--- Substitutions appliquees ---
  {{TITRE}} -> Mon premier site pilote par GitHub Actions
  {{COULEUR_FOND}} -> #0f172a
  ...

Ανοίξτε το dist/index.html σε έναν περιηγητή: βλέπετε τον ιστότοπο με το προεπιλεγμένο σκοτεινό φόντο. Αν λειτουργεί τοπικά, θα λειτουργήσει στο Actions.

Βήμα 2 — Αρχικοποίηση του τοπικού αποθετηρίου και ώθηση

powershell

git init
git branch -M main
git add .
git commit -m "point de depart projet14"
git remote add origin https://github.com/<votre-utilisateur>/projet14-actions-pages.git
git push -u origin main

Βήμα 3 — Ενεργοποίηση του GitHub Pages σε λειτουργία Actions

Στο GitHub, ανοίξτε το αποθετήριο → Settings → Pages.
Στο Source, επιλέξτε GitHub Actions (και όχι Deploy from a branch).
Αποθηκεύστε.

Βήμα 4 — Παρατήρηση της πρώτης ανάπτυξης

Καρτέλα Actions του αποθετηρίου σας → εμφανίζεται ένα run με τίτλο Deployer sur GitHub Pages. Περιμένετε να γίνει πράσινο (~40 δευτερόλεπτα μετά το push).

Στο τέλος του job deployer, ένα μήνυμα ανακοινώνει:

Your site is live at https://<vous>.github.io/projet14-actions-pages/

Κάντε κλικ → βλέπετε τον δημοσιευμένο ιστότοπό σας.

Οι αποστολές

Αποστολή 1 — Εξατομίκευση του `config.json` (20 βαθμοί)

Ανοίξτε το site/config.json και τροποποιήστε τουλάχιστον:

titre — βάλτε το όνομά σας ή αυτό ενός φανταστικού έργου.
auteur — το όνομά σας.
couleur_fond — στη μορφή #RRGGBB (π.χ. #7c3aed, #dc2626, #0891b2).

Επαληθεύστε με python .\outils\build.py ότι το build περνά ακόμη. Λάθος μορφή (rouge, #ff, RGB(255,0,0)) εντοπίζεται από το build.py και θα μπλοκάρει το workflow.

Περιορισμός: μην σπάσετε το JSON. Ένα κόμμα παραπάνω, μια αγκύλη που λείπει → κόκκινο workflow στο GitHub.

Αποστολή 2 — Απόδειξη του βρόχου push → Pages (30 βαθμοί)

Αυτό είναι η καρδιά του έργου. Πρέπει να δείξετε ότι ο κύκλος CI/CD λειτουργεί, ενεργοποιώντας τον τουλάχιστον δύο φορές:

Τροποποιήστε το site/config.json (αλλάξτε π.χ. το couleur_fond σε #dc2626 — κόκκινο).
git add site/config.json && git commit -m "fond en rouge" && git push.
Περιμένετε το workflow Deployer sur GitHub Pages να γίνει πράσινο στην καρτέλα Actions (~40 s).
Ανοίξτε το https://<vous>.github.io/<votre-depot>/ → το φόντο είναι κόκκινο.
Επαναλάβετε τη λειτουργία με άλλο χρώμα (πράσινο #16a34a, μπλε #0891b2, βιολετί #7c3aed, της επιλογής σας).

Απόδειξη προς παροχή στην έκθεση:

Δύο στιγμιότυπα οθόνης της δημόσιας σελίδας με δύο διαφορετικά χρώματα.
Τα δύο SHA δέσμευσης που αντιστοιχούν (έξοδος του git log --oneline).
Ένα στιγμιότυπο της καρτέλας Actions που δείχνει τα δύο πράσινα runs.

Κρίσιμο σημείο: στη δημόσια σελίδα, ένα πλακίδιο εμφανίζει Commit SHA : <7 χαρακτήρες>. Αυτό το SHA αντιστοιχεί στην τελευταία δέσμευση στο main. Είναι η οπτική απόδειξη ότι η σελίδα προέρχεται όντως από Actions.

Αποστολή 3 — Έρευνα: επισκευή 3 ελαττωματικών workflows (30 βαθμοί)

Ο φάκελος casses/ περιέχει τρία ελαττωματικά workflows, καθένα απεικονίζει ένα κλασικό σφάλμα. Για καθένα:

Αντιγράψτε το αρχείο στο .github/workflows/ (δίπλα στα επίσημα workflows).
Ωθήστε — παρατηρήστε ότι το workflow δεν συμπεριφέρεται όπως αναμένεται (αποτυχία ή απουσία ενεργοποίησης).
Διαγνώστε διαβάζοντας τα ημερολόγια (καρτέλα Actions → run → βήμα).
Επισκευάστε στο αντίγραφο του .github/workflows/ (όχι στο casses/ — το πρωτότυπο μένει ελαττωματικό).
Ωθήστε ξανά — το workflow πρέπει πλέον να γίνει πράσινο.

Αρχείο	Αναμενόμενο σύμπτωμα
`casse-1-permissions-manquantes.yml`	Το job `deployer` αποτυγχάνει με `Resource not accessible by integration`
`casse-2-declencheur-errone.yml`	Κανένα run δεν ενεργοποιείται: το workflow αγνοείται σιωπηλά
`casse-3-chemin-artefact.yml`	Το job `construire` αποτυγχάνει με `Error: Path does not exist: ./public`

Σημαντική συμβουλή: μπορείτε να εκκινήσετε κάθε workflow χειροκίνητα μέσω Run workflow στην καρτέλα Actions, χωρίς να κάνετε πραγματική δέσμευση σε κάθε δοκιμή. Τα ελαττωματικά workflows έχουν όλα workflow_dispatch: ή μπορείτε να το προσθέσετε προσωρινά.

Απόδειξη προς παροχή για κάθε βλάβη: στιγμιότυπο του κόκκινου run πριν, diff της διόρθωσης, στιγμιότυπο του πράσινου run μετά.

Αποστολή 4 — Μπόνους (+10 βαθμοί)

Κατ' επιλογή, ένα μόνο αρκεί:

a) Προσθέστε ένα σήμα κατάστασης σε ένα README.md στη ρίζα του αποθετηρίου GitHub σας (όχι αυτό του εργαστηρίου):
markdown
```
![Deploy](https://github.com/<vous>/<depot>/actions/workflows/deployer-pages.yml/badge.svg)
```
Εμφανίζει passing (πράσινο) ή failing (κόκκινο) ζωντανά.
b) Δημιουργήστε μια PR δοκιμής με ηθελημένα άκυρο config.json (π.χ. "couleur_fond": "rouge"). Το workflow Verifier la configuration πρέπει να αποτύχει και να μπλοκάρει τη συγχώνευση. Παρέχετε το στιγμιότυπο του μπλοκαρίσματος.
c) Δημιουργήστε ένα τρίτο χειροκίνητο workflow (workflow_dispatch:) που στέλνει ειδοποίηση curl σε webhook (URL παρεχόμενο μέσω Settings → Secrets, ποτέ σε καθαρό κείμενο στο YAML).

Παραδοτέα

Ένα RAPPORT.md στη ρίζα του αποθετηρίου σας, που περιέχει:

Το δημόσιο URL του ιστότοπού σας (https://<vous>.github.io/<depot>/).
Για την Αποστολή 2: δύο στιγμιότυπα οθόνης της σελίδας με δύο διαφορετικά χρώματα + τα δύο SHA + στιγμιότυπο της καρτέλας Actions με τα πράσινα runs.
Για την Αποστολή 3: για κάθε βλάβη, στιγμιότυπο του κόκκινου run + γραπτή διάγνωση + diff της διόρθωσης + στιγμιότυπο του πράσινου run.
Τις απαντήσεις σας στις ερωτήσεις προβληματισμού.
(Μπόνους) Την απόδειξη της αποστολής 4 αν την κάνατε.

Ερωτήσεις προβληματισμού

Ένα workflow που περιέχει on: push χωρίς να διευκρινίζει branches: — πότε ενεργοποιείται; Είναι πρόβλημα;
Γιατί το id-token: write είναι απαραίτητο για δημοσίευση στο GitHub Pages; Σε τι χρησιμεύει το διακριτικό OIDC;
Τι συμβαίνει αν δύο συνάδελφοι κάνουν git push στο main ταυτόχρονα; Το μπλοκ concurrency τι αλλάζει στη συμπεριφορά;
Προσθέτετε ένα μυστικό API_KEY στο Settings → Secrets. Ο κώδικας του workflow μπορεί να το διαβάσει μέσω ${{ secrets.API_KEY }}. Μπορεί να εκτυπωθεί στα ημερολόγια; Γιατί το GitHub καλύπτει ορισμένες τιμές;
Έχετε δύο workflows: deployer-pages.yml και verifier-config.yml. Το δεύτερο είναι άχρηστο αφού το πρώτο κάνει την ίδια κατασκευή; Αιτιολογήστε γιατί είναι συμπληρωματικά.
Ένας runner GitHub Actions είναι μια εφήμερη VM: τίποτα δεν επιμένει μεταξύ δύο runs. Ποια συνέπεια έχει αυτό αν το build.py σας δημιουργούσε ένα αρχείο historique.log; Πού θα έπρεπε να το αποθηκεύσετε;

Βαθμολόγιο

Στοιχείο	Βαθμοί
Αποστολή 1 — εξατομικευμένο `config.json` και τοπικό build OK	20
Αποστολή 2 — Απόδειξη του κύκλου push → Pages (2 χρώματα + στιγμιότυπα + SHA)	30
Αποστολή 3 — 3 βλάβες διαγνωσμένες και επισκευασμένες	30
Ποιότητα της έκθεσης (δομή, στιγμιότυπα, εξηγήσεις)	20
Μπόνους — Αποστολή 4	+10
Σύνολο	100 (+10)

Ποινές:

−10 ανά workflow που βρίσκεται εκτός του .github/workflows/ (άρα αγνοείται από το GitHub).
−15 για κάθε μυστικό σε καθαρό κείμενο σε δεσμευμένο αρχείο YAML.
−5 ανά δεσμευμένο φάκελο dist/ (πρέπει να μείνει στο .gitignore).
−10 για κάθε τροποποίηση του outils/build.py.

Εργαλειοθήκη GitHub Actions

yaml

# Σκελετός αναφοράς ενός workflow
name: Description humaine
on:                                       # ΠΟΤΕ
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:                      # χειροκίνητο κουμπί

permissions:                              # ΜΟΝΟ ό,τι είναι απαραίτητο
  contents: read
  pages: write

concurrency:                              # να μην στοιβάζονται τα runs
  group: pages
  cancel-in-progress: false

jobs:
  mon-job:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with:
          python-version: "3.12"
      - name: Une commande
        run: python outils/build.py

Οι 5 χειρονομίες που σώζουν στη διάγνωση:

Καρτέλα Actions → κόκκινο run → αποτυχημένο step: το μήνυμα σφάλματος είναι στην κορυφή, κόκκινο. Η κατά λέξη ανάγνωσή του αποφεύγει το 90 % των σφαλμάτων.
Re-run failed jobs: επανεκκινεί μόνο τα αποτυχημένα βήματα, πιο γρήγορα.
workflow_dispatch: πρόσθεσέ το στα workflows σου για να τα επανεκκινείς χειροκίνητα χωρίς κενή δέσμευση.
echo "::debug::mon message": εκτυπώνει μήνυμα αποσφαλμάτωσης στα ημερολόγια.
Διάβασε τα ημερολόγια μέχρι το τέλος: μερικές φορές το σημαντικό σφάλμα είναι στη μέση, όχι στο τέλος.

ΠΑΡΑΡΤΗΜΑ A — Ο στατικός ιστότοπος

Αρχείο: `site/config.json`

Αυτό είναι το μόνο αρχείο που πρέπει να τροποποιείτε σε κανονικές συνθήκες.

json

{
  "titre": "Mon premier site pilote par GitHub Actions",
  "sous_titre": "Change une couleur, fais un push, et regarde GitHub Pages se mettre a jour tout seul.",
  "couleur_fond": "#0f172a",
  "couleur_texte": "#f1f5f9",
  "couleur_accent": "#38bdf8",
  "auteur": "Etudiant du cours AOA-DEVOPS-101",
  "version": "1.0.0"
}

Περιορισμοί του αρχείου:

Τα 7 κλειδιά είναι υποχρεωτικά.
Τα 3 χρώματα (couleur_fond, couleur_texte, couleur_accent) πρέπει να τηρούν τη μορφή #RRGGBB — αλλιώς το build.py απορρίπτει.
Έγκυρο JSON: διπλά εισαγωγικά, κόμμα μετά από κάθε πεδίο εκτός από το τελευταίο.

Αρχείο: `site/src/index.html.template`

Πρότυπο HTML του οποίου κάθε {{MARQUEUR}} αντικαθίσταται από το build.py. Η σελίδα θα εμφανίζει:

Τον τίτλο και τον υπότιτλο (από το config.json).
Τον συγγραφέα και την έκδοση (από το config.json).
Το SHA της δέσμευσης, τον αριθμό του run και τον κλάδο (από τις μεταβλητές GITHUB_* του runner).
Την ημερομηνία κατασκευής.

Το πλήρες αρχείο παρέχεται στο site/src/index.html.template.

Αρχείο: `site/src/css/style.css.template`

Πρότυπο CSS που χρησιμοποιεί {{COULEUR_FOND}}, {{COULEUR_TEXTE}} και {{COULEUR_ACCENT}} σε ένα μπλοκ :root.

Απόσπασμα:

css

:root {
  --fond: {{COULEUR_FOND}};
  --texte: {{COULEUR_TEXTE}};
  --accent: {{COULEUR_ACCENT}};
}

body {
  background: var(--fond);
  color: var(--texte);
}

ΠΑΡΑΡΤΗΜΑ B — Τα παρεχόμενα workflows

Αρχείο: `.github/workflows/deployer-pages.yml`

yaml

name: Deployer sur GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  construire:
    name: Construire le site
    runs-on: ubuntu-latest
    steps:
      - name: Recuperer le code
        uses: actions/checkout@v4

      - name: Installer Python 3.12
        uses: actions/setup-python@v5
        with:
          python-version: "3.12"

      - name: Generer dist/ a partir de config.json
        run: python outils/build.py

      - name: Preparer le dossier a publier
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deployer:
    name: Publier sur GitHub Pages
    needs: construire
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.publication.outputs.page_url }}
    steps:
      - name: Publier l'artefact
        id: publication
        uses: actions/deploy-pages@v4

Ανάγνωση γραμμή προς γραμμή: βλ. 02-CORRECTION.md → Αποστολή 2.

Αρχείο: `.github/workflows/verifier-config.yml`

yaml

name: Verifier la configuration

on:
  pull_request:
    branches: [main]
  push:
    branches-ignore: [main]

jobs:
  linter:
    name: Valider config.json
    runs-on: ubuntu-latest
    steps:
      - name: Recuperer le code
        uses: actions/checkout@v4

      - name: Installer Python 3.12
        uses: actions/setup-python@v5
        with:
          python-version: "3.12"

      - name: Construire en dry-run
        run: python outils/build.py

      - name: Verifier que dist/ est bien genere
        run: |
          test -f dist/index.html
          test -f dist/css/style.css
          echo "OK - site construit sans erreur"

ΠΑΡΑΡΤΗΜΑ C — Το σενάριο κατασκευής

Το outils/build.py κάνει τέσσερα πράγματα:

Διαβάζει το site/config.json.
Επικυρώνει ότι τα 7 αναμενόμενα κλειδιά είναι παρόντα.
Επικυρώνει ότι τα 3 χρώματα είναι στη μορφή #RRGGBB (regex).
Υποκαθιστά όλους τους {{MARQUEUR}} στα δύο πρότυπα και γράφει το αποτέλεσμα στο dist/.

Στο GitHub Actions, οι μεταβλητές GITHUB_SHA, GITHUB_REF_NAME, GITHUB_RUN_NUMBER είναι αυτόματα διαθέσιμες. Τοπικά, δεν υπάρχουν → το σενάριο εμφανίζει local-* στη θέση τους. Έτσι διακρίνουμε μια σελίδα πραγματικά αναπτυγμένη από Actions από μια σελίδα κατασκευασμένη τοπικά.

ΠΑΡΑΡΤΗΜΑ D — Οι τρεις βλάβες προς επισκευή

Αρχείο: `casses/casse-1-permissions-manquantes.yml`

Το workflow τρέχει αλλά το job deployer αποτυγχάνει με:

Error: Resource not accessible by integration

Ερώτηση να θέσετε στον εαυτό σας: ποια ολόκληρη ενότητα λείπει, στην κορυφή του αρχείου, δίπλα στο on:;

Αρχείο: `casses/casse-2-declencheur-errone.yml`

Ένα push στο main δεν ενεργοποιεί ποτέ αυτό το workflow. Κανένα run δεν εμφανίζεται. Κανένα σφάλμα.

Ερώτηση να θέσετε στον εαυτό σας: διαβάστε το κλειδί κάτω από το on:. Το GitHub περιμένει push, αλλά τι βλέπουμε γραμμένο;

Αρχείο: `casses/casse-3-chemin-artefact.yml`

Το build.py επιτυγχάνει και εμφανίζει OK dist/index.html genere. Αλλά το upload-pages-artifact αποτυγχάνει με:

Error: Path does not exist: ./public

Ερώτηση να θέσετε στον εαυτό σας: πού γράφει το build.py τον ιστότοπο (κοιτάξτε τον κώδικα Python); Ποιο path: πρέπει λοιπόν να βάλετε στο workflow;

Μάθημα δημιουργημένο από τον Dr. Haythem REHOUMA — Ανάπτυξη και ανάπτυξη λύσεων δεδομένων

Πίνακας περιεχομένων

Το πλαίσιο

Ουσιώδεις έννοιες πριν ξεκινήσετε

1. Τι είναι το GitHub Actions;

2. Ανατομία ενός workflow YAML

3. Οι 4 ενεργοποιητές που πρέπει να γνωρίζετε

4. Τι είναι το GitHub Pages;

5. Το τρίο επίσημων ενεργειών για το Pages

6. Αυτόματες μεταβλητές που παρέχει ο runner

Η στοχευμένη αρχιτεκτονική

Διάταξη των αρχείων

Οι κανόνες του παιχνιδιού

Προετοιμασία

Προαπαιτούμενα

Βήμα 0 — Δημιουργία του αποθετηρίου GitHub σας

Βήμα 1 — Τοπική δοκιμή του build

Βήμα 2 — Αρχικοποίηση του τοπικού αποθετηρίου και ώθηση

Βήμα 3 — Ενεργοποίηση του GitHub Pages σε λειτουργία Actions

Βήμα 4 — Παρατήρηση της πρώτης ανάπτυξης

Οι αποστολές

Αποστολή 1 — Εξατομίκευση του config.json (20 βαθμοί)

Αποστολή 2 — Απόδειξη του βρόχου push → Pages (30 βαθμοί)

Αποστολή 3 — Έρευνα: επισκευή 3 ελαττωματικών workflows (30 βαθμοί)

Αποστολή 4 — Μπόνους (+10 βαθμοί)

Παραδοτέα

Ερωτήσεις προβληματισμού

Βαθμολόγιο

Εργαλειοθήκη GitHub Actions

ΠΑΡΑΡΤΗΜΑ A — Ο στατικός ιστότοπος

Αρχείο: site/config.json

Αρχείο: site/src/index.html.template

Αρχείο: site/src/css/style.css.template

ΠΑΡΑΡΤΗΜΑ B — Τα παρεχόμενα workflows

Αρχείο: .github/workflows/deployer-pages.yml

Αρχείο: .github/workflows/verifier-config.yml

ΠΑΡΑΡΤΗΜΑ C — Το σενάριο κατασκευής

ΠΑΡΑΡΤΗΜΑ D — Οι τρεις βλάβες προς επισκευή

Αρχείο: casses/casse-1-permissions-manquantes.yml

Αρχείο: casses/casse-2-declencheur-errone.yml

Αρχείο: casses/casse-3-chemin-artefact.yml

Αποστολή 1 — Εξατομίκευση του `config.json` (20 βαθμοί)

Αρχείο: `site/config.json`

Αρχείο: `site/src/index.html.template`

Αρχείο: `site/src/css/style.css.template`

Αρχείο: `.github/workflows/deployer-pages.yml`

Αρχείο: `.github/workflows/verifier-config.yml`

Αρχείο: `casses/casse-1-permissions-manquantes.yml`

Αρχείο: `casses/casse-2-declencheur-errone.yml`

Αρχείο: `casses/casse-3-chemin-artefact.yml`