Siap. Kita bikin live site dengan cara yang paling aman dan paling gampang dulu: Cloudflare Pages + GitHub.

Cloudflare Pages masih mendukung deploy static site lewat Git integration atau Direct Upload. Untuk proyek kamu, Git integration paling enak karena setiap push otomatis redeploy. Cloudflare juga punya panduan khusus untuk static HTML site, dan build/output directory bisa diatur sendiri. (Cloudflare Docs)

Jalur yang kita pakai

Struktur kamu sekarang cocok untuk static site biasa:

  • index.html
  • style.css
  • app.js
  • data.json
  • media/...

Jadi tidak perlu framework preset. Nanti di Cloudflare Pages cukup set project sebagai static HTML site, dan repo akan otomatis dibangun/deploy dari GitHub. (Cloudflare Docs)

Step 1 — rapikan folder proyek

Pastikan struktur kira-kira begini:

video-site/
  index.html
  style.css
  app.js
  data.json
  build.js
  generate.js
  generate-thumb.js
  media/
    video1.mp4
    video1.jpg
    output.m3u8
    output0.ts
    output1.ts

Yang penting:

  • index.html ada di root
  • data.json ada di root
  • folder media ikut masuk repo
  • file .ts untuk HLS ikut ke-upload juga, karena output.m3u8 membutuhkannya

Step 2 — buat .gitignore

Buat file .gitignore seperti ini:

node_modules
.DS_Store
Thumbs.db

Jangan masukkan data.json atau media/ ke .gitignore, karena itu justru aset situs kamu.

Step 3 — init git lalu push ke GitHub

Di folder project, jalankan:

git init
git add .
git commit -m "initial video gallery site"

Lalu buat repo baru di GitHub, misalnya:
video-site

Setelah repo GitHub dibuat, jalankan:

git branch -M main
git remote add origin https://github.com/USERNAME/video-site.git
git push -u origin main

Ganti USERNAME dengan username GitHub kamu.

Step 4 — deploy ke Cloudflare Pages

Di dashboard Cloudflare:

  1. buka Workers & Pages
  2. pilih Create application
  3. pilih Pages
  4. pilih Connect to Git
  5. hubungkan akun GitHub
  6. pilih repo video-site

Cloudflare Pages memang mendukung koneksi repo GitHub dan akan auto deploy setiap kali kamu push perubahan. (Cloudflare Docs)

Step 5 — isi build settings dengan benar

Karena proyek kamu static biasa, isi seperti ini:

  • Framework preset: None
  • Build command: kosongkan dulu
    atau isi node build.js kalau kamu ingin Pages regenerate thumbnail/data saat build
  • Build output directory: /

Untuk static HTML biasa, Cloudflare mendukung deploy tanpa framework khusus. Build configuration memang bisa diatur untuk command dan output directory. (Cloudflare Docs)

Saran saya untuk sekarang

Pakai ini dulu:

  • Build command: kosong
  • Build output directory: /

Kenapa?
Karena data.json kamu sudah jadi sebelum push. Jadi Cloudflare cukup publish isi repo apa adanya.

Step 6 — deploy pertama

Klik Save and Deploy.

Kalau berhasil, kamu akan dapat URL seperti:

https://nama-project.pages.dev

Sangat penting untuk HLS kamu

Kalau kamu pakai:

{
  "title": "output",
  "type": "m3u8",
  "src": "media/output.m3u8"
}

maka file berikut juga harus ada di repo dan ikut terdeploy:

media/output.m3u8
media/output0.ts
media/output1.ts
media/output2.ts

Kalau .m3u8 ada tapi .ts tidak ikut, stream akan gagal.

Step 7 — update workflow kamu

Mulai sekarang workflow lokal kamu jadi begini:

node build.js
git add .
git commit -m "update content"
git push

Begitu push, Cloudflare Pages akan bikin deployment baru otomatis lewat Git integration. (Cloudflare Docs)

Step 8 — kalau mau pakai domain sendiri

Setelah site live, kamu bisa tambah custom domain dari menu Custom domains di project Pages kamu. Cloudflare menyediakan setup domain langsung dari dashboard Workers & Pages. (Cloudflare Docs)

Hal yang perlu kamu waspadai

1. Ukuran repo

Kalau video MP4 kamu besar-besar, GitHub repo cepat gemuk. Untuk demo awal masih oke, tapi untuk jangka panjang lebih bagus:

  • frontend di Pages
  • media berat di external storage / CDN / R2

2. File count

Cloudflare Pages Free plan punya batas jumlah file per site. Saat file HLS .ts makin banyak, ini bisa jadi perhatian. (Cloudflare Docs)

3. Direct Upload juga ada

Kalau nanti kamu tidak mau lewat GitHub, Pages juga mendukung Direct Upload dari aset yang sudah jadi. Tapi Cloudflare menegaskan bahwa project yang dibuat dengan Direct Upload tidak bisa diubah ke Git integration nanti, dan sebaliknya. Buat kamu, Git integration tetap pilihan yang lebih tepat sekarang. (Cloudflare Docs)

Setting final yang saya rekomendasikan untuk proyek kamu

Pakai ini dulu:

  • GitHub repo: ya
  • Cloudflare Pages: Git integration
  • Framework preset: None
  • Build command: kosong
  • Build output directory: /

Itu paling sederhana dan kecil kemungkinan bikin kamu nyangkut.

Kalau kamu mau, next kirim screenshot halaman Build settings Cloudflare Pages kamu, nanti saya bantu cek sebelum kamu klik deploy.