Jasa Web Bandung | Jasa SEO Bandung | Jasa Desain Bandung

Halo teman-teman!

Pada kesempatan kali ini, kita akan belajar bagaimana cara hosting website yang sudah kita buat sebelumnya secara gratis menggunakan GitHub. Dengan melakukan hosting, website kamu bisa diakses oleh siapa saja dari berbagai belahan dunia. Bahkan, temanmu yang tinggal di negara lain juga bisa melihat website milikmu tanpa hambatan. Penasaran bagaimana caranya? Yuk, kita bahas satu per satu!

Apa Itu Web Hosting?

Sebelum kita masuk ke pembahasan teknis, penting untuk memahami dulu apa itu web hosting. Secara sederhana, web hosting adalah proses menyimpan berkas-berkas website (seperti file HTML, CSS, JavaScript, gambar, dan berkas pendukung lainnya) di dalam sebuah web server yang terhubung dengan internet. Dengan cara ini, orang lain bisa membuka website kita kapan pun dan di mana pun selama mereka terhubung ke internet.

Kalau saat ini kamu hanya menyimpan file HTML di komputermu sendiri, website tersebut hanya bisa diakses secara lokal, atau biasa disebut local development. Ini tentu membatasi akses karena hanya komputer tersebut yang dapat menampilkan halaman website. Untuk membuat website-mu bisa diakses banyak orang, kita perlu memindahkan file tersebut ke server agar website benar-benar live dan siap dikunjungi siapa saja.

Mengapa Memilih GitHub untuk Hosting?

Ada banyak pilihan layanan hosting di internet, mulai dari yang gratis hingga berbayar. Namun, GitHub menawarkan beberapa kelebihan yang menjadikannya pilihan menarik, khususnya bagi kita yang baru belajar dan tidak mau mengeluarkan biaya tambahan. Berikut beberapa alasannya:

1. Gratis: GitHub mengizinkan kita untuk menyimpan kode sumber dan file-file proyek tanpa biaya. Ini sangat cocok bagi pemula atau pelajar.
2. Kemudahan Kolaborasi: GitHub menyediakan version control system berbasis Git. Artinya, kamu bisa bekerja sama dengan banyak orang dalam satu proyek, sekaligus melacak perubahan kode dengan mudah.
3. GitHub Pages: Fitur ini memungkinkan kita untuk melakukan hosting website statis (HTML, CSS, JavaScript) secara langsung dari repository GitHub kita. Prosesnya relatif mudah dan tidak membutuhkan konfigurasi server yang rumit.
4. Portofolio Online: Bagi yang ingin memamerkan hasil kerja atau portofolio, GitHub Pages adalah cara praktis untuk memperlihatkan kemampuanmu di bidang web development. Kamu bisa membagikan tautan website-mu ke teman, klien, atau perekrut kerja dengan mudah.

Dengan segala kelebihan tersebut, tidak heran kalau GitHub menjadi pilihan favorit banyak pengembang, baik yang sudah profesional maupun pemula.

Langkah-Langkah Hosting Website di GitHub

Berikut ini adalah panduan yang dapat kamu ikuti untuk mengunggah website ke GitHub dan menampilkannya secara online.

1. Buat Akun GitHub

• Jika kamu belum memiliki akun, kunjungi github.com dan daftar menggunakan email.
• Setelah mendaftar, jangan lupa untuk memverifikasi email dan lengkapi profilmu.
• Jika sudah punya akun GitHub, kamu bisa langsung masuk dengan mengklik Sign In.

2. Buat Repository Baru

1. Setelah masuk ke GitHub, cari tombol "+" di pojok kanan atas halaman GitHub.
2. Klik tombol New Repository untuk membuat repository baru.
3. Beri nama repository sesuai kebutuhan, misalnya html-portfolio atau personal-website.
4. Pastikan repository dibuat Public agar semua orang dapat mengakses file website.
5. Centang opsi Add a README file untuk menambahkan file README secara otomatis.
6. Terakhir, klik Create Repository.

Repository inilah yang nantinya menjadi tempat kita menyimpan seluruh file website.

3. Unggah File Website

Setelah repository berhasil dibuat, kita perlu mengunggah file HTML, CSS, JavaScript, dan file lainnya ke dalam repository tersebut. Langkahnya adalah sebagai berikut:

1. Masuk ke halaman repository yang baru saja dibuat.
2. Klik tombol Add file, lalu pilih Upload files.
3. Seret (drag) semua file dari folder proyek web-mu ke area unggah di GitHub.
   • Sebagai catatan, sebaiknya unggah hanya isi folder, bukan folder itu sendiri.
4. Setelah file berhasil diunggah, klik Commit changes untuk menyimpan file ke repository.

Ingat, usahakan nama file utamamu adalah index.html, karena GitHub Pages akan menampilkan file ini sebagai halaman utama website.

4. Atur GitHub Pages

Setelah mengunggah file, kita perlu mengaktifkan GitHub Pages untuk repository tersebut agar website bisa diakses. Berikut caranya:

1. Masuk ke tab Settings di repository GitHub (biasanya ada di bagian atas halaman).
2. Gulir ke bawah sampai menemukan bagian Pages (di GitHub terbaru, terkadang terletak di sidebar kiri di bawah menu “Code and automation” atau “Pages”).
3. Di bagian Branch, ubah dari “None” menjadi main.
4. Klik Save atau Save Changes untuk mengaktifkan GitHub Pages.

Setelah langkah ini selesai, GitHub akan memproses build website milikmu. Prosesnya hanya memakan waktu beberapa menit saja.

5. Tunggu Hingga Website Aktif

Dalam beberapa saat, GitHub akan menampilkan alamat atau URL website-mu di bagian GitHub Pages. Biasanya formatnya seperti ini:

https://username.github.io/html-portfolio

Di sinilah kamu bisa melihat website-mu yang sudah live. Jika URL tersebut belum muncul atau belum aktif, tunggu beberapa menit dan refresh halaman. Terkadang, GitHub membutuhkan waktu untuk memproses dan menyebarkan (deploy) website tersebut.

Tips dan Trik

1. Gunakan index.html sebagai File Utama
   Pastikan file utama berisi struktur HTML utamamu bernama index.html. Inilah file yang akan secara otomatis dibuka oleh GitHub Pages.

2. Perhatikan Ukuran Gambar
   Jika website-mu memuat banyak gambar, cobalah untuk mengecilkan (kompres) gambar tersebut sebelum diunggah. Hal ini akan membantu website terbuka lebih cepat saat diakses pengunjung.

3. Struktur Folder yang Rapi
   Pisahkan file CSS, JavaScript, dan gambar ke dalam folder masing-masing (misalnya css, js, dan images). Struktur yang rapi akan memudahkanmu dalam melakukan perubahan di kemudian hari.

4. Pantau Menu Settings > Pages
   Jika website tidak langsung muncul, coba refresh halaman Settings > Pages beberapa kali. Kadang-kadang, GitHub butuh waktu lebih lama untuk deploy.

5. Gunakan Fitur Custom Domain (opsional)
   Jika suatu saat kamu ingin memakai domain sendiri (misalnya, namamu.com), GitHub Pages juga mendukung custom domain. Namun, ini membutuhkan pengaturan DNS dan pembelian domain terpisah.

Bagikan Website Anda!

Setelah semuanya selesai, jangan lupa untuk membagikan URL website-mu ke teman, keluarga, atau rekan kerja. Ini adalah bukti nyatamu bahwa kamu sudah berhasil membuat website yang dapat diakses banyak orang. Semakin sering website-mu dikunjungi, semakin besar pula kesempatanmu mendapatkan masukan berharga untuk pengembangan berikutnya.

Selain itu, website yang sudah aktif di GitHub Pages juga dapat dijadikan portofolio online. Apabila kamu sedang mencari pekerjaan di bidang web development atau desain, menampilkan website ini kepada recruiter atau klien potensial bisa menjadi nilai tambah. Mereka dapat melihat langsung hasil kerjamu dan menilai seberapa jauh kemampuanmu dalam membangun tampilan maupun fungsionalitas website.

Selanjutnya

Kita sudah berhasil membuat website online menggunakan GitHub Pages. Langkah-langkahnya pun tidak sulit, bukan? Pada pelajaran atau tutorial berikutnya, kita bisa melanjutkan dengan mempelajari CSS (Cascading Style Sheets) untuk mempercantik tampilan website. Dengan CSS, kita bisa mengubah warna, mengatur tata letak, dan menambahkan berbagai efek visual yang menarik. Website yang terlihat profesional tentu akan membuat pengunjung betah, dan pada akhirnya meningkatkan kredibilitas kamu sebagai pembuatnya.

Jika kamu sudah menguasai HTML dan CSS, maka langkah berikutnya adalah mencoba JavaScript untuk menambahkan interaktivitas pada website. Semoga tutorial singkat ini bermanfaat dan membantu kamu memahami cara hosting website secara gratis dengan GitHub.

Selamat bereksperimen, dan sampai jumpa di pelajaran selanjutnya! Jangan lupa terus belajar dan bereksplorasi dengan berbagai fitur menarik yang ditawarkan GitHub. Semoga sukses!