Cara Hosting Web di Github

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.

Baca Juga : Cara Upgrade Hosting Hostinger dengan Mudah dan Cepat

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.

Baca Juga : Cara Hosting Google Site dengan Mudah dan Santai

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.

Baca Juga : Cara Upload ke Google Drive dengan Mudah dan Praktis

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.