🚀 Panduan Membuat Static Site dengan Layar Kosong

Selamat datang! Panduan ini akan membantumu membangun situs statis yang super cepat, ringan, dan otomatis ter-deploy ke Cloudflare Pages menggunakan repository Layar Kosong.

Konsepnya: Kamu cukup fokus menulis di GitHub, dan biarkan GitHub Actions + Cloudflare Wrangler yang bekerja mengirimkan artikelmu ke internet secara instan.

Otomatisasi:

• Direct Deploy: Menggunakan Wrangler untuk pengiriman kilat tanpa branch perantara.
• Search Engine: Client-side JavaScript menggunakan data dari artikel.json.
• Clean URLs: Mendukung URL tanpa .html untuk navigasi yang lebih rapi.

---

🛠️ Tahap 1: Persiapan Lingkungan (Git & Node.js)

Langkah pertama: Pastikan Git dan Node.js sudah terpasang karena kita akan menggunakan perintah npx wrangler.

• Git: Download di sini (Atau gunakan winget install Git.Git di Windows).
• Node.js: Download di sini (Rekomendasi versi LTS).

🪟 Windows

Unduh dan instal installer resmi dari git-scm.com. Tinggal "Next, Next, Finish"! atau bisa juga gunakan winget:

winget install --id Git.Git -e --source winget

🍎 macOS

Buka terminal dan ketik perintah berikut (jika menggunakan Homebrew):

brew install git

🐧 Linux

• Debian, Ubuntu, Linux Mint, MX Linux, Kali:

  sudo apt update
  sudo apt install git

• Fedora, Red Hat (RHEL), CentOS, AlmaLinux:

  sudo dnf install git
  # atau untuk versi lama:
  sudo yum install git

• Arch Linux, CachyOS, Manjaro, EndeavourOS:

  sudo pacman -S git

• NixOS: Tambahkan git ke environment.systemPackages di configuration.nix atau jalankan:

  nix-env -i git

• OpenSUSE:

  sudo zypper install git

---

🧬 Tahap 2: Setup Repository (Fork & Cloudflare)

1. Fork Repository: Lakukan Fork pada repository ini ke akunmu. Cukup centang branch main saja (kita sudah tidak butuh branch site).

👉 Klik di sini untuk Fork Repo

2. Daftar Cloudflare Pages:

• Login ke dashboard Cloudflare.
• Pilih Workers & Pages > Create application > Pages > Upload assets.
• Beri nama proyekmu (misal: blog-saya).

3. Ambil API Token:

• Buka My Profile > API Tokens > Create Token.
• Gunakan template "Edit Cloudflare Workers" atau beri akses untuk Account: Cloudflare Pages.
• Simpan Account ID dan API Token kamu.

---

🏗️ Tahap 3: Otomatisasi (GitHub Secrets)

Sekarang saatnya bersih-bersih dan mulai mengisi kontenmu sendiri.

1. Bersihkan Konten Lama 🧹

Hapus semua file contoh bawaan agar situsmu bersih:

• Hapus semua isi di dalam folder artikel/.
• Hapus seluruh gambar di dalam folder img/.

2. Agar GitHub bisa mengirim file ke Cloudflare secara otomatis:

masukkan "kunci" rahasia di repo hasil fork-mu:

1. Buka tab Settings > Secrets and variables > Actions pada repository GitHub-mu.
2. Klik New repository secret dan tambahkan:

• CF_API_TOKEN: (Isi dengan token API Cloudflare-mu).
• CF_ACCOUNT_ID: (Isi dengan ID akun Cloudflare-mu).

---

✍️ Tahap 4: Mulai Menulis dan Produksi (Membuat Konten)

Di sinilah keajaiban terjadi. Kamu tidak menaruh file langsung di folder publik, tapi melalui proses "masak" otomatis:

1. Buat file HTML artikel barumu.
2. Masukkan file tersebut ke dalam folder artikelx/ (perhatikan akhiran 'x').
3. Lakukan commit dan push.
4. Biarkan Action Bekerja: Sistem otomatis (workflow) akan mendeteksi file baru, memprosesnya, dan memindahkannya dari artikelx/ menuju folder artikel/ yang siap tayang.

🎉 Selesai! Halaman pertamamu sudah terbit. Ulangi langkah ini untuk artikel-artikel berikutnya.

---

🎨 Tahap 5: Personalisasi & Konfigurasi

Setelah uji coba sukses, saatnya mengklaim situs ini menjadi milikmu sepenuhnya. Jangan lupa ubah data-data berikut agar SEO dan identitas situsmu benar.

📂 Folder ext/

Sesuaikan URL dan nama domain pada seluruh file konfigurasi di dalam folder ini.

📄 isi File di dalam Root (Wajib Diubah)

Edit dan sesuaikan informasi di file-file berikut yang ada di halaman utama (root):

• 404.html - Halaman untuk tautan URL yang tidak ditemukan.
• BingSiteAuth.xml - Verifikasi Bing Webmaster.
• CODE_OF_CONDUCT.md - Kode etik repository.
• data-deletion-form.html - Form penghapusan data.
• data-deletion.html - Halaman penghapusan data.
• disclaimer.html - Disclaimer situs.
• disclaimer.md - Disclaimer (markdown).
• favicon.ico / favicon.png / favicon.svg - Icon situs.
• feed.html - Halaman RSS Feed Terbaru.
• img.html - Galeri gambar.
• index.html - Halaman utama.
• robots.txt - Instruksi untuk crawler.
• search.html - Halaman pencarian.
• sitemap.html - Daftar Isi, Peta Situs .
• thumbnail.jpg / thumbnail.png / thumbnail.webp - Thumbnail sosial media.

🙏 Checklist Konfigurasi

• Ganti semua URL dari dalam.web.id ke domain kamu.
• Update informasi kontak dan metadata.
• Sesuaikan warna, logo, dan branding.
• Test semua link internal.
• Verifikasi sitemap dan robots.txt

---

Domain Custom (Opsional jika Ada)

Jika ingin menggunakan domain custom:

1. Tambahkan file CNAME di root repository.
2. Isi dengan nama domain kamu (contoh: example.com)
3. Atur DNS di provider domain kamu:
   • Tambahkan record A ke IP GitHub Pages.
   • Atau CNAME ke usernamekamu.github.io

---

🎨 Tahap 6: Personalisasi

Ubah data berikut di branch main agar situs ini menjadi milikmu sepenuhnya:

• wrangler.toml: Ganti name = "layarkosong" menjadi nama proyek Cloudflare-mu.
• artikel.json: Ini adalah nyawa mesin pencari blogmu, biarkan sistem yang mengupdatenya secara otomatis.
• Sesuaikan index.html, search.html, dan 404.html dengan identitasmu.
• Folder ext/**: Sesuaikan konfigurasi domain di dalamnya.

---

💬 Butuh Bantuan?

Jika workflow macet atau bingung set-up Cloudflare, langsung saja meluncur ke repository aslinya.

👉 Diskusi di Repository LayarKosong

---

Lisensi

Silakan cek file Lisensi di repository untuk informasi lisensi.

Kontributor

Terima kasih untuk semua yang telah berkontribusi pada halaman ini. 🙏

(kembali ke awal)

---

⚡ Klik untuk Status Teknis ⚙️

📊 Status & Stack:

Otomatisasi & CI/CD:

Stack:

Format Data:

Sosial Media:

Dukungan AI:

---