การดำเนินการ GitHub เป็น CI/CD สำหรับไซต์บนตัวสร้างแบบคงที่และหน้า GitHub

การดำเนินการ GitHub เป็น CI/CD สำหรับไซต์บนตัวสร้างแบบคงที่และหน้า GitHub

หลังจากสำรวจ Habr เล็กน้อย ฉันรู้สึกประหลาดใจที่มีบทความเพียงไม่กี่บทความที่ได้รับการตีพิมพ์ในหัวข้อฟีเจอร์ของ GitHub (เบต้า) - การดำเนินการ

ดูเหมือนว่าการพูดเกินจริงดังกล่าวสามารถอธิบายได้ด้วยข้อเท็จจริงที่ว่าฟังก์ชันนี้ยังอยู่ในการทดสอบแม้ว่าจะเป็น "เบต้า" ก็ตาม แต่เป็นคุณลักษณะที่มีประโยชน์ของเบต้าที่ช่วยให้สามารถใช้เครื่องมือนี้ในพื้นที่เก็บข้อมูลส่วนตัวได้ เกี่ยวกับการทำงานกับเทคโนโลยีนี้ที่ฉันจะพูดถึงในบทความนี้

ประวัติศาสตร์

หากเราเริ่มต้นตามลำดับ ก็อาจคุ้มค่าที่จะกล่าวถึงว่าในกระบวนการค้นหาตัวเลือกที่รวดเร็ว สะดวก ง่ายและฟรีสำหรับการจัดเก็บเว็บไซต์ "เกี่ยวกับฉัน" ส่วนตัว ฉันต้องใช้เวลาหลายคืนและค้นหาบทความมากมาย

บางคนเลือกโฮสติ้ง บางคนเลือกเซิร์ฟเวอร์คลาวด์ และผู้ที่ไม่ต้องการเข้าใจงาน การโต้ตอบ และการชำระเงินสำหรับทั้งหมดนี้ เช่น การอัปโหลดไซต์แบบคงที่ไปยังพื้นที่เก็บข้อมูล เนื่องจากตอนนี้สามารถทำได้ทั้งบน GitHub และ GitLab

แน่นอนว่านี่เป็นทางเลือกส่วนตัวของทุกคน

ตัวเลือกสุดท้ายของฉันคือ GitHub Pages

เกี่ยวกับเพจ

ใครไม่รู้ gh-pages - นี่คือตัวเลือกสำหรับการจัดเก็บเอกสารในรูปแบบของเว็บไซต์และให้บริการฟรีและนอกเหนือจากเอกสารแล้วยังเสนอให้จัดเก็บเว็บไซต์ส่วนตัวด้วย GitHub มอบฟังก์ชันการทำงานนี้ให้กับผู้ใช้ทุกคนและพร้อมใช้งานในการตั้งค่าพื้นที่เก็บข้อมูล

ที่เก็บโปรเจ็กต์ใช้สาขา gh-pagesสำหรับไซต์ผู้ใช้ - พื้นที่เก็บข้อมูลแยกต่างหากพร้อมชื่อ username.github.io โดยมีแหล่งที่มาของเว็บไซต์อยู่ใน master สาขา.

สามารถดูรายละเอียดเพิ่มเติมได้ ในเอกสารแต่ให้ฉันทราบว่า GitHub มีความเอื้อเฟื้อเผื่อแผ่อย่างน่าประหลาดใจในการอนุญาตให้ทุกคนเชื่อมโยงโดเมนของตนเองกับไซต์ดังกล่าวโดยเพียงแค่เพิ่มไฟล์ CNAME ด้วยชื่อโดเมนและการตั้งค่า DNS ของผู้ให้บริการโดเมนของคุณบนเซิร์ฟเวอร์ GitHub

ฉันมั่นใจว่ามีบทความมากมายเกี่ยวกับวิธีพัฒนาเว็บไซต์ดังกล่าว ดังนั้นนั่นจะไม่ใช่สิ่งที่ฉันจะพูดถึงเพิ่มเติม

เกิดปัญหา

ปัญหาคือเมื่อใช้ตัวสร้างคงที่ จำเป็นต้องเขียนสคริปต์เพิ่มเติม และใช้ไลบรารีเพื่อลดความซับซ้อนของกระบวนการสร้างเพจและโหลดลงในที่เก็บ กล่าวง่ายๆ หากคุณจัดเก็บแหล่งที่มาในพื้นที่เก็บข้อมูลส่วนตัวแยกต่างหาก ทุกครั้งที่มีการเปลี่ยนแปลงใดๆ บนไซต์ ก็จำเป็นต้องปรับใช้สภาพแวดล้อมท้องถิ่นสำหรับเพจแบบคงที่และการเผยแพร่รุ่นต่อๆ ไปในพื้นที่เก็บข้อมูลของไซต์หลัก

มีความอุดมสมบูรณ์ เครื่องกำเนิดไฟฟ้าแบบคงที่ และพวกเขาทั้งหมดก็มีปัญหาเดียวกัน การดำเนินการเหล่านี้ใช้เวลาและความพยายามมากเกินไป และทำให้การทำงานบนไซต์ช้าลงในที่สุด โดยเฉพาะอย่างยิ่งหลังจากการโยกย้ายหลายครั้งจาก OS ไปยัง OS หรือเหตุการณ์ข้อมูลสูญหายบนฮาร์ดไดรฟ์ (นี่เป็นกรณีของฉัน).

เมื่อเร็วๆ นี้ ไม่ว่าจะในการแจ้งเตือนแบบป๊อปอัปบนเว็บไซต์หรือในจดหมายข่าวจาก GitHub ก็พบว่า CI/CD ที่สร้างขึ้นใหม่ถูกสังเกตเห็น ซึ่งทำให้การดำเนินการเหล่านี้ดำเนินการได้โดยใช้ความพยายามเพียงเล็กน้อย

เกี่ยวกับตัวสร้างเพจแบบคงที่

ฉันจะไม่เน้นความสนใจเป็นพิเศษไปที่รายการย่อยนี้ แต่ฉันจะแบ่งปันวิทยานิพนธ์สองสามข้อที่ฉันพบระหว่างการเลือกและการใช้งานสิ่งต่อไปนี้:

1) เลือกตัวสร้างที่เหมาะกับภาษาการเขียนโปรแกรมของคุณหรือตัวสร้างที่ชัดเจนที่สุด ฉันมาถึงแนวคิดนี้ในเวลาที่ฉันเองต้องเพิ่มฟังก์ชันการทำงานบางอย่างเพื่อให้ไซต์ใช้งานได้ เพิ่มไม้ค้ำเพื่อความเสถียรและระบบอัตโนมัติที่มากขึ้น นอกจากนี้นี่เป็นเหตุผลที่ดีในการเขียนฟังก์ชันเพิ่มเติมด้วยตนเองในรูปแบบของปลั๊กอิน

2) ตัวสร้างใดให้เลือกเป็นตัวเลือกส่วนบุคคล แต่ก็คุ้มค่าที่จะพิจารณาว่าสำหรับการแช่ครั้งแรกในการทำงานของฟังก์ชัน GitHub Pages คุณต้องติดตั้งก่อน Jekyll. โชคดีที่ช่วยให้คุณสร้างเว็บไซต์จากแหล่งที่มาในพื้นที่เก็บข้อมูลได้โดยตรง (ฉันจะทำซ้ำสิ่งนี้ตามตัวเลือกของฉัน).

ตัวเลือกตัวสร้างของฉันขึ้นอยู่กับจุดแรก นกกระทุง ซึ่งเขียนด้วย Python แทนที่ Jekyll ได้อย่างง่ายดายซึ่งต่างจากฉัน (ใช้มาเกือบปีแล้ว). เป็นผลให้แม้แต่การสร้างและแก้ไขบทความและการทำงานบนเว็บไซต์ก็มอบประสบการณ์เพิ่มเติมในภาษาที่น่าสนใจสำหรับฉัน

__

คำแถลงปัญหา

งานหลักคือการเขียนสคริปต์ (จริงๆ แล้วเป็นไฟล์กำหนดค่า) ซึ่งจะสร้างเพจแบบคงที่โดยอัตโนมัติจากพื้นที่เก็บข้อมูลส่วนตัว โซลูชันจะเกี่ยวข้องกับฟังก์ชันการทำงานของสภาพแวดล้อมเสมือน สคริปต์จะเพิ่มเพจสำเร็จรูปลงในพื้นที่เก็บข้อมูลสาธารณะ

เครื่องมือสำหรับการแก้ปัญหา

เครื่องมือที่เราจะใช้ในการแก้ปัญหา:

  • การกระทำ GitHub;
  • ไพธอน 3.7;
  • นกกระทุง;
  • คอมไพล์;
  • หน้า GitHub

วิธีการแก้ปัญหา

ดังนั้นหลังจากทำความคุ้นเคยกับเอกสารประกอบเล็กน้อยและทำความเข้าใจวิธีการเขียนสคริปต์สำหรับ Actions ก็ชัดเจนว่ากลไกนี้จะแก้ปัญหาที่เกิดขึ้นได้อย่างสมบูรณ์ ในขณะที่เขียน คุณต้องสมัครสมาชิกเพื่อใช้ฟังก์ชันนี้ สำหรับการทดสอบเบต้า!

การดำเนินการ GitHub เป็น CI/CD สำหรับไซต์บนตัวสร้างแบบคงที่และหน้า GitHub
คำอธิบายของฟังก์ชันใหม่โดย Github เอง

การเขียนสคริปต์ Actions เริ่มต้นโดยการสร้างไฟล์ที่มีชื่อในโฟลเดอร์ .github และโฟลเดอร์ย่อยของมัน workflows. ซึ่งสามารถทำได้ด้วยตนเองหรือจากเอดิเตอร์ในแท็บการดำเนินการบนเพจที่เก็บ

การดำเนินการ GitHub เป็น CI/CD สำหรับไซต์บนตัวสร้างแบบคงที่และหน้า GitHub
ตัวอย่างแบบฟอร์มสคริปต์เปล่า

ฉันจะแสดงความคิดเห็นสั้น ๆ เกี่ยวกับแบบฟอร์ม

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.

มาเขียนของเราเองตามเทมเพลต:

0) คุณสามารถทิ้งชื่อ "CI" ไว้ได้ มันเป็นเรื่องของรสนิยม

1) ถัดไป คุณต้องเลือกการดำเนินการ/ทริกเกอร์ที่จะเปิดตัวสคริปต์ ในกรณีของเรา นี่เป็นการพุชการคอมมิตใหม่ไปยังพื้นที่เก็บข้อมูลตามปกติ

on:
  push

2) เราจะทิ้งรูปภาพไว้ตามตัวอย่างที่จะเปิดตัวสคริปต์เนื่องจาก Ubuntu ค่อนข้างพอใจกับฟังก์ชันการทำงานที่จำเป็น มองไปที่ เครื่องมือที่มีอยู่ เห็นได้ชัดว่านี่อาจเป็นอิมเมจที่จำเป็นหรือสะดวก (หรือคอนเทนเนอร์ Docker ที่ใช้มัน)

  build:
    runs-on: ubuntu-latest

3) ในขั้นตอนแรกเราจะจัดสภาพแวดล้อมเพื่อเตรียมพร้อมสำหรับงานหลัก

3.1) ไปที่สาขาที่เราต้องการ (ขั้นตอนมาตรฐาน checkout):

- uses: actions/checkout@v1

3.2) ติดตั้ง Python:

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

3.3) ติดตั้งการพึ่งพาของเครื่องกำเนิดของเรา:

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

3.4) สร้างไดเร็กทอรีที่จะสร้างหน้าไซต์:

   - name: Make output folder
      run: mkdir output

4) เพื่อให้งานบนไซต์มีความสอดคล้อง กล่าวคือ ไม่ลบการเปลี่ยนแปลงก่อนหน้านี้ และเพื่อให้สามารถเพิ่มการเปลี่ยนแปลงไปยังที่เก็บของไซต์ได้โดยไม่มีข้อขัดแย้ง ขั้นตอนต่อไปคือการโคลนที่เก็บของไซต์ในแต่ละครั้ง:

   - 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

ขั้นตอนนี้เรียกตัวแปรระบบ:

  • ตัวแปร GITHUB_ACTOR GitHub ติดตั้งตัวเอง และนี่คือชื่อผู้ใช้ที่มีข้อผิดพลาดในการเรียกใช้สคริปต์นี้
  • ตัวแปร secrets.ACCESS_TOKEN สิ่งนี้ถูกสร้างขึ้น โทเค็นสำหรับจัดการ Githubเราสามารถส่งผ่านมันเป็นตัวแปรสภาพแวดล้อมได้โดยการตั้งค่าในแท็บ Secrets การตั้งค่าพื้นที่เก็บข้อมูลของเรา โปรดทราบว่าระหว่างการสร้าง โทเค็นจะถูกมอบให้เราเพียงครั้งเดียว จะไม่มีการเข้าถึงอีกต่อไป รวมไปถึงคุณค่าของไอเทม Secrets

5) เรามาสร้างเพจของเรากันดีกว่า:

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

พารามิเตอร์ที่ส่งผ่านไปยังตัวสร้างจะรับผิดชอบไดเร็กทอรีที่ไฟล์ที่สร้างขึ้นจะถูกส่ง (-o output) และไฟล์การกำหนดค่าที่เราใช้ในการสร้าง (-s publishconf.py; คุณสามารถอ่านเกี่ยวกับวิธีการแยกการกำหนดค่าในเครื่องและการกำหนดค่าสำหรับการเผยแพร่ได้ในเอกสารประกอบของ Pelican).

ฉันขอเตือนคุณว่ามีอะไรอยู่ในโฟลเดอร์ของเรา output พื้นที่เก็บข้อมูลของไซต์ถูกโคลนแล้ว

6) มาตั้งค่าคอมไพล์และจัดทำดัชนีไฟล์ที่เราเปลี่ยนแปลง:

    - 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

ณ จุดนี้ จะมีการใช้ตัวแปรที่รู้จักอยู่แล้ว และไดเร็กทอรีการทำงานจะถูกระบุซึ่งคำสั่งจากขั้นตอนนี้จะถูกเรียกใช้ คำสั่งเพื่อไปที่ไดเร็กทอรีการทำงานจะมีลักษณะดังนี้ - cd output.

7) มาสร้างข้อความการคอมมิต คอมมิตการเปลี่ยนแปลง และพุชมันเข้าไปในที่เก็บ เพื่อให้การคอมมิตไม่ไร้ประโยชน์ดังนั้นจึงไม่สร้างข้อผิดพลาดในการทุบตี (ผลลัพธ์ที่ได้ไม่เป็นเช่นนั้น 0) — ก่อนอื่น เรามาตรวจสอบว่าจำเป็นต้อง Commit และ Push บางอย่างหรือไม่ ในการทำเช่นนี้เราใช้คำสั่ง git diff-index --quiet --cached HEAD -- ซึ่งจะส่งออกไปยังเทอร์มินัล 0 หากไม่มีการเปลี่ยนแปลงที่เกี่ยวข้องกับเวอร์ชันก่อนหน้าของไซต์ และ 1 มีการเปลี่ยนแปลงดังกล่าว จากนั้นเราประมวลผลผลลัพธ์ของคำสั่งนี้ ดังนั้น ในข้อมูลเกี่ยวกับการทำงานของสคริปต์ เราจะบันทึกข้อมูลที่เป็นประโยชน์เกี่ยวกับสถานะของไซต์ในขั้นตอนนี้ แทนที่จะหยุดทำงานโดยอัตโนมัติและส่งรายงานเกี่ยวกับข้อผิดพลาดของสคริปต์ถึงเรา

นอกจากนี้เรายังดำเนินการเหล่านี้ในไดเร็กทอรีของเราด้วยหน้าเว็บสำเร็จรูป

   - 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

ผล

ด้วยเหตุนี้สคริปต์ดังกล่าวจึงช่วยให้คุณไม่ต้องคิดที่จะสร้างเพจแบบคงที่ ด้วยการเพิ่มการเปลี่ยนแปลงโดยตรงไปยังพื้นที่เก็บข้อมูลส่วนตัว ไม่ว่าจะโดยการทำงานกับคอมไพล์จากภายใต้ระบบใดๆ หรือการสร้างไฟล์ผ่านเว็บอินเตอร์เฟส GitHub การดำเนินการจะทำทุกอย่างด้วยตัวเอง หากสคริปต์ขัดข้องโดยไม่คาดคิด การแจ้งเตือนจะถูกส่งไปยังอีเมลของคุณ

รหัสเต็ม

ฉันจะออกจากเวอร์ชันการทำงานของฉัน ซึ่งในขั้นตอนสุดท้ายจะเพิ่มการส่งการแจ้งเตือนว่าการคอมมิตได้ถูกส่งไปยังที่เก็บหลักแล้ว

ข้อมูลลับที่อธิบายไว้ข้างต้นถูกใช้ โดยที่โทเค็นบอทและ ID ผู้ใช้ที่ต้องการส่งข้อความไปจะถูกเพิ่มเข้าไป

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

จอ

การดำเนินการ GitHub เป็น CI/CD สำหรับไซต์บนตัวสร้างแบบคงที่และหน้า GitHub
ผลลัพธ์ของการรันรายการใดรายการหนึ่งที่แสดงในแท็บการดำเนินการของที่เก็บต้นทาง

การดำเนินการ GitHub เป็น CI/CD สำหรับไซต์บนตัวสร้างแบบคงที่และหน้า GitHub
ข้อความจากบอทเกี่ยวกับการเสร็จสิ้นสคริปต์

ลิงค์ที่มีประโยชน์

ทำความเข้าใจกับการกระทำ
ไวยากรณ์การดำเนินการ
รายการทริกเกอร์
ตัวเลือกสำหรับสภาพแวดล้อมเสมือน
หน้า Github
รายการเครื่องกำเนิดไฟฟ้าแบบคงที่

ที่มา: will.com

เพิ่มความคิดเห็น