Menjalankan Validasi Otomatis dengan GitHub Actions untuk Proyek Website Statis

Pengertian

GitHub Actions adalah layanan CI/CD bawaan GitHub. Setiap kali Anda push atau membuka pull request, GitHub dapat menjalankan alur kerja (workflow) otomatis: memasang dependensi, menjalankan skrip pemeriksaan, membangun situs, hingga mengunggah hasil.

Untuk proyek website statis seperti ini, kegunaan utamanya adalah menjaga konsistensi: memastikan setiap artikel punya metadata lengkap, slug unik, berkas markdown tersedia, dan hasil build selalu sinkron dengan sumber.

Alur dasarnya:

  1. checkout repositori.
  2. Pasang Node.js dan dependensi.
  3. Jalankan npm run check (validasi konten).
  4. Jalankan npm run build (pre-render + sitemap).
  5. (Opsional) unggah hasil sebagai artifact atau deploy.

Kelebihan

  • Gratis untuk repositori publik dengan kuota menit yang longgar.
  • Terintegrasi: tidak perlu server CI terpisah.
  • Menangkap kesalahan lebih awal: sebelum merge atau deploy.
  • Konsisten: memakai versi Node dan dependensi yang sama tiap kali.
  • Dapat diperluas: artifact, notifikasi, deploy otomatis.

Kekurangan

  • Waktu build terbatas: pekerjaan sangat berat bisa kena batas menit.
  • Ketergantungan binari native (mis. Sharp) perlu cocok dengan runner.
  • Butuh disiplin: hasil build yang di-commit harus tetap sinkron.
  • Debugging bisa membingungkan bagi pemula, terutama soal cache.
  • Menambah waktu tunggu pada pull request besar.
Catatan penting: Karena proyek ini menyimpan HTML hasil build di repositori, jalankan build di CI lalu pastikan hasilnya tidak berbeda. Bila berbeda, berarti ada yang lupa di-commit — dan workflow sebaiknya gagal agar ketahuan.

Struktur Workflow

Buat berkas .github/workflows/validate.yml:

yaml
name: Validasi Situs

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:

jobs:
  validate:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Siapkan Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Pasang dependensi
        run: npm ci

      - name: Validasi konten
        run: npm run check

      - name: Build situs
        run: npm run build

      - name: Pastikan hasil build ter-commit
        run: |
          if [ -n "$(git status --porcelain)" ]; then
            echo "::error::Hasil build berbeda. Jalankan 'npm run build' lalu commit."
            git status --short
            exit 1
          fi

Penjelasan penting:

  • npm ci memasang dependensi persis sesuai package-lock.json.
  • cache: npm mempercepat instalasi pada run berikutnya.
  • Langkah terakhir memastikan sitemap.xml dan HTML hasil build sudah di-commit — pola yang cocok untuk proyek ini.

Menambahkan Artifact

Unggah folder keluaran agar bisa diunduh dari halaman run:

yaml
      - name: Siapkan output publik
        run: node scripts/prep-output.js && npx pagefind --site public

      - name: Unggah artifact
        uses: actions/upload-artifact@v4
        with:
          name: public
          path: public
          retention-days: 7

Deploy Opsional ke Vercel

Bila ingin deploy dari Actions (bukan integrasi Git Vercel), tambahkan langkah berikut beserta secret VERCEL_TOKEN:

yaml
      - name: Deploy ke Vercel
        if: github.ref == 'refs/heads/main'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: npx vercel deploy --prod --yes --token "$VERCEL_TOKEN"

Matriks Versi Node

Menguji beberapa versi Node membantu memastikan kompatibilitas:

yaml
    strategy:
      matrix:
        node-version: [20, 22]
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

Tabel Langkah dan Tujuan

LangkahPerintahTujuan
Checkoutactions/checkout@v4Ambil kode repositori
Setup Nodeactions/setup-node@v4Versi Node + cache npm
Instalasinpm ciPasang dependensi konsisten
Validasinpm run checkCek metadata vs markdown
Buildnpm run buildPre-render + sitemap
Verifikasigit status --porcelainDeteksi hasil build tertinggal
Artifactupload-artifact@v4Simpan keluaran

Troubleshooting

  • npm ci gagal: pastikan package-lock.json ikut ter-commit dan sinkron dengan package.json.
  • Sharp gagal di runner: runner GitHub memakai Linux glibc; jangan commit node_modules, biarkan dipasang ulang. Jika tetap gagal, kunci versi Sharp.
  • Build sukses tapi job gagal: berarti langkah verifikasi mendeteksi file hasil build yang belum di-commit — jalankan npm run build lokal lalu commit.
  • CI lambat: aktifkan cache: npm, dan hindari menjalankan pagefind bila tidak diperlukan di setiap run.
  • permission denied saat push dari Actions: gunakan GITHUB_TOKEN bawaan lewat permissions: contents: write, dan hindari push ke main tanpa aturan branch.
  • Workflow tidak jalan: cek nama branch (main vs master) dan path berkas workflow yang benar.

Kesimpulan

GitHub Actions menjadikan kualitas situs statis terjaga otomatis: setiap push divalidasi, dibangun, dan diperiksa konsistensinya. Cukup satu berkas validate.yml, proyek terhindar dari artikel tanpa metadata, slug duplikat, atau hasil build yang tertinggal sebelum menyentuh produksi.

Artikel Terkait