เผยแพร่ข้อมูล Event ของ GitHub ด้วย Actions & Pages: คู่มือขั้นตอน

ทีมที่ทำงานบน GitHub ใช้ Event Data (Issues, PRs, Comments) เพื่อทำงานร่วมกัน — ข้อมูลเหล่านี้สำคัญต่อการเข้าใจโปรเจกต์

ด้วย GitHub Actions (GA) ที่ GA แล้ว เราสามารถเข้าถึงและเก็บรักษา Event Data ไว้ใน Repo เองได้โดยอัตโนมัติ — ทำให้ข้อมูลอยู่เหนือ GitHub และนำมาแสดงบนเว็บไซต์ผ่าน GitHub Pages ได้

เช่นกัน ผมทำให้ GitHub Issue Comments กลายเป็น Guestbook แบบยุค 90s!

หลักการเดียวกันใช้ได้ทุก Use Case: ใช้ Actions เข้าถึง, เก็บรักษา, แสดง Event Data — ด้วย Workflow File เพียง 1 ไฟล์

เข้าถึง GitHub Event Data

Workflow Run มี Environment Variables เริ่มต้น — ข้อมูลสำคัญอยู่ใน $GITHUB_EVENT_PATH (Path ไปยัง JSON Event Payload)

Path: /home/runner/work/_temp/_github_workflow/event.json — โครงสร้างตรงกับ Webhook Event (ดูใน GitHub REST API Event Types)

Parse JSON ด้วย jq ใส่ Environment Variable:

ID="$(jq '.comment.id' $GITHUB_EVENT_PATH)"

หรือใช้ github.event Context Variable (ไม่ต้อง Parse JSON):

ID=${{ github.event.comment.id }}

สำหรับ Guestbook ต้องการ Author, Date/Time:

AUTHOR=${{ github.event.comment.user.login }}
DATE=${{ github.event.comment.created_at }}

Shell Variables เป็น Ephemeral (หายเมื่อ Job จบ) — ต้อง Persist ด้วย 2 วิธี: Artifacts หรือ Commit กลับ Repo

เก็บรักษาด้วย Artifacts

Artifacts เก็บข้อมูลระหว่าง Jobs ใน Workflow เดียวกัน (ไม่ Commit กลับ Repo)

Actions: upload-artifact, download-artifact — ไฟล์เก็บเป็น .zip

Job ใหม่ใน Workflow เดียวกัน Download Artifact มาใช้ต่อได้ — หรือ Download Manual จาก Actions Tab

Particular Use Case: Pass data between jobs, Archive test outputs — สำหรับ Guestbook ไม่ต้องใช้ (รันใน 1 Job)

เก็บรักษาโดย Push กลับ Repository

เพื่อเก็บข้อมูลถาวรใน Repo — สร้างไฟล์ใหม่หรือ Append ไฟล์เดิมด้วย Shell Commands ใน Workflow

สร้างไฟล์ใน Workflow

Checkout Repo ก่อน:

- uses: actions/checkout@master
  with:
    fetch-depth: 1

สร้างไฟล์ HTML จาก Comment (Sanitize Input, Newlines → Paragraphs):

- name: Turn comment into file
  run: |
    ID=${{ github.event.comment.id }}
    AUTHOR=${{ github.event.comment.user.login }}
    DATE=${{ github.event.comment.created_at }}
    COMMENT=$(echo "${{ github.event.comment.body }}")
    NO_TAGS=${COMMENT//[<>]/\`}
    FOLDER=comments
    printf '%b\n' "${AUTHOR} says:
${NO_TAGS//$'\n'/\<\/p\>\<p\>}
${DATE}
\r\n" > ${FOLDER}/${ID}.html

ผลลัพธ์ HTML ต่อ Comment:

<div class="comment">
  <p>victoriadrake says:</p>
  <p>This is a comment!</p>
  <p>2019-11-04T00:28:36Z</p>
</div>

命名ด้วย Comment ID → Edit Comment = Overwrite File เดิม (เหมาะ Guestbook)

รวมไฟล์ Comment ทั้งหมดเป็นหน้า Index:

- name: Assemble page
  run: |
    cat header.html > index.html
    find comments/ -name "*.html" | sort -r | xargs -I % cat % >> index.html
    cat footer.html >> index.html

Commit และ Push กลับ Repo

Checkout Action ไม่เหมือน Clone ทั้งหมด — ต้อง Pull, Checkout, Push เอง:

- name: Push changes to repo
  run: |
    REMOTE=https://${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
    git config user.email "${{ github.actor }}@users.noreply.github.com"
    git config user.name "${{ github.actor }}"
    git pull ${REMOTE}
    git checkout master
    git add .
    git status
    git commit -am "Add new comment"
    git push ${REMOTE} master

Remote ใช้ github.repository Context
Push ต้องใช้ secrets.GITHUB_TOKEN
Config Git ใหม่ทุก Run (Fresh Environment)

แสดง Event Data บน GitHub Pages

แก้ไข Nov 6, 2019: GitHub Actions ต้องใช้ Personal Access Token (PAT) เพื่อ Trigger Pages Build

Default secrets.GITHUB_TOKEN ไม่ Trigger Pages Build — จะ Error "Page build failed"

แก้: สร้าง PAT → เก็บเป็น Secret → ใช้แทน GITHUB_TOKEN ใน Workflow

ด้วย PAT → Push จาก Actions จะ Trigger Pages Build อัตโนมัติ — Guestbook อัปเดตใน 30-60 วินาที

ถ้าใช้ Static Site Generator (Hugo) — ใช้ Makefile Build แทน (เพราะ Workflow ไม่ Trigger Workflow อื่น):

- name: Run Makefile
  env:
    TOKEN: ${{ secrets.GITHUB_TOKEN }}
  run: make all

ไอเดียเพิ่มเติมจาก Event Data

Public Issues Board — ลูกค้าที่ไม่มี GitHub Account ดู/Feedback Issues ได้
Auto-updating RSS Feed — Issues, Comments, PRs ใหม่
Comments System สำหรับ Static Sites — ใช้ GitHub Issue Comments เป็น Input
Awesome 90s Guestbook Page!

โอกาสไม่มีขีดจำกัด — ขึ้นอยู่กับจินตนาการของคุณ!