Hai, Salam Sobat Lintasyogya! Sebagai seorang pengembang web, kamu pasti ingin meng-hosting website kamu. Salah satu cara yang bisa kamu lakukan adalah dengan menggunakan Github Pages. Berikut adalah 20 Consecutive headings tentang cara hosting web di Github.
1. Membuat Repository Baru
Hal pertama yang harus kamu lakukan adalah membuat repository baru di Github. Caranya cukup mudah, kamu hanya perlu login ke akun Github kamu, lalu klik tombol “New Repository”.
1.1. Isi Nama Repository
Pertama-tama, kamu perlu mengisi nama repository. Kamu bisa menggunakan nama yang sesuai dengan website kamu atau bisa juga menggunakan username Github kamu.
1.2. Tentukan Hak Akses Repository
Kemudian, kamu perlu menentukan hak akses repository. Ada dua jenis hak akses yang bisa kamu pilih, yaitu Public dan Private. Jika kamu memilih Public, repository akan bisa dilihat oleh siapa saja. Namun, jika kamu memilih Private, hanya kamu dan orang-orang yang kamu undang yang bisa melihat repository.
1.3. Tambahkan Deskripsi
Setelah itu, kamu bisa menambahkan deskripsi repository. Deskripsi ini akan membantu orang lain untuk memahami tentang repository kamu.
1.4. Pilih Lisensi
Kamu juga bisa memilih lisensi untuk repository kamu. Lisensi ini akan memberikan hak penggunaan dan distribusi kepada orang lain. Kamu bisa memilih salah satu dari beberapa jenis lisensi yang tersedia.
1.5. Buat Repository
Setelah semua detail sudah diisi, klik tombol “Create Repository” untuk membuat repository baru. Repository kamu sudah siap digunakan.
2. Membuat Branch Baru
Setelah repository kamu dibuat, langkah selanjutnya adalah membuat branch baru. Branch ini akan digunakan untuk menyimpan website kamu.
2.1. Klik Tombol Branch
Buka repository kamu dan klik tombol “Branch”.
2.2. Isi Nama Branch
Isi nama branch baru kamu. Kamu bisa menggunakan nama “gh-pages” atau nama branch lainnya.
2.3. Buat Branch
Setelah itu, klik tombol “Create Branch”. Branch baru kamu sudah berhasil dibuat.
3. Persiapkan File HTML
Langkah selanjutnya adalah menyiapkan file HTML untuk website kamu. Kamu bisa membuat file HTML dari awal atau menggunakan template yang sudah tersedia.
3.1. Buat File HTML
Jika kamu ingin membuat file HTML dari awal, buka text editor dan buat file baru. Kemudian, isi file tersebut dengan kode-kode HTML yang kamu butuhkan.
3.2. Gunakan Template
Jika kamu ingin menggunakan template, kamu bisa mencari template yang kamu suka di situs-situs seperti Bootstrap atau Github Pages Themes. Kemudian, download template tersebut dan edit sesuai dengan kebutuhan kamu.
4. Push File HTML ke Github
Setelah file HTML sudah siap, langkah selanjutnya adalah melakukan push file tersebut ke Github.
4.1. Buka Repository
Buka repository yang sudah kamu buat sebelumnya.
4.2. Klik Tombol Upload Files
Klik tombol “Upload Files” untuk meng-upload file HTML yang sudah kamu buat.
4.3. Pilih File HTML
Pilih file HTML yang sudah kamu buat di langkah sebelumnya.
4.4. Commit Changes
Setelah file berhasil di-upload, kamu perlu melakukan commit changes dengan menambahkan pesan commit dan klik tombol “Commit Changes”.
5. Aktifkan Github Pages
Langkah selanjutnya adalah mengaktifkan Github Pages. Dengan mengaktifkan Github Pages, website kamu sudah bisa diakses di internet.
5.1. Masuk ke Settings
Masuk ke menu “Settings” di repository kamu.
5.2. Cari Bagian Github Pages
Cari bagian “Github Pages” di menu “Settings”.
5.3. Pilih Branch
Pilih branch yang sudah kamu buat sebelumnya sebagai source untuk Github Pages.
5.4. Simpan Perubahan
Setelah itu, klik tombol “Save” untuk menyimpan perubahan.
6. Cek Website Kamu
Setelah Github Pages sudah diaktifkan, kamu bisa cek website kamu di internet dengan mengunjungi URL yang sudah ditentukan.
6.1. Buka URL
Buka URL yang sudah ditentukan di bagian Github Pages. URL ini biasanya berupa “username.github.io/nama-repository”.
6.2. Cek Tampilan
Cek tampilan website kamu di browser. Jika berhasil, website kamu sudah bisa diakses di internet.
7. Menggunakan Custom Domain
Jika kamu ingin menggunakan custom domain untuk website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
7.1. Beli Domain
Pertama-tama, kamu perlu membeli domain terlebih dahulu. Kamu bisa membeli domain di registrar seperti GoDaddy atau Namecheap.
7.2. Buat CNAME File
Buat file dengan nama “CNAME” di repository kamu. Isi file tersebut dengan domain yang sudah kamu beli.
7.3. Masukkan DNS Record
Masukkan DNS record di pengaturan domain kamu. DNS record ini akan menghubungkan domain kamu dengan website di Github Pages.
7.4. Simpan Perubahan
Setelah semua setting sudah dilakukan, simpan perubahan dan tunggu beberapa saat hingga domain kamu bisa digunakan.
8. Menambahkan CSS dan Javascript
Untuk membuat website kamu lebih menarik, kamu bisa menambahkan CSS dan Javascript. Berikut adalah langkah-langkahnya.
8.1. Buat File CSS dan Javascript
Buat file CSS dan Javascript yang kamu butuhkan di website kamu.
8.2. Upload File CSS dan Javascript
Upload file CSS dan Javascript tersebut ke repository kamu.
8.3. Tambahkan Link CSS dan Javascript ke HTML
Tambahkan link CSS dan Javascript ke file HTML kamu. Link ini akan menghubungkan file CSS dan Javascript dengan file HTML.
9. Menambahkan Gambar
Jika kamu ingin menambahkan gambar ke website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
9.1. Buat Folder Images
Buat folder “images” di repository kamu.
9.2. Upload Gambar
Upload gambar yang ingin kamu tambahkan ke folder “images”.
9.3. Tambahkan Tag Gambar ke HTML
Tambahkan tag gambar ke file HTML kamu untuk menampilkan gambar tersebut di website.
10. Menggunakan Jekyll
Jekyll adalah sebuah generator website statis yang bisa membantumu membuat website dengan cepat dan mudah. Berikut adalah cara menggunakan Jekyll di Github Pages.
10.1. Aktifkan Jekyll
Aktifkan Jekyll di Github Pages dengan menambahkan file “_config.yml” ke repository kamu.
10.2. Gunakan Theme Jekyll
Gunakan salah satu theme Jekyll yang sudah tersedia di Github Pages Themes.
10.3. Sesuaikan Konten
Sesuaikan konten website kamu dengan theme Jekyll yang sudah kamu pilih.
11. Menggunakan Subdomain
Jika kamu ingin menggunakan subdomain untuk website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
11.1. Buat Subdomain
Buat subdomain di registrar domain kamu.
11.2. Buat CNAME File
Buat file “CNAME” di repository kamu. Isi file tersebut dengan subdomain yang sudah kamu buat.
11.3. Masukkan DNS Record
Masukkan DNS record di pengaturan domain kamu untuk menghubungkan subdomain kamu dengan website di Github Pages.
12. Menggunakan SSL
SSL adalah sebuah protokol keamanan yang digunakan untuk mengamankan website dari serangan hacker. Berikut adalah cara menggunakan SSL di Github Pages.
12.1. Aktifkan SSL
Aktifkan SSL di Github Pages dengan menambahkan file “CNAME” yang berisi domain kamu ke repository kamu.
12.2. Masukkan DNS Record
Masukkan DNS record di pengaturan domain kamu untuk mengaktifkan SSL.
12.3. Tunggu Konfirmasi
Tunggu konfirmasi dari Github Pages bahwa SSL sudah berhasil diaktifkan di website kamu.
13. Membuat Blog dengan Jekyll
Jika kamu ingin membuat blog dengan Jekyll di Github Pages, kamu bisa mengikuti langkah-langkah berikut ini.
13.1. Gunakan Theme Jekyll
Gunakan salah satu theme Jekyll yang sudah tersedia di Github Pages Themes.
13.2. Buat File Markdown
Buat file markdown untuk setiap artikel blog yang ingin kamu tulis.
13.3. Sesuaikan Konten
Sesuaikan konten artikel blog kamu dengan theme Jekyll yang sudah kamu pilih.
14. Menambahkan Form Kontak
Jika kamu ingin menambahkan form kontak ke website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
14.1. Gunakan Formspree
Gunakan Formspree untuk membuat form kontak di website kamu.
14.2. Buat File HTML
Buat file HTML untuk form kontak kamu.
14.3. Tambahkan Action Formspree
Tambahkan action Formspree ke file HTML kamu untuk menghubungkan form kontak dengan Formspree.
15. Menggunakan Google Analytics
Jika kamu ingin menggunakan Google Analytics untuk melacak pengunjung website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
15.1. Buat Akun Google Analytics
Buat akun Google Analytics dan dapatkan ID tracking kamu.
15.2. Tambahkan Tag Google Analytics
Tambahkan tag Google Analytics ke file HTML kamu untuk melacak pengunjung website kamu.
16. Menggunakan Disqus untuk Komentar
Jika kamu ingin menggunakan Disqus untuk komentar di website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
16.1. Buat Akun Disqus
Buat akun Disqus dan dapatkan ID situs kamu.
16.2. Tambahkan Tag Disqus
Tambahkan tag Disqus ke file HTML kamu untuk menampilkan komentar di website kamu.
17. Menggunakan Google Maps
Jika kamu ingin menambahkan Google Maps ke website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
17.1. Dapatkan API Key Google Maps
Dapatkan API key Google Maps dari Google Cloud Platform.
17.2. Tambahkan Script Google Maps
Tambahkan script Google Maps ke file HTML kamu untuk menampilkan Google Maps di website kamu.
17.3. Tambahkan CSS Google Maps
Tambahkan CSS Google Maps ke file HTML kamu untuk menampilkan tampilan yang bagus di Google Maps.
18. Menambahkan Video
Jika kamu ingin menambahkan video ke website kamu, kamu bisa mengikuti langkah-langkah berikut ini.
18.1. Upload Video ke Youtube
Upload video ke Youtube dan dapatkan embed code.