Panduan Membuat Static Site dengan Layar Kosong

Selamat datang! Panduan ini akan membantumu membangun situs statis yang super cepat, ringan, dan gratis menggunakan repositoryLayar Kosong. Cocok banget buat yang pengen punya website keren tanpa ribet!

Konsepnya sederhana banget: Kita cuma pakai sekumpulan file HTML yang digabungkan, disimpan rapi, lalu dipanggil menggunakan domain GitHub Pages (biasanya usernamekamu.github.io) atau kalau kamu punya, bisa juga pakai domain kustom sendiri. Asyik kan?

Yang bikin keren, semuanya otomatis! Kamu tinggal fokus nulis konten, sisanya biar sistem yang kerja. Tidak perlu jago coding, tidak perlu bayar hosting, dan yang paling penting: situsmu bakal super cepat!

Tahap 1: Persiapan Lingkungan (Install Git)

Langkah pertama yang paling krusial sebelum mulai: Pastikan Git CLI sudah terpasang di komputer atau laptopmu. Git ini kayak "jembatan" yang menghubungkan komputer kamu dengan GitHub. Tanpa ini, kamu tidak bisa upload atau download file dari repository.

Apa itu Git?

Git adalah sistem kontrol versi yang memungkinkan kamu melacak perubahan kode, berkolaborasi dengan orang lain, dan mengelola halaman dengan lebih terorganisir. Bayangin kayak "mesin waktu" buat kode kamu - bisa balik ke versi lama kapan aja!

Berikut cara instalasi Git untuk berbagai sistem operasi. Pilih sesuai dengan OS yang kamu pakai:

Windows

Buat pengguna Windows, ada dua cara gampang:

Cara 1: Download installer resmi dari git-scm.com. Tinggal klik "Next, Next, Finish"! Gampang banget.

Cara 2: Kalau kamu suka pakai command line dan punya winget, bisa langsung ketik perintah ini di terminal:

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

macOS

Pengguna Mac bisa install Git dengan mudah pakai Homebrew (package manager favorit di macOS). Kalau belum punya Homebrew, install dulu dari brew.sh.

Setelah itu, buka Terminal dan ketik:

brew install git

Atau kalau mau cara manual, bisa download installer dari git-scm.com.

Linux

Nah, buat pengguna Linux, cara instalasinya tergantung distro yang kamu pakai. Tapi tenang, semuanya gampang kok! Tinggal copas perintah di bawah sesuai distro kamu:

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 versi lama RHEL/CentOS:
sudo yum install git

Arch Linux, CachyOS, Manjaro, EndeavourOS

sudo pacman -S git

NixOS

Ada dua cara buat NixOS:

Cara 1: Tambahkan git ke environment.systemPackages di file configuration.nix kamu, lalu rebuild.

Cara 2: Pakai nix-env:

nix-env -i git

openSUSE

sudo zypper install git

Pro Tip: Setelah install, cek versi Git dengan mengetik git --version di terminal. Kalau muncul nomor versinya, berarti instalasi sukses!

Tahap 2: Setup Repository (Fork & Clone)

Sekarang Git sudah siap, saatnya kita "duplikat" repository Layar Kosong ke akun GitHub kamu. Proses ini disebut Fork - kayak fotokopi repository, jadi punya kamu sendiri deh!

Langkah-langkah Fork Repository

Punya Akun GitHub: Pastikan kamu sudah punya akun GitHub dan sudah login. Kalau belum punya, bikin dulu di github.com/signup - gratis kok!
Fork Repository: Klik tombol di bawah untuk langsung fork repository Layar Kosong ke akunmu. Pastikan mencentang opsi untuk menyertakan seluruh branch (terutama branch site yang penting banget!).

Klik di sini untuk Fork Repository
Tunggu Proses Fork: GitHub bakal proses beberapa detik. Setelah selesai, kamu bakal punya salinan lengkap repository di akunmu sendiri!

Aktifkan GitHub Pages

Setelah berhasil di-fork, sekarang waktunya bikin situsmu jadi online dan bisa diakses siapa aja di internet. Caranya:

Masuk ke repository hasil fork kamu (ada di https://github.com/usernamekamu/LayarKosong)
Klik tab Settings (biasanya ada di kanan atas)
Scroll ke bawah, cari menu Pages di sidebar kiri
Pada bagian "Source", pilih Deploy from a branch
Pilih branch main (atau site sesuai konfigurasi preferensimu) dan folder / (root)
Klik tombol Save

Selamat! Situsmu sekarang sudah online dan bisa diakses di:
https://usernamekamu.github.io/LayarKosong

Proses deployment biasanya butuh 1-3 menit. Kalau sudah selesai, kamu bakal dapat notifikasi dan bisa langsung buka situsmu!

Tahap 3: Produksi (Membuat Konten)

Oke, sekarang kita masuk ke bagian seru: ngisi konten! Tapi sebelum itu, kita perlu bersih-bersih dulu dan aktifkan fitur otomasi yang keren banget.

1. Bersihkan Konten Lama

Repository yang baru di-fork masih punya file-file contoh. Kita perlu hapus dulu supaya situsmu bersih dan siap diisi konten fresh dari kamu:

Hapus semua isi di dalam folder artikel/ (file-file HTML lama)
Hapus seluruh gambar di dalam folder img/ (gambar-gambar demo)

Caranya: Bisa langsung di GitHub web interface (klik file → klik ikon sampah), atau kalau udah clone ke komputer, hapus lewat file manager biasa.

Hati-hati: Jangan hapus folder-nya, cuma isinya aja! Foldernya tetap harus ada supaya sistem otomasi bisa jalan dengan baik.

2. Aktifkan GitHub Actions

Ini adalah fitur super keren yang bikin hidup kamu jauh lebih mudah! GitHub Actions adalah sistem otomasi yang bakal:

Otomatis memindahkan artikel dari folder staging ke folder publikasi
Generate sitemap dan feed RSS secara otomatis
Submit URL baru ke search engine (IndexNow)
Maintenance rutin harian untuk optimasi situs

Sayangnya, secara default, GitHub bakal matiin fitur Actions di repository hasil fork (demi keamanan). Jadi kita harus aktifkan manual:

Masuk ke tab Actions di repository kamu
Kamu bakal lihat banner kuning dengan tombol hijau
Klik tombol hijau bertuliskan "I understand my workflows, go ahead and enable them"
Semua workflow otomatis sekarang aktif!

3. Mulai Menulis (Workflow Otomatis)

Nah, di sinilah keajaiban terjadi! Sistem Layar Kosong punya konsep unik: folder staging dan folder publikasi. Kenapa begitu? Supaya kamu bisa nulis draft dulu sebelum publish, dan biar sistem bisa proses artikel otomatis (misalnya generate metadata, optimasi SEO, dll).

Alur Kerja Publikasi Artikel

Buat file HTML artikel barumu. Bisa pakai text editor kesukaan (VS Code, Sublime, Notepad++, dll)
Upload ke folder artikelx/ (perhatikan ada huruf 'x' di belakang). Ini folder staging - tempat artikel "masak" dulu sebelum publish
Commit dan Push perubahanmu ke GitHub
Biarkan Action Bekerja: Sistem otomatis (workflow) bakal:
- Deteksi file baru di artikelx/
- Proses dan optimasi file
- Pindahkan ke folder artikel/ yang siap tayang
- Update sitemap dan feed
- Submit ke search engine
Artikel Terbit! Dalam 1-2 menit, artikel kamu sudah online dan bisa diakses!

Pro Tip: Kamu bisa cek progress Action di tab "Actions". Lihat status real-time proses otomasi kamu - sangat memuaskan melihat semuanya berjalan sendiri!

Selesai! Halaman pertamamu sudah terbit. Ulangi langkah ini untuk artikel-artikel berikutnya. Gampang kan? Tinggal fokus nulis, sisanya otomatis!

Tahap 4: Personalisasi & Konfigurasi

Setelah uji coba sukses dan artikel pertama udah terbit, sekarang saatnya mengklaim situs ini menjadi milikmu sepenuhnya! Kita perlu ubah semua informasi default supaya mencerminkan identitas kamu dan situsmu.

Penting: Personalisasi ini sangat krusial untuk SEO, branding, dan user experience. Jangan skip tahap ini ya!

Folder `ext/`

Folder ini berisi berbagai file konfigurasi eksternal yang dipakai di seluruh situs. Sesuaikan URL dan nama domain pada seluruh file di dalam folder ini. Biasanya kamu perlu ganti domain dari dalam.web.id ke domain kamu sendiri.

File-file Penting di Root (Wajib Diubah)

Ini adalah file-file yang ada di folder utama (root) repository. Masing-masing punya fungsi penting, jadi pastikan kamu edit dengan teliti:

404.html - Halaman error saat pengunjung buka URL yang tidak ada. Customize pesan errornya biar lebih friendly!
BingSiteAuth.xml - File verifikasi untuk Bing Webmaster Tools. Ganti dengan kode verifikasi dari Bing kamu.
CODE_OF_CONDUCT.md - Kode etik repository. Atur aturan main di halaman kamu.
data-deletion-form.html & data-deletion.html - Halaman untuk handle permintaan penghapusan data user (penting untuk compliance GDPR/privacy).
disclaimer.html & disclaimer.md - Halaman disclaimer/penafian situs. Penting buat melindungi kamu secara legal.
favicon.ico, favicon.png, favicon.svg - Icon situs yang muncul di tab browser. Bikin yang unik biar memorable!
feed.html - Halaman RSS Feed untuk konten terbaru. Berguna banget buat pembaca setia yang pakai feed reader.
img.html - Halaman galeri gambar. Customize layout dan tampilannya sesuai selera.
index.html - Halaman utama/homepage. Ini adalah first impression situsmu - bikin semenarik mungkin!
robots.txt - Instruksi untuk crawler/bot search engine. Atur mana yang boleh di-crawl, mana yang tidak.
search.html - Halaman pencarian internal. Bantu pengunjung cari konten di situsmu dengan mudah.
sitemap.html - Peta situs versi HTML (user-friendly). Beda sama sitemap.xml yang buat search engine.
thumbnail.jpg, thumbnail.png, thumbnail.webp - Gambar preview saat link situsmu di-share di sosial media (Open Graph). Bikin yang eye-catching!

Checklist Konfigurasi

Gunakan checklist ini supaya kamu tidak ada yang kelewat:

Ganti semua URL dari dalam.web.id ke domain kamu
Update informasi kontak (email, sosial media, dll)
Update metadata (title, description, keywords) di semua halaman
Sesuaikan warna, logo, dan branding sesuai identitas kamu
Test semua link internal - pastikan tidak ada yang broken
Verifikasi sitemap.html dan robots.txt sudah benar
Upload favicon dan thumbnail custom kamu
Test responsiveness di mobile dan desktop
Submit sitemap ke Google Search Console dan Bing Webmaster

Jangan terburu-buru! Proses konfigurasi ini penting banget. Lebih baik luangkan waktu 1-2 jam untuk ngatur semuanya dengan benar daripada harus bolak-balik edit nanti.

Domain Custom (Opsional tapi Keren!)

Secara default, situsmu akan accessible di usernamekamu.github.io. Tapi kalau kamu punya domain sendiri (misalnya situskeren.com), kamu bisa pasang juga! Ini bikin situsmu terlihat lebih profesional dan gampang diingat.

Cara Setup Domain Custom

1. Di GitHub:

Buat file baru namanya CNAME (huruf besar semua, tanpa ekstensi) di root repository
Isi dengan nama domain kamu, contoh: situskeren.com (tanpa https://, tanpa www)
Commit dan push

2. Di Provider Domain:

Masuk ke dashboard provider domain kamu (misalnya Cloudflare, Namecheap, GoDaddy, dll), lalu atur DNS:

Opsi A: Pakai A Record (Recommended)

Type:
A:
Name: @ (atau kosongkan)
Value: 185.199.108.153
 185.199.109.153
 185.199.110.153
 185.199.111.153

Opsi B: Pakai CNAME Record

Type: CNAME
Name: www
Value: usernamekamu.github.io

Untuk subdomain (misalnya blog.situskeren.com):

Type: CNAME
Name: blog
Value: usernamekamu.github.io

Bonus: GitHub Pages otomatis kasih HTTPS/SSL gratis buat custom domain kamu! Jadi situsmu aman dan trusted.

Sabar ya! DNS propagation butuh waktu 1-48 jam (biasanya cuma 1-2 jam kok). Setelah itu domain kamu bakal otomatis redirect ke situs GitHub Pages kamu.

Selamat! Kamu Berhasil!

Kalau kamu udah sampai di sini dan mengikuti semua langkah, berarti situsmu sekarang sudah online, cepat, dan siap ramaikan dunia maya!

Langkah selanjutnya:

Mulai bikin konten berkualitas secara konsisten
Monitor traffic pakai Google Analytics
Optimize SEO dan performa situs
Promosikan situsmu di sosial media
Build komunitas dan engage dengan pembaca

Happy blogging!

Butuh Bantuan?

Stuck di suatu langkah? Ada error yang bikin bingung? Atau cuma pengen diskusi dan sharing tips? Jangan ragu untuk reach out! Komunitas Layar Kosong sangat welcome dan siap bantu.

Tempat Diskusi & Support

Mari kita ngobrol santai di GitHub Discussions! Tanya apa aja, share pengalaman, atau kasih saran untuk improve Layar Kosong. Semua orang welcome!

Join Diskusi di GitHub

Tips Bertanya:

Jelaskan masalahmu sedetail mungkin (error message, screenshot, dll)
Sebutkan langkah-langkah yang udah kamu coba
Mention OS dan browser yang kamu pakai
Jangan malu bertanya - tidak ada pertanyaan bodoh!

Kamu juga bisa contribute! Found a bug? Punya ide fitur keren? Atau pengen improve dokumentasi? Pull request always welcome!

Lisensi

Layar Kosong adalah halaman open source yang bebas digunakan siapa aja. Untuk informasi lengkap tentang lisensi, silakan cek file LICENSE di repository.

100% Free Open Source Public Domain

Klik untuk Status Teknis & Badge ⚙️

Status Halaman

Pembaruan & Otomatisasi

Workflows Aktif:

Kontributor

Terima kasih sebesar-besarnya untuk semua yang telah berkontribusi pada halaman Layar Kosong ini! Baik itu code, dokumentasi, bug report, ide, atau sekadar moral support - semuanya sangat berarti!

Ingin jadi kontributor juga? Check out contribution guide dan mulai contribute sekarang!