GitHub-Aktionen als CI/CD für eine Site auf einem statischen Generator und GitHub-Seiten

GitHub-Aktionen als CI/CD für eine Site auf einem statischen Generator und GitHub-Seiten

Nachdem ich Habr ein wenig durchforstet hatte, war ich überrascht, dass nur sehr wenige Artikel zum Thema GitHubs (Beta-)Funktion – Aktionen – veröffentlicht wurden.

Es scheint, dass diese Untertreibung durch die Tatsache erklärt werden kann, dass sich die Funktionalität noch in der Testphase befindet, wenn auch in der „Betaphase“. Aber es ist eine nützliche Funktion der Beta, die die Verwendung dieses Tools in privaten Repositories ermöglicht. Über die Arbeit mit dieser Technologie werde ich in diesem Artikel sprechen.

Vorgeschichte

Wenn wir der Reihe nach beginnen, ist es wahrscheinlich erwähnenswert, dass ich bei der Suche nach einer schnellen, bequemen, einfachen und kostenlosen Möglichkeit zum Speichern einer persönlichen „Über mich“-Website mehrere Nächte damit verbringen und viele Artikel durchforsten musste.

Manche Leute entscheiden sich für Hosting, andere für einen Cloud-Server, und diejenigen, die die Arbeit, Interaktion und Bezahlung für all das nicht verstehen wollen, wie das Hochladen statischer Websites in ein Repository, da dies jetzt sowohl auf GitHub als auch auf GitLab erfolgen kann.

Das ist natürlich jedem selbst überlassen.

Meine letzte Wahl fiel auf GitHub Pages.

Über Seiten

Wer weiß es nicht? gh-pages - Hierbei handelt es sich um eine Möglichkeit zur Speicherung der Dokumentation in Form einer Website, die kostenlos zur Verfügung gestellt wird und zusätzlich zur Dokumentation auch die Speicherung persönlicher Websites vorgeschlagen wird. Diese Funktionalität wird von GitHub allen Benutzern bereitgestellt und ist in den Repository-Einstellungen verfügbar.

Das Projekt-Repository verwendet einen Zweig gh-pages, für eine Benutzersite – ein separates Repository mit dem Namen username.github.io mit Site-Quellen in master Zweig.

Sie können mehr sehen in der Dokumentation, aber lassen Sie mich nur anmerken, dass GitHub überraschend großzügig ist und es jedem erlaubt, seine eigene Domain mit einer solchen Site zu verknüpfen, indem er einfach eine Datei hinzufügt CNAME mit dem Domainnamen und Einrichten des DNS Ihres Domainanbieters auf den GitHub-Servern.

Ich bin mir sicher, dass es hier viele Artikel darüber gibt, wie man eine solche Website entwickelt, daher werde ich nicht weiter darauf eingehen.

Auftreten eines Problems

Das Problem bestand darin, dass bei Verwendung eines statischen Generators zusätzliche Skripte geschrieben und Bibliotheken verwendet werden müssen, um den Prozess der Seitengenerierung und des Ladens in das Repository zu vereinfachen. Wenn Sie die Quellen einfach in einem separaten privaten Repository speichern, ist es bei jeder Änderung an der Site erforderlich, die lokale Umgebung für die anschließende Generierung statischer Seiten und die Veröffentlichung im Haupt-Site-Repository bereitzustellen.

Es gibt eine Fülle statische Generatoren und alle haben das gleiche Problem. Diese Maßnahmen nehmen zu viel Zeit und Mühe in Anspruch und verlangsamen letztendlich die Arbeit auf der Website, insbesondere nach mehreren Migrationen von Betriebssystem zu Betriebssystem oder Vorfällen mit Datenverlust auf Festplatten (das war in meinem Fall der Fall).

Erst kürzlich wurde entweder in einer Popup-Benachrichtigung auf der Website oder in einem Newsletter von GitHub auf ein neu erstelltes CI/CD aufmerksam gemacht, das es ermöglichte, diese Aktionen mit minimalem Aufwand durchzuführen.

Über statische Seitengeneratoren

Ich werde mich nicht besonders auf diesen Unterpunkt konzentrieren, aber ich werde einige Thesen mitteilen, zu denen ich bei der Auswahl und Verwendung der folgenden Punkte gekommen bin:

1) Wählen Sie einen Generator, der zu Ihrer Programmiersprache passt oder möglichst klar ist. Ich kam auf diese Idee, als ich selbst einige Funktionen hinzufügen musste, damit die Website funktionierte, und Krücken für mehr Stabilität und Automatisierung hinzufügen musste. Darüber hinaus ist dies ein guter Grund, selbst zusätzliche Funktionalität in Form von Plugins zu schreiben;

2) Welchen Generator Sie wählen, ist eine persönliche Entscheidung, es ist jedoch zu bedenken, dass Sie die Funktionalität von GitHub Pages zunächst installieren müssen, um zum ersten Mal in die Arbeit einzutauchen Jekyll. Glücklicherweise können Sie damit eine Website aus Quellen direkt im Repository erstellen (Ich werde dies mit meiner Wahl wiederholen).

Meine Wahl des Generators basiert auf dem ersten Punkt. Pelikan das in Python geschrieben ist, ersetzte problemlos Jekyll, was mir fremd ist (habe es fast ein Jahr lang verwendet). Dadurch verschafft mir selbst das Erstellen und Bearbeiten von Artikeln und die Arbeit an einer Website zusätzliche Erfahrungen in einer für mich interessanten Sprache.

__

Formulierung des Problems

Die Hauptaufgabe besteht darin, ein Skript (eigentlich eine Konfigurationsdatei) zu schreiben, das automatisch statische Seiten aus einem privaten Repository generiert. Die Lösung umfasst die Funktionalität einer virtuellen Umgebung. Das Skript selbst fügt vorgefertigte Seiten zum öffentlichen Repository hinzu.

Werkzeuge zur Lösung

Tools, die wir zur Lösung des Problems verwenden werden:

  • GitHub-Aktionen;
  • Python3.7;
  • Pelikan;
  • Git;
  • GitHub-Seiten.

Die Lösung

Nachdem ich mich ein wenig mit der Dokumentation vertraut gemacht und verstanden hatte, wie Skripte für Aktionen geschrieben werden, wurde klar, dass dieser Mechanismus das aufgetretene Problem vollständig lösen wird. Zum Zeitpunkt des Schreibens müssen Sie sich anmelden, um diese Funktionalität nutzen zu können. für Betatests!

GitHub-Aktionen als CI/CD für eine Site auf einem statischen Generator und GitHub-Seiten
Beschreibung der neuen Funktionalität durch Github selbst

Das Schreiben eines Aktionsskripts beginnt mit der Erstellung einer benannten Datei in einem Ordner .github und sein Unterordner workflows. Dies kann entweder manuell oder über den Editor auf der Registerkarte „Aktionen“ auf der Repository-Seite erfolgen.

GitHub-Aktionen als CI/CD für eine Site auf einem statischen Generator und GitHub-Seiten
Beispiel für ein leeres Skriptformular

Ich werde das Formular kurz kommentieren

name: CI    # название скрипта: будет отображаться во вкладке Actions

on: [push]  # действие, по которому запускается данный скрипт

jobs:       # роботы, которые будут выполняться
  build:    # сборка, которая..

    runs-on: ubuntu-latest      # ..будет запущена на основе этого образа

    steps:              # шаги которые будут проделаны после запуска образа
    - uses: actions/checkout@v1     # переход в самую актуальную ветку
    - name: Run a one-line script   # имя работы номер 1
      run: echo Hello, world!       # суть работы номер 1 (bash-команда записана в одну строку)
    - name: Run a multi-line script   # имя работы номер 2
      run: |                    # суть работы номер 2 (многострочная)
        echo Add other actions to build,
        echo test, and deploy your project.

Schreiben wir unser eigenes Dokument basierend auf der Vorlage:

0) Sie können den Namen „CI“ auch belassen. Es ist Geschmackssache.

1) Als nächstes müssen Sie die Aktion/den Auslöser auswählen, der das Skript startet. In unserem Fall ist dies der übliche Push eines neuen Commits in das Repository.

on:
  push

2) Das Image, auf dessen Grundlage das Skript gestartet wird, belassen wir ebenfalls als Beispiel, da Ubuntu mit der notwendigen Funktionalität durchaus zufrieden ist. Anschauen verfügbare Werkzeuge Es wird deutlich, dass es sich um jedes notwendige oder einfach praktische Image (oder einen darauf basierenden Docker-Container) handeln kann.

  build:
    runs-on: ubuntu-latest

3) In den Schritten richten wir zunächst die Umgebung ein, um uns auf die Hauptarbeit vorzubereiten.

3.1) Gehen Sie zu dem Zweig, den wir benötigen (Standardschritt). checkout):

- uses: actions/checkout@v1

3.2) Python installieren:

    - name: Set up Python
      uses: actions/setup-python@v1
      with:
        python-version: 3.7

3.3) Installieren Sie die Abhängigkeiten unseres Generators:

    - name: Install dependencies
      run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt

3.4) Erstellen Sie ein Verzeichnis, in dem die Site-Seiten generiert werden:

   - name: Make output folder
      run: mkdir output

4) Damit die Arbeit an der Site konsistent ist, nämlich vorherige Änderungen nicht gelöscht werden und Änderungen ohne Konflikte zum Site-Repository hinzugefügt werden können, besteht der nächste Schritt darin, das Site-Repository jedes Mal zu klonen:

   - name: Clone master branch
      run: git clone "https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git" --branch master --single-branch ./output

Dieser Schritt ruft Systemvariablen auf:

  • Variable GITHUB_ACTOR GitHub installiert sich selbst und dies ist der Benutzername, durch dessen Verschulden dieses Skript gestartet wurde;
  • variabel secrets.ACCESS_TOKEN das wird generiert Token zur Verwaltung von Github, wir können es als Umgebungsvariable übergeben, indem wir es auf der Registerkarte festlegen Secrets unsere Repository-Einstellungen. Bitte beachten Sie, dass uns der Token bei der Generierung einmalig zur Verfügung gestellt wird und kein weiterer Zugriff darauf erfolgt. Sowie die Werte der Secrets-Gegenstände.

5) Fahren wir mit der Erstellung unserer Seiten fort:

   - name: Generate static pages
      run: pelican content -o output -s publishconf.py

Die an den Generator übergebenen Parameter sind für das Verzeichnis verantwortlich, in das die generierten Dateien gesendet werden (-o output) und die Konfigurationsdatei, die wir zum Generieren verwenden (-s publishconf.py; Den Ansatz zur Trennung der lokalen Konfiguration und der Konfiguration zur Veröffentlichung können Sie in der Pelican-Dokumentation nachlesen).

Ich möchte Sie daran erinnern, was sich in unserem Ordner befindet output Das Site-Repository wurde bereits geklont.

6) Lassen Sie uns Git einrichten und unsere geänderten Dateien indizieren:

    - name: Set git config and add changes
      run: |
          git config --global user.email "${GITHUB_ACTOR}@https://users.noreply.github.com/"
          git config --global user.name "${GITHUB_ACTOR}"
          git add --all
      working-directory: ./output

An dieser Stelle wird eine bereits bekannte Variable verwendet und das Arbeitsverzeichnis angegeben, in dem die Befehle aus diesem Schritt gestartet werden. Der Befehl zum Wechseln in das Arbeitsverzeichnis würde ansonsten wie folgt aussehen: cd output.

7) Lassen Sie uns eine Commit-Nachricht generieren, die Änderungen festschreiben und sie in das Repository übertragen. Damit das Commit nicht umsonst ist und daher keinen Fehler in der Bash erzeugt (das Ausgabeergebnis ist es nicht). 0) – prüfen wir zunächst, ob es überhaupt notwendig ist, etwas zu begehen und voranzutreiben. Dazu verwenden wir den Befehl git diff-index --quiet --cached HEAD -- die an das Terminal ausgegeben wird 0 wenn es keine Änderungen gegenüber der vorherigen Version der Website gibt, und 1 es gibt solche Veränderungen. Dann verarbeiten wir das Ergebnis dieses Befehls. Daher erfassen wir in den Informationen über die Ausführung des Skripts nützliche Informationen über den Status der Website in dieser Phase, anstatt automatisch abzustürzen und uns einen Bericht über den Absturz des Skripts zu senden.

Auch diese Aktionen führen wir in unserem Verzeichnis mit vorgefertigten Seiten durch.

   - name: Push and send notification
      run: |
          COMMIT_MESSAGE="Update pages on $(date +'%Y-%m-%d %H:%M:%S')"
          git diff-index --quiet --cached HEAD -- && echo "No changes!" && exit 0 || echo $COMMIT_MESSAGE
          # Only if repo have changes
          git commit -m "${COMMIT_MESSAGE}"
          git push https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git master
      working-directory: ./output

Erlebe die Kraft effektiver Ergebnisse

Ein solches Skript ermöglicht es Ihnen daher, nicht über die Erstellung statischer Seiten nachzudenken. Durch das direkte Hinzufügen von Änderungen zu einem privaten Repository, sei es durch die Arbeit mit Git von einem beliebigen System aus oder durch das Erstellen einer Datei über die GitHub-Weboberfläche, erledigt Actions alles selbst. Wenn das Skript unerwartet abstürzt, wird eine Benachrichtigung an Ihre E-Mail-Adresse gesendet.

Vollständiger Code

Ich belasse meine Arbeitsversion, in der der letzte Schritt das Senden einer Benachrichtigung hinzufügt, dass ein Commit an das Haupt-Repository übertragen wurde.

Es werden die oben beschriebenen Secrets verwendet, wobei das Bot-Token und die Benutzer-ID, an die die Nachricht gesendet werden soll, hinzugefügt werden.

name: Push content to the user's GitHub pages repository

on:
  push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Set up Python
      uses: actions/setup-python@v1
      with:
        python-version: 3.7
    - name: Install dependencies
      run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt
    - name: Make output folder
      run: mkdir output
    - name: Clone master branch
      run: git clone "https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git" --branch master --single-branch ./output
    - name: Generate static pages
      run: pelican content -o output -s publishconf.py
    - name: Set git config and add changes
      run: |
          git config --global user.email "${GITHUB_ACTOR}@https://users.noreply.github.com/"
          git config --global user.name "${GITHUB_ACTOR}"
          git add --all
      working-directory: ./output
    - name: Push and send notification
      run: |
          COMMIT_MESSAGE="Update pages on $(date +'%Y-%m-%d %H:%M:%S')"
          git diff-index --quiet --cached HEAD -- && echo "No changes!" && exit 0 || echo $COMMIT_MESSAGE
          git commit -m "${COMMIT_MESSAGE}"
          git push https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git master
          curl "https://api.telegram.org/bot${{ secrets.BOT_TOKEN }}/sendMessage?text=$COMMIT_MESSAGE %0ALook at ${GITHUB_ACTOR}.github.io %0ARepository%3A github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io&chat_id=${{ secrets.ADMIN_ID }}"
      working-directory: ./output

Screenshots

GitHub-Aktionen als CI/CD für eine Site auf einem statischen Generator und GitHub-Seiten
Das Ergebnis einer der Ausführungen, die auf der Registerkarte „Aktionen“ des Quell-Repositorys angezeigt wird

GitHub-Aktionen als CI/CD für eine Site auf einem statischen Generator und GitHub-Seiten
Nachricht vom Bot über die Fertigstellung des Skripts

Nützliche Links

Aktionen verstehen
Aktionssyntax
Liste der Auslöser
Optionen für virtuelle Umgebungen
Github-Seiten
Liste der statischen Generatoren

Source: habr.com

Kommentar hinzufügen