Skip to content
View frijal's full-sized avatar
🏠
working from home
🏠
working from home

Block or report frijal

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don't include any personal information such as legal names or email addresses. Markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
frijal/README.md

πŸš€ 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).
  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:

License: Unlicense Public Domain Free 100% Open Source Website HTTPS Enabled

GitHub Pages Google Drive Release Continuous Last Commit

Otomatisasi & CI/CD:

πŸ”„ Proses ArtikelX ☒️ Build and Generate Site Files ⚠️ Copy ke Branch Site Cloudflare IndexNow Daily Submit Ping Feeds & Sitemap πŸ”† Pengecekan & Laporan Konten Harian

GitHub Actions GitHub Bot GitHub Cron Action User Codespaces

Stack:

HTML5 CSS3 JavaScript Node.js npm pnpm pipx

Format Data:

Markdown YAML JSON XML

Sosial Media:

Twitter/X Threads TikTok LinkedIn Facebook Instagram Gist

Dukungan AI:

Gemini ChatGPT Copilot

Popular repositories Loading

  1. LayarKosong LayarKosong Public template

    silakan Use this template, dan fork repo ini, cukup masukan file html aja ke dalam folder artikelX, ntar bisa otomatis bikin daftar isi sendiri, sambil aku ngumpulin artikel ketikan jaman ngeblog d…

    HTML 1

  2. frijal.github.io frijal.github.io Public template

    silakan Use this template, dan fork repo ini, cukup masukan file html aja ke dalam folder artikelX, ntar bisa otomatis bikin daftar isi sendiri. repo ada di LayarKosong. klik url dibawah ini. πŸ™‚

    HTML

  3. mentarigroup mentarigroup Public template

    HTML

  4. OrgChartJS OrgChartJS Public

    Forked from BALKANGraph/OrgChartJS

    OrgChart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.

  5. org-chart org-chart Public

    Forked from bumbeishvili/org-chart

    Highly customizable org chart. Integrations available for Angular, React, Vue

    HTML

  6. vue-org-chart vue-org-chart Public

    Forked from Hoogkamer/vue-org-chart

    Manage and publish your interactive organization chart (orgchart), 100% free and no install required: just copy a folder to any location

    Vue