Tindakan GitHub sebagai CI/CD untuk Situs Generator Statis dan Halaman GitHub

Tindakan GitHub sebagai CI/CD untuk Situs Generator Statis dan Halaman GitHub

Setelah menjelajahi Habr sedikit, saya terkejut karena sangat sedikit artikel yang diterbitkan mengenai topik fitur GitHub (beta) - Actions.

Tampaknya pernyataan yang meremehkan seperti itu dapat dijelaskan oleh fakta bahwa fungsinya masih dalam pengujian, meskipun “beta”. Namun ini adalah fitur beta yang berguna yang memungkinkan alat ini digunakan di repositori pribadi. Tentang bekerja dengan teknologi inilah yang akan saya bicarakan di artikel ini.

Prasejarah

Jika kita mulai secara berurutan, maka mungkin perlu disebutkan bahwa dalam proses mencari opsi yang cepat, nyaman, mudah dan gratis untuk menyimpan situs web pribadi “Tentang Saya”, saya harus menghabiskan beberapa malam dan menyisir banyak artikel.

Beberapa orang memilih hosting, yang lain memilih server cloud, dan mereka yang tidak ingin memahami pekerjaan, interaksi, dan pembayaran untuk semua ini suka mengunggah situs statis ke repositori, karena sekarang ini dapat dilakukan di GitHub dan GitLab.

Tentu saja ini adalah pilihan pribadi setiap orang.

Pilihan terakhir saya adalah Halaman GitHub.

Tentang Halaman

Siapa yang tidak sadar gh-pages - ini adalah pilihan untuk menyimpan dokumentasi dalam bentuk website dan disediakan secara gratis, dan selain dokumentasi, juga diusulkan untuk menyimpan website pribadi. Fungsionalitas ini disediakan oleh GitHub untuk semua pengguna dan tersedia di pengaturan repositori.

Repositori proyek menggunakan cabang gh-pages, untuk situs pengguna - repositori terpisah dengan nama username.github.io dengan sumber situs di master cabang.

Anda dapat melihat lebih banyak dalam dokumentasi, namun izinkan saya mencatat bahwa GitHub secara mengejutkan sangat murah hati dalam mengizinkan siapa pun menautkan domain mereka sendiri ke situs tersebut hanya dengan menambahkan file CNAME dengan nama domain dan menyiapkan DNS penyedia domain Anda di server GitHub.

Saya yakin ada banyak artikel di sini tentang cara mengembangkan situs seperti itu, jadi ini bukan tentang itu lebih lanjut.

Terjadinya suatu masalah

Masalahnya adalah ketika menggunakan generator statis, ada kebutuhan untuk menulis skrip tambahan dan menggunakan perpustakaan untuk menyederhanakan proses pembuatan halaman dan memuatnya ke dalam repositori. Sederhananya, jika Anda menyimpan sumber dalam repositori pribadi yang terpisah, maka setiap kali ada perubahan apa pun di situs, lingkungan lokal perlu disebarkan untuk pembuatan halaman statis berikutnya dan publikasi di repositori situs utama.

Ada kelimpahan generator statis dan mereka semua mempunyai masalah yang sama. Tindakan ini memakan terlalu banyak waktu dan tenaga, dan pada akhirnya memperlambat pekerjaan di situs, terutama setelah beberapa kali migrasi dari OS ke OS atau insiden kehilangan data pada hard drive (ini adalah kasus dalam kasus saya).

Baru-baru ini, baik dalam pemberitahuan pop-up di situs web atau dalam buletin dari GitHub, CI/CD yang baru dibuat terlihat, yang memungkinkan tindakan ini dilakukan dengan sedikit usaha.

Tentang generator halaman statis

Saya tidak akan memusatkan perhatian khusus pada sub-ayat ini, tetapi saya akan membagikan beberapa tesis yang saya temukan selama pemilihan dan penggunaan berikut ini:

1) pilih generator yang sesuai dengan bahasa pemrograman Anda, atau yang sejelas mungkin. Saya mendapatkan ide ini pada saat saya sendiri harus menambahkan beberapa fungsi agar situs dapat berfungsi, menambahkan kruk untuk stabilitas dan otomatisasi yang lebih baik. Selain itu, ini adalah alasan bagus untuk menulis sendiri fungsionalitas tambahan dalam bentuk plugin;

2) generator mana yang harus dipilih adalah pilihan pribadi, tetapi perlu dipertimbangkan bahwa untuk perendaman awal dalam fungsi Halaman GitHub, Anda harus menginstal terlebih dahulu Jekyll. Untungnya, ini memungkinkan Anda membuat situs web dari sumber langsung di repositori (Saya akan mengulangi ini dengan pilihan saya).

Pilihan generator saya didasarkan pada poin pertama. Pelican yang ditulis dengan Python dengan mudah menggantikan Jekyll, yang asing bagi saya (menggunakannya selama hampir satu tahun). Alhasil, membuat dan mengedit artikel serta mengerjakan website pun memberikan pengalaman tambahan dalam bahasa yang menarik bagi saya.

__

Pernyataan masalah

Tugas utamanya adalah menulis skrip (sebenarnya file konfigurasi) yang secara otomatis akan menghasilkan halaman statis dari repositori pribadi. Solusinya akan melibatkan fungsionalitas lingkungan virtual. Skrip itu sendiri akan menambahkan halaman siap pakai ke repositori publik.

Alat untuk solusi

Alat yang akan kita gunakan untuk menyelesaikan masalah:

  • Tindakan GitHub;
  • Piton 3.7;
  • Pelikan;
  • Git;
  • Halaman GitHub.

Solusinya

Jadi, setelah sedikit membaca dokumentasi dan memahami bagaimana skrip Actions ditulis, menjadi jelas bahwa mekanisme ini akan sepenuhnya menyelesaikan masalah yang muncul. Pada saat penulisan, Anda harus berlangganan untuk menggunakan fungsi ini. untuk pengujian beta!

Tindakan GitHub sebagai CI/CD untuk Situs Generator Statis dan Halaman GitHub
Deskripsi fungsi baru dari Github sendiri

Penulisan skrip Tindakan dimulai dengan membuat file bernama di dalam folder .github dan subfoldernya workflows. Ini dapat dilakukan secara manual atau dari editor di tab Tindakan pada halaman repositori.

Tindakan GitHub sebagai CI/CD untuk Situs Generator Statis dan Halaman GitHub
Contoh formulir skrip kosong

Saya akan mengomentari formulir secara singkat

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.

Mari kita menulis sendiri berdasarkan template:

0) Anda juga dapat meninggalkan nama “CI”. Ini masalah selera.

1) Selanjutnya, Anda perlu memilih tindakan/pemicu yang akan meluncurkan skrip, dalam kasus kami ini adalah dorongan biasa dari komit baru ke repositori.

on:
  push

2) Kami juga akan meninggalkan gambar yang menjadi dasar skrip akan diluncurkan sebagai contoh, karena Ubuntu cukup puas dengan fungsionalitas yang diperlukan. Melihat ke alat yang tersedia menjadi jelas bahwa ini bisa berupa gambar apa pun yang diperlukan atau sekadar nyaman (atau wadah Docker berdasarkan gambar tersebut).

  build:
    runs-on: ubuntu-latest

3) Pada langkah-langkahnya, pertama-tama kita akan menyiapkan lingkungan untuk mempersiapkan pekerjaan utama.

3.1) pergi ke cabang yang kita butuhkan (langkah standar checkout):

- uses: actions/checkout@v1

3.2) instal Python:

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

3.3) instal dependensi generator kami:

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

3.4) buat direktori tempat halaman situs akan dibuat:

   - name: Make output folder
      run: mkdir output

4) Agar pengerjaan situs konsisten yaitu tidak menghapus perubahan sebelumnya dan dapat menambahkan perubahan pada repositori situs tanpa konflik, langkah selanjutnya adalah mengkloning repositori situs setiap kali:

   - 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

Langkah ini memanggil variabel sistem:

  • variabel GITHUB_ACTOR GitHub menginstal sendiri, dan ini adalah nama pengguna yang menyebabkan skrip ini diluncurkan;
  • variabel secrets.ACCESS_TOKEN ini dihasilkan token untuk mengelola Github, kita dapat meneruskannya sebagai variabel lingkungan dengan mengaturnya di tab Secrets pengaturan repositori kami. Harap dicatat bahwa selama pembuatan token akan diberikan kepada kami satu kali, tidak akan ada akses lebih lanjut ke sana. Serta nilai dari item Rahasia.

5) Mari beralih ke pembuatan halaman:

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

Parameter yang diteruskan ke generator bertanggung jawab atas direktori tempat file yang dihasilkan akan dikirim (-o output) dan file konfigurasi yang kita gunakan untuk menghasilkan (-s publishconf.py; Anda dapat membaca tentang pendekatan untuk memisahkan konfigurasi lokal dan konfigurasi untuk publikasi di dokumentasi Pelican).

Izinkan saya mengingatkan Anda apa yang ada di folder kami output Repositori situs telah dikloning.

6) Mari siapkan git dan indeks file yang diubah:

    - 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

Pada titik ini, variabel yang sudah diketahui digunakan dan direktori kerja ditunjukkan di mana perintah dari langkah ini akan diluncurkan. Perintah untuk pergi ke direktori kerja akan terlihat seperti - cd output.

7) Mari buat pesan komit, komit perubahan, dan masukkan ke dalam repositori. Agar komitnya tidak sia-sia sehingga tidak menghasilkan error pada bash (hasil keluarannya tidak 0) — pertama, mari kita periksa apakah perlu melakukan dan mendorong sesuatu. Untuk melakukan ini kami menggunakan perintah git diff-index --quiet --cached HEAD -- yang akan dikeluarkan ke terminal 0 jika tidak ada perubahan dibandingkan versi situs sebelumnya, dan 1 ada perubahan seperti itu. Kemudian kami memproses hasil dari perintah ini. Jadi, dalam informasi tentang eksekusi skrip, kami akan mencatat informasi berguna tentang keadaan situs pada tahap ini, alih-alih mogok secara otomatis dan mengirimkan laporan kepada kami tentang kerusakan skrip.

Kami juga melakukan tindakan ini di direktori kami dengan halaman yang sudah jadi.

   - 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

Hasil

Hasilnya, skrip seperti itu memungkinkan Anda untuk tidak berpikir untuk membuat halaman statis. Dengan menambahkan perubahan secara langsung ke repositori pribadi, baik dengan bekerja dengan git dari sistem apa pun atau membuat file melalui antarmuka web GitHub, Actions akan melakukan semuanya sendiri. Jika skrip mogok secara tidak terduga, pemberitahuan akan dikirimkan ke email Anda.

Kode lengkap

Saya akan meninggalkan versi kerja saya, di mana langkah terakhir menambahkan pengiriman pemberitahuan bahwa komit telah dimasukkan ke repositori utama.

Rahasia yang dijelaskan di atas digunakan, di mana token bot dan ID pengguna yang ingin dikirimi pesan ditambahkan.

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

Layar

Tindakan GitHub sebagai CI/CD untuk Situs Generator Statis dan Halaman GitHub
Hasil dari salah satu proses ditampilkan di tab Tindakan pada repositori sumber

Tindakan GitHub sebagai CI/CD untuk Situs Generator Statis dan Halaman GitHub
Pesan dari bot tentang penyelesaian skrip

Berguna Link

Memahami Tindakan
Sintaks tindakan
Daftar pemicu
Pilihan untuk lingkungan virtual
Halaman Github
Daftar Generator Statis

Sumber: www.habr.com

Tambah komentar