Tutorial #2 – Struktur Project di Cloudflare Pages

Sebelum main ke setting Cloudflare Pages, struktur folder & file harus rapi dulu. Di tutorial ini kita atur pola yang konsisten: dari index.html, folder assets, sampai subfolder /tutorials/ seperti yang dipakai Obotzone.

1. Konsep dasar struktur project

Cloudflare Pages membaca isi folder project kamu persis seperti struktur di file manager: apa yang ada di dalam project itulah yang akan menjadi URL di browser. Jadi, kalau struktur dari awal sudah rapi, ke depannya makin mudah dikembangkan.

            Prinsipnya:  
            “Satu project = satu folder rapi, URL mengikuti struktur folder.”
          

2. Struktur minimum yang disarankan

Untuk landing page + tutorial seperti Obotzone, struktur dasar yang nyaman adalah:

root-project/
├─ index.html
├─ assets/
│  ├─ css/
│  │  └─ tutorial.css
│  ├─ img/
│  └─ js/
└─ tutorials/
   ├─ index.html
   ├─ pengenalan-cloudflare-pages.html
   └─ struktur-project-cloudflare-pages.html

index.html → halaman utama/landing page.
assets/css/ → tempat semua file CSS (termasuk tutorial.css).
assets/img/ → ikon, ilustrasi, logo, dsb.
tutorials/ → semua halaman tutorial disimpan di sini.

3. Aturan penamaan file & URL

Supaya SEO friendly dan rapi, pakai pola penamaan seperti ini:

Gunakan huruf kecil semua.
Ganti spasi dengan - (dash), misal: pengenalan-cloudflare-pages.html.
Nama file usahakan jelas menjelaskan isi halaman.

            Contoh mapping:

            File: /tutorials/pengenalan-cloudflare-pages.html

            URL: https://namaproject.pages.dev/tutorials/pengenalan-cloudflare-pages.html

4. Menyiapkan struktur untuk banyak tutorial

Karena Obotzone dan digitalplat.org akan punya banyak tutorial, dari awal kita sudah siapkan struktur yang scalable:

/tutorials/index.html → hub/daftar semua tutorial.
/tutorials/pengenalan-cloudflare-pages.html → Tutorial #1.
/tutorials/struktur-project-cloudflare-pages.html → Tutorial #2.
Ke depan, Tutorial #3, #4, dst tinggal ditambah di folder yang sama.

5. Contoh alur khusus untuk jaringan Obotzone

Misalnya satu subdomain dari digitalplat.org diarahkan ke project ini. Ketika pengunjung datang ke landing page, mereka bisa:

Membaca penjelasan domain/subdomain gratis.
Lanjut ke menu tutorial di /tutorials/.
Menerapkan sendiri di subdomain mereka yang di-host di Cloudflare Pages.

            Intinya:  
            Satu struktur rapi → mudah di-maintain → mudah dikembangkan → enak dijelaskan ke orang lain.
          

6. Checklist sebelum lanjut ke konfigurasi

Folder project sudah punya index.html.
Folder assets/css/ sudah berisi tutorial.css.
Folder tutorials/ sudah ada minimal 2 halaman: Tutorial #1 dan #2.
Semua link internal sudah saling terhubung (home → tutorials → masing-masing tutorial).