cara-membuat-website-dengan-hosting-gratis-di-github-pages

Cara Membuat Website dengan Hosting Gratis di GitHub Pages

Pernahkah kalian melihat sebuah website dengan sub-domain .github.io ? Misalnya seperti tutorialpemrogramancom.github.io. Untuk kalian yang belum mengetahuinya, itu adalah GitHub Pages. Dalam tutorial kali ini, saya akan memberikan penjelasan mengenai Cara Membuat Website dengan Hosting Gratis di GitHub Pages.

- Advertisements -

GitHub Pages adalah layanan hosting website gratis yang dapat digunakan untuk meng-hosting website ataupun project kalian. GitHub Pages dapat kalian manfaatkan juga untuk membuat sebuah website pribadi. Tetapi, GitHub Pages hanya mendukung website yang bersifat statis saja. GitHub Pages ini dapat digunakan untuk akun personal ataupun akun organisasi.

Cara Membuat Website dengan Hosting Gratis di GitHub Pages

Pendahuluan

Untuk mengikuti tutorial ini, pastikan kalian telah memiliki akun GitHub. Jika belum, kalian dapat membuatnya secara gratis melalui tautan berikut.

Kemudian, pastikan juga kalian telah men-install Git pada PC kalian agar kita dapat mengakses repository GitHub melalui Git Terminal. Untuk men-download-nya, silakan klik tautan berikut. Selain menggunakan Git Terminal, kalian juga bisa menggunakan Git for PC. Tetapi, dalam tutorial ini saya hanya akan menggunakan Git Terminal.

Jika kalian tidak mengerti tentang HTML ataupun Cara Membuat Website, kalian tidak perlu khawatir, kalian dapat membuat website dengan cara yang cukup mudah.

Baca juga:  Cara Deploy Azure Web App menggunakan GitHub

Terdapat 2 cara yang dapat digunakan untuk mengisi konten pada website yang akan kita buat dalam tutorial ini. Pertama, untuk teman-teman yang tidak mengerti cara membuat website, kalian dapat menggunakan fitur Automatic Page Generator. Kedua, untuk kalian yang sudah paham dengan HTML dan lain sebagainya, kalian dapat membuat website-nya sendiri ataupun menggunakan berbagai macam pilihan template yang tersedia di internet, seperti template html yang dibuat menggunakan Bootstrap.

Membuat Repository Baru

Silakan login ke dalam https://www.github.com/ menggunakan akun yang telah kalian buat sebelumnya. Kemudian, buat repository baru dengan cara klik New Repository.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 1.

Kemudian isikan nama repository dengan format username.github.io. Ganti username tersebut dengan username (personal ataupun organisasi) kalian. Misalkan, tutorialpemrogramancom.github.io. Tambahkan sedikit deskripsi sesuai dengan keinginan kalian. Jika sudah, klik Create repository.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 2.

Apabila repository kalian berhasil dibuat, tampilannya akan seperti gambar di bawah ini.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 3.

Cara 1: Menggunakan Automatic Page Generator

Untuk teman-teman yang tidak mengerti cara membuat website, kalian dapat menggunakan fitur Automatic Page Generator. Dengan menggunakan fitur tersebut, kalian tidak perlu berhadapan dengan script/kode html, cukup fokus pada pengisian kontennya saja. Berikut penjelasannya.

Setelah tampilan kalian seperti pada gambar 3, klik Setting. Scroll ke bagian bawah dan cari tab GitHub Pages. Jika sudah ketemu, silakan klik Launch automatic page generator.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 4.

Selanjutnya, kalian akan diarahkan pada sebuah halaman seperti text editor yang dapat kalian gunakan untuk mengisi konten dari website yang akan kalian buat. Kalian dapat menggunakan text editor tersebut seperti menggunakan Microsoft Word. Hanya saja, pilihan untuk melakukan formatting-nya lebih terbatas.

Baca juga:  Cara Membuat Custom Post Type pada WordPress
cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 5.

Saya asumsikan kalian telah membuat beberapa tulisan untuk ditampilkan, atau jika belum biarkan saja secara default dan kalian dapat mengubahnya nanti. Jika sudah, klik Continue to layouts untuk memilih tema yang sudah disediakan. Kalian akan mendapatkan beberapa tema yang dapat digunakan untuk website yang sudah dibuat. Klik Edit untuk kembali ke halaman sebelumnya, atau klik Publish page untuk men-publish website tersebut.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 6.

Apabila telah selesai, kalian akan kembali diarahkan ke halaman utama repository kalian dan pastikan terdapat notifikasi bahwa situs kalian sudah berhasil dibuat.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 7.

Untuk melakukan editing, kalian dapat kembali ke menu Setting dan klik Launch automatic page generator.

Cara 2: Upload Kode/Script Website

Cara kedua ini dapat digunakan jika teman-teman sekalian sudah membuat website dengan cara coding sendiri ataupun menggunakan template yang tersedia gratis di internet. Berikut penjelasannya.

Setelah kalian membuat repository baru seperti pada gambar 3, klik icon Copy to clipboard pada bagian Quick Setup.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 8.

Selanjutnya buka folder tempat kalian akan menyimpan project kalian yang ingin di-upload, misalkan C:\xampp\htdocs. Klik kanan pada daerah kosong, kemudian pilih Git Bash here.

cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 9.

Jika Git Terminal sudah terbuka, silakan ketikkan perintah di bawah ini, kemudian Enter.

git clone https://github.com/tutorialpemrogramancom/tutorialpemrogramancom.github.io.git

Jika berhasil, pada C:\xampp\htdocs terdapat folder baru dengan nama tutorialpemrogramancom.github.io.

Silakan pindahkan semua file project website yang telah kalian buat ke dalam folder baru tersebut. Kemudian, ketikkan perintah-perintah di bawah ini lalu Enter.

cd username.github.io

Ganti username dengan username kalian, misalkan:

cd tutorialpemrogramancom.github.io

Lanjutkan dengan perintah di bawah ini, kemudian Enter.

git status

Kemudian, ketik perintah di bawah ini, kemudian Enter.

git add .

Jika masih terdapat warning, silakan ulangi perintah di atas, sekali lagi.

git commit -m "Initial commit"
git push origin master

Jika sudah, silakan refresh halaman utama repository kalian. Untuk memastikan website kalian sudah ter-publish, klik Setting dan pastikan kalian mendapatkan notifikasi pada tab GitHub Pages seperti gambar di bawah ini.

Baca juga:  Cara Mengatasi Duplicate Image pada WordPress
cara-membuat-website-dengan-hosting-gratis-di-github-pages
Gambar 10.

Untuk teman-teman yang menggunakan cara pertama, kalian dapat mengikuti cara kedua untuk melakukan editing website secara manual ataupun menggantinya dengan project buatan kalian sendiri.

Seperti yang sudah dijelaskan pada awal artikel, GitHub Pages hanya terbatas untuk pembuatan website statis yang artinya tidak dapat digunakan untuk membuat website yang dapat mengelola data seperti CRUD (Create, Read, Update, Delete).

 

 

Jadi, itulah penjelasan mengenai Cara Membuat Website dengan Hosting Gratis di GitHub Pages. Jika kalian mengalami kesulitan, jangan sungkan untuk menanyakannya kepada kami melalui komentar di akhir artikel. Semoga artikel ini bermanfaat. Terima kasih.

Fadhlillah Ariefianto
Bukan coders, tapi suka coding. Bukan blogger, tapi suka blogging.