GitHub Actions bilang CI/CD para sa isang site sa isang static generator at GitHub Pages

GitHub Actions bilang CI/CD para sa isang site sa isang static generator at GitHub Pages

Sa pag-usisa ng kaunti kay Habr, nagulat ako na kakaunti ang mga artikulo na nai-publish sa paksa ng tampok na GitHub (beta) - Mga Pagkilos.

Tila ang gayong pagmamaliit ay maaaring ipaliwanag sa pamamagitan ng katotohanan na ang pag-andar ay nasa pagsubok pa rin, kahit na "beta". Ngunit ito ay isang kapaki-pakinabang na tampok ng beta na nagpapahintulot sa tool na ito na magamit sa mga pribadong repositoryo. Ito ay tungkol sa pagtatrabaho sa teknolohiyang ito na tatalakayin ko sa artikulong ito.

Prehistory

Kung magsisimula tayo sa pagkakasunud-sunod, kung gayon marahil ay nagkakahalaga ng pagbanggit na sa proseso ng paghahanap ng isang mabilis, maginhawa, madali at libreng pagpipilian para sa pag-iimbak ng isang personal na website na "Tungkol sa Akin", kailangan kong gumugol ng ilang gabi at magsuklay ng maraming mga artikulo.

Pinipili ng ilang tao ang pagho-host, ang iba ay isang cloud server, at ang mga taong ayaw na maunawaan ang trabaho, pakikipag-ugnayan at pagbabayad para sa lahat ng ito tulad ng pag-upload ng mga static na site sa isang repositoryo, dahil maaari na itong gawin sa parehong GitHub at GitLab .

Siyempre, ito ay personal na pagpipilian ng lahat.

Ang aking huling pagpipilian ay ang GitHub Pages.

Tungkol sa Mga Pahina

Sino ang hindi nakakaalam gh-pages - ito ay isang opsyon para sa pag-iimbak ng dokumentasyon sa anyo ng isang website at ito ay ibinibigay nang walang bayad, at bilang karagdagan sa dokumentasyon, iminungkahi din na mag-imbak ng mga personal na website. Ang functionality na ito ay ibinibigay ng GitHub sa lahat ng user at available sa mga setting ng repository.

Ang imbakan ng proyekto ay gumagamit ng isang sangay gh-pages, para sa isang user site - isang hiwalay na repository na may pangalan username.github.io na may mga mapagkukunan ng site sa master sangay.

Maaari mong makita ang higit pang mga detalye sa dokumentasyon, ngunit hayaan ko lang na tandaan na ang GitHub ay nakakagulat na mapagbigay sa pagpapahintulot sa sinuman na i-link ang kanilang sariling domain sa naturang site sa pamamagitan lamang ng pagdaragdag ng isang file CNAME gamit ang domain name at pagse-set up ng DNS ng iyong domain provider sa mga GitHub server.

Sigurado ako na maraming mga artikulo dito kung paano bumuo ng isang site, kaya hindi iyon ang pag-uusapan ko pa.

Ang paglitaw ng isang problema

Ang problema ay kapag gumagamit ng isang static generator, mayroong pangangailangan na magsulat ng mga karagdagang script at gumamit ng mga aklatan upang pasimplehin ang proseso ng pagbuo ng mga pahina at pag-load ng mga ito sa repositoryo. Sa madaling salita, kung iimbak mo ang mga mapagkukunan sa isang hiwalay na pribadong imbakan, pagkatapos ay sa tuwing may anumang pagbabago sa site, kinakailangan na i-deploy ang lokal na kapaligiran para sa kasunod na henerasyon ng mga static na pahina at publikasyon sa pangunahing imbakan ng site.

May kasaganaan mga static na generator at lahat sila ay may parehong problema. Ang mga pagkilos na ito ay tumatagal ng masyadong maraming oras at pagsisikap, at sa huli ay nagpapabagal sa trabaho sa site, lalo na pagkatapos ng ilang paglipat mula sa OS patungo sa OS o mga insidente na may pagkawala ng data sa mga hard drive (ito ang kaso sa aking kaso).

Kamakailan lamang, alinman sa isang pop-up na notification sa website o sa isang newsletter mula sa GitHub, napansin ang isang bagong gawang CI/CD, na nagpapahintulot sa mga pagkilos na ito na maisagawa nang may kaunting pagsisikap.

Tungkol sa mga static na page generator

Hindi ako magtutuon ng espesyal na atensyon sa sub-item na ito, ngunit ibabahagi ko ang ilang mga tesis na napuntahan ko sa pagpili at paggamit ng mga sumusunod:

1) pumili ng generator na nababagay sa iyong programming language, o isa na malinaw hangga't maaari. Dumating ako sa ideyang ito sa panahon na kailangan kong magdagdag ng ilang functionality para gumana ang site, magdagdag ng mga saklay para sa higit na katatagan at automation nito. Bilang karagdagan, ito ay isang magandang dahilan upang magsulat ng karagdagang pag-andar sa iyong sarili sa anyo ng mga plugin;

2) kung aling generator ang pipiliin ay isang personal na pagpipilian, ngunit ito ay nagkakahalaga ng pagsasaalang-alang na para sa paunang pagsasawsaw sa gawain ng pag-andar ng GitHub Pages, kailangan mo munang i-install Jekyll. Sa kabutihang palad, pinapayagan ka nitong bumuo ng isang website mula sa mga mapagkukunan nang direkta sa repositoryo (Uulitin ko ito sa aking pinili).

Ang aking pagpili ng generator ay batay sa unang punto. Pelikano na nakasulat sa Python ay madaling pinalitan si Jekyll, na banyaga sa akin (ginamit ito ng halos isang taon). Bilang resulta, kahit na ang paglikha at pag-edit ng mga artikulo at paggawa sa isang website ay nagbibigay ng karagdagang karanasan sa isang wika na kawili-wili sa akin.

__

Pahayag ng problema

Ang pangunahing gawain ay ang magsulat ng isang script (talagang isang configuration file) na awtomatikong bubuo ng mga static na pahina mula sa isang pribadong repository. Kasama sa solusyon ang functionality ng isang virtual na kapaligiran. Ang script mismo ay magdaragdag ng mga handa na pahina sa pampublikong imbakan.

Mga tool para sa solusyon

Mga tool na gagamitin namin upang malutas ang problema:

  • Mga Pagkilos sa GitHub;
  • Python3.7;
  • Pelican;
  • Git;
  • Mga Pahina sa GitHub.

Ang solusyon

Kaya, pagkatapos makilala ng kaunti ang dokumentasyon at maunawaan kung paano isinulat ang mga script para sa Mga Aksyon, naging malinaw na ang mekanismong ito ay ganap na malulutas ang problema na lumitaw. Sa oras ng pagsulat, dapat kang mag-subscribe upang magamit ang pagpapaandar na ito. para sa beta testing!

GitHub Actions bilang CI/CD para sa isang site sa isang static generator at GitHub Pages
Paglalarawan ng bagong functionality ng Github mismo

Ang pagsulat ng script ng Actions ay nagsisimula sa pamamagitan ng paggawa ng pinangalanang file sa isang folder .github at ang subfolder nito workflows. Maaari itong gawin nang manu-mano o mula sa editor sa tab na Mga Pagkilos sa pahina ng repositoryo.

GitHub Actions bilang CI/CD para sa isang site sa isang static generator at GitHub Pages
Halimbawa ng blangkong script form

Magkokomento ako saglit sa form

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.

Isulat natin ang sarili natin batay sa template:

0) Maaari mo ring iwanan ang pangalang "CI". Ito ay isang bagay ng panlasa.

1) Susunod, kailangan mong piliin ang aksyon/trigger na maglulunsad ng script, sa aming kaso ito ang karaniwang push ng isang bagong commit sa repository.

on:
  push

2) Iiwan din namin ang imahe sa batayan kung saan ilulunsad ang script bilang isang halimbawa, dahil medyo nasiyahan ang Ubuntu sa kinakailangang pag-andar. nakatingin sa magagamit na mga tool nagiging malinaw na maaari itong maging anumang kinakailangan o simpleng maginhawang imahe (o isang lalagyan ng Docker batay dito).

  build:
    runs-on: ubuntu-latest

3) Sa mga hakbang, ise-set up muna natin ang kapaligiran upang maghanda para sa pangunahing gawain.

3.1) pumunta sa sangay na kailangan namin (karaniwang hakbang checkout):

- uses: actions/checkout@v1

3.2) i-install ang Python:

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

3.3) i-install ang mga dependencies ng aming generator:

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

3.4) lumikha ng isang direktoryo kung saan bubuo ang mga pahina ng site:

   - name: Make output folder
      run: mkdir output

4) Upang maging pare-pareho ang trabaho sa site, ibig sabihin, hindi tanggalin ang mga nakaraang pagbabago at makapagdagdag ng mga pagbabago sa repository ng site nang walang mga salungatan, ang susunod na hakbang ay ang pag-clone ng site repository sa bawat oras:

   - 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

Ang hakbang na ito ay tumatawag sa mga variable ng system:

  • variable GITHUB_ACTOR Ini-install mismo ng GitHub, at ito ang username kung saan kasalanan ang script na ito ay inilunsad;
  • variable secrets.ACCESS_TOKEN ito ay nabuo token para sa pamamahala ng Github, maaari nating ipasa ito bilang variable ng kapaligiran sa pamamagitan ng pagtatakda nito sa tab Secrets aming mga setting ng imbakan. Pakitandaan na sa panahon ng henerasyon ang token ay ibibigay sa amin ng isang beses, wala nang karagdagang access dito. Pati na rin ang mga halaga ng mga item ng Secrets.

5) Magpatuloy tayo sa pagbuo ng ating mga pahina:

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

Ang mga parameter na ipinasa sa generator ay responsable para sa direktoryo kung saan ipapadala ang mga nabuong file (-o output) at ang configuration file na ginagamit namin upang bumuo (-s publishconf.py; Maaari mong basahin ang tungkol sa diskarte sa paghihiwalay ng lokal na config at ang config para sa publikasyon sa dokumentasyon ng Pelican).

Hayaan mong ipaalala ko sa iyo kung ano ang nasa aming folder output Na-clone na ang site repository.

6) I-set up natin ang git at i-index ang ating mga binagong file:

    - 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

Sa puntong ito, isang kilalang variable na ang ginagamit at ang gumaganang direktoryo ay ipinahiwatig kung saan ilulunsad ang mga utos mula sa hakbang na ito. Ang utos na pumunta sa gumaganang direktoryo ay magmumukhang - cd output.

7) Bumuo tayo ng commit message, i-commit ang mga pagbabago at itulak ang mga ito sa repository. Upang ang commit ay hindi walang kabuluhan at samakatuwid ay hindi makagawa ng isang error sa bash (ang resulta ng output ay hindi 0) β€” una, suriin natin kung kinakailangan na gumawa at itulak ang isang bagay. Upang gawin ito, ginagamit namin ang utos git diff-index --quiet --cached HEAD -- na maglalabas sa terminal 0 kung walang mga pagbabago na nauugnay sa nakaraang bersyon ng site, at 1 may mga ganitong pagbabago. Pagkatapos ay pinoproseso namin ang resulta ng utos na ito. Kaya, sa impormasyon tungkol sa pagpapatupad ng script, magtatala kami ng kapaki-pakinabang na impormasyon tungkol sa estado ng site sa yugtong ito, sa halip na awtomatikong mag-crash at magpadala sa amin ng ulat tungkol sa pag-crash ng script.

Isinasagawa din namin ang mga pagkilos na ito sa aming direktoryo gamit ang mga yari na pahina.

   - 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

Resulta

Bilang resulta, binibigyang-daan ka ng naturang script na huwag isipin ang paglikha ng mga static na pahina. Sa pamamagitan ng pagdaragdag ng mga pagbabago nang direkta sa isang pribadong repositoryo, sa pamamagitan man ng pagtatrabaho sa git mula sa ilalim ng anumang system o paglikha ng file sa pamamagitan ng GitHub web interface, gagawin mismo ng Actions ang lahat. Kung ang script ay nag-crash nang hindi inaasahan, isang abiso ang ipapadala sa iyong email.

Buong code

Iiwan ko ang aking gumaganang bersyon, kung saan ang huling hakbang ay nagdaragdag ng pagpapadala ng isang abiso na ang isang commit ay nai-push sa pangunahing repositoryo.

Ginagamit ang inilarawan sa itaas na Mga Lihim, kung saan idinaragdag ang bot token at ang user ID kung kanino kailangang ipadala ang mensahe.

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

Screenshot

GitHub Actions bilang CI/CD para sa isang site sa isang static generator at GitHub Pages
Ang resulta ng isa sa mga pagpapatakbo na ipinapakita sa tab na Mga Pagkilos ng source na repository

GitHub Actions bilang CI/CD para sa isang site sa isang static generator at GitHub Pages
Mensahe mula sa bot tungkol sa pagkumpleto ng script

Kapaki-pakinabang na mga link

Pag-unawa sa Mga Aksyon
Syntax ng mga aksyon
Listahan ng mga nag-trigger
Mga pagpipilian para sa mga virtual na kapaligiran
Mga Pahina ng Github
Listahan ng Static Generator

Pinagmulan: www.habr.com

Magdagdag ng komento