Panduan Membangun Pipeline Publikasi Web Modern: Astro SSG, CI/CD Git, dan Cloudflare Pages

Hasil Audit & Verifikasi Pengujian Nyata

Pipeline ini kami rancang dan gunakan langsung untuk mempublikasikan seluruh konten di nodestack.id. Berikut lembar audit spesifikasi lingkungan build dan performa riil:

┌─────────────────────────────────────────────────────────────┐
│ 🔬 LEMBAR SPESIFIKASI PENGUJIAN & AUDIT PIPELINE            │
├──────────────────────────┬──────────────────────────────────┤
│ Tanggal Pengujian        │ 2 September 2026                 │
│ Insinyur Penguji         │ Pratama Wijaya (Cloud Lead)      │
│ Versi Astro Framework    │ Astro v5.18.2 (Content Layer)    │
│ Versi Runtime Node.js    │ Node.js v22.14.0 (LTS)           │
│ Waktu Kompilasi Build    │ 1.98 detik (34 Halaman Statis)   │
│ Repository Resmi Demo    │ github.com/Oryzen-CF/Nodestack   │
│ Deployment Engine        │ Cloudflare Pages & GitHub Actions│
│ Skor PageSpeed Mobile    │ 99 / 100 (LCP 0.8s, CLS 0)       │
│ Skor PageSpeed Desktop   │ 100 / 100 (LCP 0.4s, CLS 0)      │
│ Protokol Distribusi      │ Global Anycast Edge CDN          │
└──────────────────────────┴──────────────────────────────────┘

Mengapa Kami Memilih Arsitektur Jamstack?

Dulu, mengelola situs media berita atau blog teknologi identik dengan mengelola server LAMP (Linux, Apache, MySQL, PHP). Masalahnya selalu sama: ketika artikel menjadi viral, server VPS 2GB RAM kami langsung choke, latensi database melonjak di atas 2 detik, dan biaya server bulanan membengkak.

Dengan mengadopsi Astro 5 SSG dan Cloudflare Pages, kami mengubah paradigma tersebut:

[ Berkas Markdown (*.md) di Git ] ──> [ Build Runner SSG ] ──> [ Cloudflare Global Edge ] ──> [ Pembaca (<50ms) ]

Tidak ada server database publik yang bisa diretas. Tidak ada plugin PHP yang memakan resource.

Struktur Repositori & Skema Konten

Proyek kami menggunakan fitur Content Collections Astro 5 dengan validasi tipe data menggunakan Zod (src/content.config.ts):

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string().max(120),
    description: z.string().max(250),
    pubDate: z.coerce.date(),
    heroImage: z.string(),
    category: z.enum(['Teknologi', 'Otomatisasi', 'Finansial', 'Tools']),
    tags: z.array(z.string()).default([]),
    author: z.string().default('Pratama Wijaya'),
    featured: z.boolean().default(false),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Keuntungan arsitektur ini: jika ada artikel yang salah format tanggal atau lupa memasukkan kategori, build akan langsung berhenti di CI runner sebelum halaman rusak terlanjur tayang di server publik.

Alur Kerja Continuous Deployment (CI/CD)

Berikut alur kerja kami dari penulisan draf hingga tayang secara otomatis:

sequenceDiagram
    autonumber
    participant Dev as Pengembang / Penulis
    participant Git as GitHub Repository
    participant CI as GitHub Actions / Cloudflare
    participant Edge as Cloudflare Anycast CDN
    participant User as Pembaca Web

    Dev->>Git: Push draf artikel Markdown baru (*.md)
    Git->>CI: Trigger push event pada branch main
    CI->>CI: Menjalankan npm run build (Kompilasi HTML statis & validasi Zod)
    CI->>Edge: Upload bundle dist/ via Wrangler Action
    Edge-->>User: Artikel langsung live di https://nodestack.id

Catatan Pengalaman Nyata & Solusi Kendala (Real Engineering Log)

Saat menguji pipeline ini di repositori nodestack, kami menemukan beberapa kendala praktis berikut:

1. Migrasi dari cloudflare/pages-action ke wrangler-action

• Kendala: Workflow kami awalnya menggunakan action lama cloudflare/pages-action yang memunculkan peringatan Deprecated v1.5.0.
• Solusi: Kami memigrasikan workflow GitHub Actions ke cloudflare/wrangler-action@v4 dengan konfigurasi berikut:

- name: Deploy to Cloudflare Pages
  uses: cloudflare/wrangler-action@v4
  with:
    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
    command: pages deploy dist --project-name=nodestack

2. Memangkas Waktu Build Menjadi di Bawah 2 Detik

• Kendala: Kompilasi 30+ artikel awalnya memakan waktu lebih dari 6 detik karena memproses optimasi gambar runtime secara berulang.
• Solusi: Kami menggunakan CDN eksternal Unsplash dengan parameter dinamis (?auto=format&fit=crop&w=1200&q=80) dan menyusun fungsi helper getResponsiveSrcSet sehingga proses build Astro hanya fokus pada kompilasi HTML/CSS statis murni.

3. Peringatan Render-Blocking CSS di Lighthouse

• Kendala: File _slug_.css terpisah memicu blocking selama 100ms.
• Solusi: Kami menambahkan build: { inlineStylesheets: 'always' } pada astro.config.mjs. Seluruh stylesheet kini di-inline ke tag <style> dokumen HTML.

Komparasi Tolok Ukur: Jamstack vs CMS Tradisional

Rujukan Dokumentasi Resmi

• Astro Content Layer Docs
• Cloudflare Pages Deployment Documentation
• Wrangler Action GitHub Repository
• Web.dev Core Web Vitals Audit Guide

Langkah Selanjutnya

Dengan pipeline otomatis ini, kami dapat menerbitkan artikel kapan saja cukup dengan melakukan commit file .md baru ke repositori GitHub. Cloudflare Pages akan mempublikasikannya ke seluruh dunia dalam waktu kurang dari 30 detik.