GitHub Actions als CI/CD voor een site op een statische generator en GitHub Pages

GitHub Actions als CI/CD voor een site op een statische generator en GitHub Pages

Nadat ik Habr een beetje had doorgenomen, was ik verbaasd dat er maar weinig artikelen zijn gepubliceerd over het onderwerp van de (bèta)functie van GitHub — Acties.

Het lijkt erop dat dergelijke omissies verklaard kunnen worden door het feit dat de functionaliteit nog in de testfase zit, zij het in de ‘bètafase’. Maar het is juist de handige functie van de bètaversie die het mogelijk maakt deze tool in privé-repositories te gebruiken. In dit artikel leg ik uit hoe u met deze technologie kunt werken.

prehistorie

Als we bij het begin beginnen, is het waarschijnlijk de moeite waard om te vermelden dat ik tijdens het zoeken naar een snelle, handige, gemakkelijke en gratis optie voor het opslaan van een persoonlijke website "Over mij" meerdere nachten moest doorbrengen en door veel artikelen moest kammen.

Sommige mensen kiezen voor hosting, anderen kiezen voor een cloudserver en degenen die niet willen begrijpen hoe het allemaal werkt, hoe het samenwerkt en hoe het allemaal betaalt, kiezen voor een oplossing als het uploaden van statische sites naar een repository, wat nu mogelijk is op zowel GitHub als GitLab.

Dit is uiteraard ieders persoonlijke keuze.

Mijn uiteindelijke keuze viel op GitHub Pages.

Over pagina's

Voor degenen die het niet weten, gh-pages — dit is een optie om documentatie op te slaan in de vorm van een website. Deze optie wordt gratis aangeboden. Naast documentatie is het ook mogelijk om persoonlijke websites op te slaan. Deze functionaliteit wordt door GitHub aan alle gebruikers aangeboden en is beschikbaar in de repository-instellingen.

De projectrepository gebruikt een branch gh-pages, voor een gebruikerssite - een aparte opslagplaats met de naam username.github.io met de bronnen van de site in master tak.

U kunt meer details zien bij documentatie, maar ik wil er wel even op wijzen dat GitHub verbazingwekkend genereus is in het toestaan ​​dat iedereen zijn eigen domein aan zo'n site koppelt door simpelweg een bestand toe te voegen CNAME met de domeinnaam en het instellen van de DNS van uw domeinprovider op GitHub-servers.

Ik weet zeker dat er hier al heel wat artikelen te vinden zijn over hoe je zo'n site opzet, dus daar ga ik verder niet op in.

Het ontstaan ​​van het probleem

Het probleem was dat bij gebruik van een statische generator extra scripts geschreven moesten worden en dat er bibliotheken gebruikt moesten worden om het proces van het genereren van pagina's en het uploaden ervan naar de repository te vereenvoudigen. Simpel gezegd, als u de broncode opslaat in een aparte, privé-repository, dan is het elke keer dat er een wijziging op de site wordt aangebracht, noodzakelijk om een ​​lokale omgeving te implementeren voor de volgende generatie van statische pagina's en publicatie in de hoofdrepository van de site.

Er is overvloed statische generatoren en ze hebben allemaal hetzelfde probleem. Deze acties kosten te veel tijd en moeite en zorgen er uiteindelijk voor dat het werk op de site stil komt te liggen, vooral na meerdere migraties van besturingssysteem naar besturingssysteem of incidenten met gegevensverlies op harde schijven. (dat was bij mij het geval).

Onlangs werd in een pop-upmelding op de site of in een nieuwsbrief van GitHub een nieuw ingebouwde CI/CD opgemerkt, waarmee deze acties met minimale inspanning konden worden uitgevoerd.

Over statische paginageneratoren

Ik zal niet specifiek op dit subonderwerp ingaan, maar ik zal een aantal stellingen delen waar ik toe kwam tijdens de selectie en het gebruik ervan:

1) Je moet een generator kiezen voor jouw programmeertaal, of een die het meest begrijpelijk is. Ik kwam op dit idee toen ik nog wat functionaliteiten voor de werking van de site moest afschrijven en ik besloot om de site stabieler en automatiseringsvriendelijker te maken. Bovendien is dit een goede reden om zelf aanvullende functionaliteit te schrijven in de vorm van plugins;

2) Welke generator u kiest, is een persoonlijke keuze, maar het is de moeite waard om te overwegen dat u voor de eerste onderdompeling in de functionaliteit van GitHub Pages eerst een generator moet installeren Jekyll. Gelukkig kunt u hiermee rechtstreeks vanuit de bronnen in de repository een site genereren (Ik zal dit herhalen met mijn keuze).

Mijn keuze voor een generator is gebaseerd op het eerste punt. Pelikaan die in Python is geschreven, verving voor mij gemakkelijk de alien Jekyll (bijna een jaar gebruikt). Hierdoor krijg ik door het schrijven en bewerken van artikelen en het werken aan de site extra ervaring in een taal die ik interessant vind.

__

Formulering van het probleem

De hoofdtaak zal zijn om een ​​script (eigenlijk een configuratiebestand) te schrijven waarmee automatisch statische pagina's uit een privé-repository kunnen worden gegenereerd. De oplossing zal de functionaliteit van een virtuele omgeving omvatten. Het script voegt automatisch gereedgemaakte pagina's toe aan de openbare repository.

Hulpmiddelen voor oplossing

De hulpmiddelen die we gebruiken om het probleem op te lossen:

  • GitHub-acties;
  • Python 3.7;
  • Pelikaan;
  • Git;
  • GitHub-pagina's.

Probleemoplossend

Nadat ik de documentatie een beetje had bestudeerd en had uitgevogeld hoe ik scripts voor acties moest schrijven, werd het duidelijk dat dit mechanisme het probleem dat was ontstaan ​​volledig zou oplossen. Om deze functionaliteit te kunnen gebruiken, moet u zich op het moment van schrijven abonneren voor bètatests!

GitHub Actions als CI/CD voor een site op een statische generator en GitHub Pages
Beschrijving van de nieuwe functionaliteit door Github zelf

Het schrijven van een Actions-script begint met het maken van een benoemd bestand in de map .github en zijn submap workflows. U kunt dit handmatig doen of via de editor op het tabblad Acties op de repositorypagina.

GitHub Actions als CI/CD voor een site op een statische generator en GitHub Pages
Voorbeeld van een leeg scriptformulier

Ik zal kort ingaan op het formulier

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.

Laten we er zelf een schrijven op basis van de sjabloon:

0) De naam kan ook als “CI” blijven staan. Het is een kwestie van smaak.

1) Vervolgens moet u de actie/trigger selecteren die ervoor zorgt dat het script wordt gestart. In ons geval is dit een normale push van een nieuwe commit naar de repository.

on:
  push

2) De afbeelding op basis waarvan het script wordt uitgevoerd, zal ook uit het voorbeeld worden weggelaten, aangezien Ubuntu Het voldoet ruimschoots aan de vereiste functionaliteit. Kijkend naar beschikbare hulpmiddelen Het wordt duidelijk dat dit elke noodzakelijke of gewoon handige afbeelding kan zijn (of een docker-container die daarop is gebaseerd).

  build:
    runs-on: ubuntu-latest

3) In deze stappen richten we eerst de omgeving in ter voorbereiding op de hoofdwerkzaamheden.

3.1) we gaan naar de tak die we nodig hebben (standaardstap) checkout):

- uses: actions/checkout@v1

3.2) Python installeren:

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

3.3) We stellen de afhankelijkheden van onze generator in:

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

3.4) Maak een map waarin de sitepagina's worden gegenereerd:

   - name: Make output folder
      run: mkdir output

4) Om ervoor te zorgen dat het werk op de site consistent is, dat wil zeggen om eerdere wijzigingen niet te verwijderen en om wijzigingen aan de siterepository te kunnen toevoegen zonder conflicten, zal de volgende stap zijn om de siterepository elke keer te 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

In deze stap worden systeemvariabelen aangeroepen:

  • variabel GITHUB_ACTOR GitHub installeert zichzelf en dit is de naam van de gebruiker die dit script heeft laten uitvoeren;
  • variabele secrets.ACCESS_TOKEN dit wordt gegenereerd Github-beheertoken, we kunnen het doorgeven als een omgevingsvariabele door het in te stellen in het tabblad Secrets instellingen van onze repository. Houd er rekening mee dat wanneer u een token genereert, deze eenmalig aan ons wordt verstrekt en dat u er daarna geen toegang meer toe hebt. Evenals de waarden van de geheimen-items.

5) Laten we verder gaan met het genereren van onze pagina's:

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

De parameters die aan de generator worden doorgegeven, zijn verantwoordelijk voor de directory waar de gegenereerde bestanden naartoe worden gestuurd (-o output) en het configuratiebestand dat we gebruiken voor generatie (-s publishconf.py; U kunt meer lezen over de aanpak voor het scheiden van de lokale configuratie en de configuratie voor publicatie in de Pelican-documentatie).

Ik wil u eraan herinneren dat we in onze map hebben output De site repository is al gekloond.

6) Laten we Git instellen en onze gewijzigde bestanden indexeren:

    - 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

Dit punt gebruikt een reeds bekende variabele en specificeert de werkdirectory waarin de opdrachten uit deze stap worden uitgevoerd. De opdracht om naar de werkdirectory te gaan zou er anders zo uitzien: cd output.

7) Genereer een commit-bericht, commit de wijzigingen en push ze naar de repository. Zodat de commit niet voor niets is en dus geen fout in bash oplevert (de uitvoer is niet 0) - Laten we eerst eens kijken of het wel nodig is om iets te committen en te pushen. Om dit te doen gebruiken we het commando git diff-index --quiet --cached HEAD -- die naar de terminal zal worden uitgevoerd 0 als er geen wijzigingen zijn ten opzichte van de vorige versie van de site, en 1 Er zijn zulke veranderingen. Vervolgens verwerken we het resultaat van deze opdracht. Op deze manier registreren we nuttige informatie over de status van de site in dit stadium in de uitvoeringsinformatie van het script, in plaats van dat het script automatisch crasht en ons een rapport stuurt over het crashen van het script.

Deze acties voeren we ook uit in onze directory met kant-en-klare pagina's.

   - 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

Resultaat

Hierdoor hoeft u met zo'n script niet meer na te denken over het maken van statische pagina's. Door wijzigingen rechtstreeks aan een privé-opslagplaats toe te voegen, of dat nu door met Git te werken vanaf een willekeurig systeem is of door een bestand aan te maken via de webinterface van GitHub, doen Acties alles zelf. Als er een onverwachte scriptfout optreedt, wordt er een melding naar uw e-mailadres gestuurd.

Volledige code

Ik laat mijn werkende versie staan, waarin de laatste stap is toegevoegd om een ​​melding te sturen dat de commit naar de hoofdrepository is gepusht.

Er wordt gebruik gemaakt van de hierboven beschreven geheimen, waarbij het bottoken en de gebruikers-ID aan wie het bericht moet worden verzonden, worden toegevoegd.

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

Schermafbeeldingen

GitHub Actions als CI/CD voor een site op een statische generator en GitHub Pages
Het resultaat van een van de uitvoeringen wordt weergegeven op het tabblad Acties van de bronopslagplaats.

GitHub Actions als CI/CD voor een site op een statische generator en GitHub Pages
Bericht van de bot over de voltooiing van het script

Nuttige links

Algemene informatie over Acties
Acties Syntaxis
Lijst met triggers
Opties voor virtuele omgevingen
Github-pagina's
Lijst met statische generatoren

Bron: www.habr.com

Koop betrouwbare hosting voor sites met DDoS-bescherming, VPS VDS-servers 🔥 Koop betrouwbare websitehosting met DDoS-bescherming, VPS- en VDS-servers | ProHoster