CI/CD Dasar dengan GitHub Actions dan Cloudflare Pages

Tulisan ini merangkum alur paling dasar untuk membangun CI/CD (Continuous Integration / Continuous Deployment) menggunakan:

GitHub sebagai tempat menyimpan kode
GitHub Actions sebagai runner build
Cloudflare Pages sebagai tempat hosting static site

Contoh yang dipakai: project static (bisa HTML biasa, Gatsby, Next.js dengan output static, dsb) yang hasil build-nya berupa folder public/ atau dist/.

1. Konsep Singkat: CI/CD

Secara sederhana:

Continuous Integration (CI) Setiap kali ada push ke repository, kode akan:
- di-checkout
- di-npm install / npm ci
- di-build
- dicek apakah masih bisa dikompilasi dengan benar
Continuous Deployment (CD) Kalau CI berhasil, hasil build otomatis dikirim ke server (dalam hal ini Cloudflare Pages). Jadi, push ke branch utama = website ikut ter-update.

Tujuan akhirnya: tidak perlu deploy manual. Cukup commit & push.

2. Menyiapkan GitHub Repository

Struktur dasar:

project/
  src/            # kode sumber
  public/         # atau dist/, hasil build (akan dihasilkan oleh perintah build)
  package.json

Contoh package.json minimal:

{
  "name": "my-site",
  "scripts": {
    "build": "npm run build:site",
    "build:site": "gatsby build"
  }
}

Intinya, harus ada script:

npm run build

yang menghasilkan folder berisi file statis.

3. Menyiapkan Cloudflare Pages

Buka dashboard Cloudflare → Pages
Buat project baru, pilih Direct Upload (bukan Git integration).
Beri nama project, misalnya: blog-aksara.
Setelah project dibuat, catat:
- Account ID
- Project name (misalnya: blog-aksara)

Lalu, buat API Token khusus deploy:

Cloudflare dashboard → avatar → My Profile
Tab API Tokens → Create Token
Bisa mulai dari template Edit Cloudflare Workers / Custom
Izin minimal:
- Account → Cloudflare Pages → Edit (pada account yang dipakai)
Generate → simpan token (nanti dipakai di GitHub Actions).

4. Menyimpan Secret di GitHub

Buka repo di GitHub → Settings → Secrets and variables → Actions → tambahkan:

CLOUDFLARE_API_TOKEN → isi dengan API token dari Cloudflare
CLOUDFLARE_ACCOUNT_ID → isi dengan Account ID
CF_PAGES_PROJECT → isi dengan nama project Pages, misalnya blog-aksara

Jika memakai repository private lain (misalnya submodule), bisa juga menambahkan:

SUBMODULE_TOKEN → Personal Access Token GitHub dengan scope repo (read).

5. Membuat Workflow GitHub Actions

Di repo, buat file:

.github/workflows/deploy-pages.yml

Isi contoh workflow dasar:

name: Build & Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main # ganti dengan nama branch utama (misalnya master)
  workflow_dispatch: {} # bisa dijalankan manual dari tab Actions

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. Checkout kode (beserta submodule kalau ada)
      - name: Checkout repo
        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ secrets.SUBMODULE_TOKEN }} # jika tidak pakai submodule, baris ini bisa dihapus

      # 2. Setup Node.js
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      # 3. Install dependency
      - name: Install dependencies
        run: npm ci

      # 4. Build project (harus menghasilkan folder `public/` atau `dist/`)
      - name: Build site
        run: npm run build

      # 5. Install Wrangler (CLI Cloudflare)
      - name: Install Wrangler
        run: npm install -g wrangler

      # 6. Deploy ke Cloudflare Pages
      - name: Deploy to Cloudflare Pages
        run: >
          wrangler pages deploy public
          --project-name "$CF_PAGES_PROJECT"
          --branch "$GITHUB_REF_NAME"
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          CF_PAGES_PROJECT: ${{ secrets.CF_PAGES_PROJECT }}

Penjelasan singkat:

on.push.branches Menentukan branch mana yang memicu deploy. Jika branch utama bernama master, ganti ke master.
npm run build Menjalankan proses build. Sesuaikan dengan script project.
wrangler pages deploy public Mengupload folder public/ ke Cloudflare Pages.
--project-name Nama project Pages (harus sama dengan yang dibuat di dashboard).

Jika hasil build ada di folder lain (misalnya dist/), ganti:

wrangler pages deploy dist

6. Menghubungkan Production Branch di Cloudflare Pages

Di Cloudflare Pages:

Buka project → Settings → Builds & deployments
Atur Production branch agar sama dengan branch yang dipakai di workflow (misalnya main).
Deployment yang datang dari branch tersebut akan dianggap sebagai Production. Branch lain akan masuk kategori Preview.

7. Alur Kerja Sehari-hari

Setelah semua terpasang, alurnya menjadi:

Edit kode / konten di lokal.

Commit:

git add .
git commit -m "Perubahan baru"
git push origin main

GitHub Actions otomatis berjalan:
- checkout repo
- install dependency
- build
- deploy ke Cloudflare Pages
Cloudflare Pages menerima deploy baru dan melayani versi terbaru situs.

Tidak ada lagi proses:

build manual
upload manual
SSH ke server

Cukup git push.

8. Catatan Tambahan

Beberapa hal yang sering berguna:

Submodule private Jika menggunakan submodule private di GitHub, pastikan:
- actions/checkout@v4 menggunakan token: ${{ secrets.SUBMODULE_TOKEN }}
- SUBMODULE_TOKEN adalah Personal Access Token dengan scope repo.
wrangler.toml (opsional) Jika ingin memakai file konfigurasi:
```
name = "blog-aksara"
pages_build_output_dir = "public"
```
Namun untuk setup dasar, memberikan parameter langsung ke wrangler pages deploy sudah cukup.
Custom domain Setelah deploy stabil, tambahkan domain kustom (misalnya mojo.my.id) di tab Custom domains di Cloudflare Pages.

Dengan setup sederhana ini, GitHub dan Cloudflare sudah bekerja sebagai pipeline CI/CD yang otomatis: setiap perubahan di repository akan otomatis dibangun dan dipublikasikan tanpa intervensi manual.