Tutorial #5 – Pengelolaan & Update Project Cloudflare Pages

Setelah project online dengan domain sendiri, hal paling penting adalah mempelajari bagaimana cara update website dengan benar, memastikan tidak error, dan membuat workflow yang stabil.

1. Kenapa semua update harus lewat GitHub?

Cloudflare Pages bekerja menggunakan sistem otomatis:

Kamu update file → commit → push
Cloudflare Pages mendeteksi perubahan
Pages melakukan build baru
Website otomatis update

            Cloudflare *tidak menyediakan upload manual*.  
            Semua perubahan wajib lewat GitHub agar rapi & aman.
          

2. Cara melakukan update file

Kamu bisa melakukan update pakai:

GitHub Web (cara paling mudah)
GitHub Desktop
VSCode + Git

✔ Menggunakan GitHub Web (paling cepat untuk pemula)

Buka repository kamu
Masuk folder yang ingin kamu edit
Klik file → Edit this file
Edit sesuai kebutuhan
Scroll ke bawah → Commit changes
Klik Commit directly to main

            Setelah commit, tunggu 5–20 detik.  
            Cloudflare Pages akan rebuild otomatis.
          

3. Mengecek status deployment

Buka:

Workers & Pages → Pages → Project kamu
Pilih tab Deployments

Kamu akan melihat status seperti:

Queued → menunggu
Building → sedang membangun
Success → berhasil
Failed → ada error

Jika gagal, klik deployment → lihat log error warna merah.

4. Menggunakan Branch (Opsional tapi profesional)

Jika kamu ingin update tanpa merusak versi live:

Buat branch baru, misalnya: update-layout
Edit semua file di branch tersebut
Merge ke main setelah yakin

Cloudflare Pages bisa otomatis membuat:

Preview URL untuk setiap branch

            Contoh preview:  
            https://update-layout.yourproject.pages.dev
          

Ini sangat berguna jika kamu ingin eksperimen layout, warna, atau perubahan besar.

5. Menjaga struktur project tetap rapi

Untuk project dengan banyak halaman seperti Obotzone, struktur yang rapi sangat penting.

root/
├─ index.html
├─ assets/
│  ├─ css/
│  │  └─ tutorial.css
│  ├─ img/
│  └─ js/
└─ tutorials/
   ├─ index.html
   ├─ tutorial-1.html
   ├─ tutorial-2.html
   ├─ tutorial-3.html
   ├─ tutorial-4.html
   └─ tutorial-5.html

6. Hal yang sering bikin error (dan cara mengatasinya)

Nama folder beda → 404
✔ Gunakan huruf kecil dan hindari spasi.
Link salah → halaman tidak ditemukan
✔ Periksa kembali href="/tutorials/xxx.html".
CSS tidak terbaca
✔ Pastikan path CSS benar: /assets/css/tutorial.css
Build failed
✔ Karena file HTML berisi karakter aneh atau kurang tanda tutup.
Gambar tidak muncul
✔ Pastikan file benar-benar ada di /assets/img/

7. Cara aman melakukan update besar

Jika kamu ingin mengganti layout besar:

Buat branch baru
Edit HTML + CSS
Cek Preview URL
Kalau sudah oke → Merge ke main

Menjaga branch main tetap “bersih” adalah kebiasaan developer profesional.

8. Setelah paham update → saatnya masuk ke fitur pro

Di tutorial selanjutnya kita akan membahas:

Fitur redirect
Error pages
Cloudflare Rules
Deployment preview
Multi-project management