🚀 Panduan Membuat Static Site dengan Layar Kosong

Selamat datang! Panduan ini akan membantumu membangun situs statis yang super cepat dan ringan menggunakan repository Layar Kosong.

Konsepnya sederhana: Kita hanya menggunakan sekumpulan file HTML yang digabungkan, disimpan, lalu dipanggil menggunakan domain GitHub Pages (biasanya usernamekamu.github.io) atau domain kustom milikmu.

---

🛠️ Tahap 1: Persiapan Lingkungan (Install Git)

Langkah pertama yang paling krusial: Pastikan Git CLI sudah terpasang. Berikut cara instalasinya di berbagai Sistem Operasi:

🪟 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 & Clone)

1. Punya Akun GitHub: Pastikan kamu sudah login.
2. Fork Repository: Lakukan Fork pada repository ini agar masuk ke akunmu. Pastikan mencentang opsi untuk menyertakan seluruh branch (termasuk branch site).
   • 👉 Klik di sini untuk Fork
3. Aktifkan Pages: Setelah berhasil di-fork:
   • Masuk ke menu Settings > Pages.
   • Pada bagian "Source", pilih Deploy from a branch.
   • Pilih branch main (atau site sesuai konfigurasi preferensimu) dan folder / (root).
   • Klik Save. Situsmu sekarang akan mulai dibangun!

Repository kamu sekarang bisa diakses secara online di: https://usernamekamu.github.io

---

🏗️ Tahap 3: Produksi (Membuat Konten)

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. Aktifkan GitHub Actions ⚡

Secara default, fitur keamanan GitHub akan mematikan Actions pada repository hasil fork.

• Masuk ke tab Actions.
• Klik tombol hijau bertuliskan "I understand my workflows, go ahead and enable them".

3. Mulai Menulis (Workflow Otomatis) ✍️

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 4: 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

---

💬 Butuh Bantuan?

Ada kendala saat instalasi atau workflow macet? Jangan panik! Langsung saja meluncur ke repository aslinya, kita ngobrol santai di sana.

👉 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. 🙏

---

⚡ Klik untuk Status Teknis ⚙️

📊 Status:

Otomatisasi & CI/CD:

Stack:

Format Data:

Sosial Media:

Dukungan AI: