Blogger Jateng
Home / Tutorial

Menerapkan Situs Web Pertama Anda dengan Halaman GitHub

Pembuatan dan penyebaran situs web tidak pernah semudah ini dengan munculnya platform seperti GitHub Pages. Platform ini menyediakan cara sederhana dan gratis untuk menghosting situs web statis langsung dari repositori GitHub Anda. GitHub Pages adalah alat yang berharga untuk memamerkan proyek, portofolio, atau dokumentasi, baik Anda seorang pemula maupun pengembang yang sudah berpengalaman. Berikut ini cara memulai penerapan situs web pertama Anda dengan GitHub Pages.

Langkah 1: Membuat akun Github baru dan repositori baru

Jika Anda belum memiliki akun Github, daftar di github.com. Setelah Anda masuk, ikuti langkah-langkah berikut untuk membuat repositori baru:

  1. Pilih “Baru” dari tombol “+ Baru” di bagian kanan atas halaman.
  2. Buat nama untuk repositori Anda (misalnya: “situs web-pertama-saya”).
  3. Kemudian, masukkan deskripsi secara opsional.
  4. Jadikan repositori ini “Publik” untuk memudahkan akses (Anda juga dapat menjadikannya “Pribadi” sesuka Anda).
  5. Centang kotak untuk Membuat repositori dengan file README.
  6. Klik “Buat repositori.”

Repositori Anda sekarang siap untuk menampung berkas-berkas situs web Anda.

sumber: medium.com

Langkah 2: Unggah File Situs Web

Kumpulkan file situs web Anda seperti HTML, CSS, JavaScript, dan aset statis lainnya. Pastikan berkas HTML utama Anda bernama index.html, karena itu akan menjadi berkas default yang disajikan oleh GitHub Pages.

Anda dapat mengunggah file secara langsung ke repositori Anda melalui antarmuka web GitHub:

  1. Buka repositori Anda di Github.
  2. Klik menu tarik-turun di samping “Tambah file” dan pilih “Unggah file.”
  3. Cukup seret dan letakkan berkas situs web Anda atau jelajahi komputer Anda.
  4. Klik “Komit perubahan” untuk melakukan perubahan.
Sebagai alternatif, Anda bisa menggunakan Git dan baris perintah untuk mendorong file Anda:

1. Mengkloning repositori:

git clone https://github.com/your-username/my-first-website.git

2. Salin berkas situs web Anda ke dalam folder repositori.

3. Tambahkan dan komit berkas-berkas tersebut:

git add .
git commit -m "Add website files"

4. Mendorong perubahan ke GitHub:

git push origin main

Langkah 3: Aktifkan Halaman GitHub

Agar situs web Anda dapat dipublikasikan, Anda perlu mengaktifkan Halaman GitHub di pengaturan repositori Anda:

  1. Buka repositori Anda di GitHub.
  2. Klik pada tab “Pengaturan”.
  3. Pilih Fisik “Halaman” dan gulir ke bawah.
  4. Pilih cabang yang berisi indeks Anda di menu tarik-turun “Sumber”. file html (biasanya utama). Sebagai alternatif, tentukan folder jika file Anda berada dalam subdirektori.
  5. Klik “Simpan.”

GitHub akan menghasilkan URL untuk situs web Anda, biasanya dalam format https://your-username.github.io/repository-name/. Mungkin diperlukan beberapa menit agar situs dapat ditayangkan.

Langkah 4: Menguji dan Memperbarui Situs Web Anda

Lihat URL yang diberikan kepada Anda oleh GitHub Pages untuk melihat situs Anda! Pastikan semuanya berfungsi seperti yang diharapkan. Jika Anda perlu melakukan perubahan:

  1. Lakukan pengeditan pada berkas Anda di komputer lokal atau langsung di GitHub.
  2. Membuat dan mendorong perubahan ke repo.
  3. Segarkan peramban Anda jika Anda tidak melihat pembaruan.

Situs ini secara otomatis diperbarui setiap kali Anda melakukan push ke repositori.

Kiat untuk Sukses

  • Domain Khusus: Anda hanya perlu menambahkan nama domain Anda dalam file CNAME di situs GitHub Pages dan mengonfigurasi pengaturan DNS domain Anda.
  • Tema: Jika Anda menghosting dokumentasi atau portofolio, Anda dapat mengakses tema bawaan yang terdapat dalam pengaturan GitHub Pages.
  • Keamanan: Gunakan. gitignore yang akan memastikan bahwa file sensitif tidak akan diunggah ke repositori.

Kesimpulan

Menerapkan situs web pertama Anda dengan GitHub Pages adalah pengalaman yang memberdayakan, menyediakan cara gratis dan efisien untuk berbagi proyek Anda dengan dunia. Ketika Anda semakin nyaman dengan platform ini, Anda bisa menjelajahi fitur-fitur canggih seperti integrasi Jekyll, domain kustom, dan alur kerja otomatis. Mulailah dari yang kecil, bereksperimen, dan nikmati perjalanan pengembangan dan penerapan web.