Mengupload project ke GitHub

Panduan Lengkap Membuat dan Hosting Situs Web Statis di GitHub Pages

GitHub Pages adalah layanan hosting statis yang disediakan oleh GitHub. Dengan menggunakan GitHub Pages, Anda dapat dengan mudah membuat situs web statis dan meng-hostingnya secara gratis. Berikut ini langkah-langkah lengkapnya:

Langkah 1: Membuat Repository

1. Masuk atau Buat Akun GitHub

Jika Anda belum memiliki akun GitHub, buat satu di GitHub. Jika sudah memiliki, masuk ke akun Anda.

2. Buat Repository Baru

  • Di dashboard GitHub Anda, klik tombol "New" di sudut kanan atas atau navigasikan ke https://github.com/new.
  • Beri nama repository Anda. Secara konvensi, untuk hosting halaman web, Anda dapat menamainya sebagai username.github.io, di mana username adalah nama pengguna GitHub Anda.
  • Pilih opsi untuk membuat repository publik atau pribadi sesuai kebutuhan Anda. Klik tombol "Create repository".

Langkah 2: Meng-hosting File di Repository

1. Persiapkan Proyek Anda

Buat atau siapkan proyek web Anda secara lokal di komputer Anda. Pastikan proyek tersebut memiliki file index.html atau index.js yang akan menjadi halaman utama situs web Anda.

2. Setting GitHub Pages

  • Di halaman repository GitHub Anda, klik tab "Settings".
  • Scroll ke bawah hingga menemukan bagian "GitHub Pages".
  • Di bawah "Source", pilih opsi "master branch" atau "main branch".
  • Klik "Save" atau "Save Changes".
  • Setelah beberapa saat, GitHub Pages akan aktif dan situs web Anda akan dapat diakses di https://username.github.io.

Contoh Repository dan Hasil Hosting

Contoh Repository: https://github.com/Mikel3333/calculator.github.io
Hasil hosting: https://mikel3333.github.io/calculator.github.io/

Catatan: Jika link tidak muncul, terus refresh hingga link muncul.

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Modul 4, 5, 7, 8

Gambar
Modul 4   Mini project dengan menggunakan javascript: 1. Konversi celscius ke derajat < body >     < script src = "script.js" ></ script >     < h2 > Project 1 </ h2 >     < button onclick = "suhu()" > Convert </ button >     < p id = "total" ></ p > </ body > < script > function suhu() {     var cel = prompt ( "Masukan suhu farenheit" )     var far = ( cel - 32 )* 5 / 9     if ( isNaN ( far )){         alert ( "tidak valid" )     } else {         document . getElementById ( "total" ). innerHTML = "jadi " + cel + " derajat farenheit adalah " + far.toFixed(2) + " derajat celcius"     }   } </script> Hasil dari kode tersebut adalah 2. Membuat sebuah list, dan sebuah button. Jika button diklik, setiap item list yang genap akan berubah menjadi biru dan tebal.  ...
Baca selengkapnya

Mini Project Dengan JS by Mikel ibrahim

Gambar
                                Java Script Introduction • Javascript merupakan bahasa pemrograman yang khusus dibuat untuk mengembangkan website.  • Javascript merupakan komponen ke-3 yang harus dikuasai oleh seorang web developer setelah HTML dan CSS.  • Perbedaan fungsi dari Javascript dengan 2 komponen lain adalah sebagai berikut: 1. HTML: Berfungsi untuk mendefinisikan konten/layout darisebuah web  2. CSS: Berfungsi untuk memberikan style/mempercantik halaman website  3. Javascript: Berfungsi untuk mengatur behaviour dari sebuah halaman web. Bagaimana menggunakan Javascript?  • Sama seperti CSS, anda bisa menggunakan Javascript dengan 3 cara.  1. Di dalam elemen body, menggunakan tag script.  2. Di dalam elemen head, menggunakan tag script.  3. Menggunakan file terpisah dengan menggunakan ekstensi .js. Misal main.js. Nama file bisa bebas. Kemudian anda harus menam...
Baca selengkapnya

Membuat sistem yang meng generate list sesuai input yang di masukkan menggunakan JavaScript

Gambar
  Pada saat awal, item list dibuat kosong  Menambahkan input teks dan jumlah. Jika input teks dan jumlah dirubah, maka secara otomatis mengenerate item dengan teks dan jumlah yang sesuai dengan input tadi. Warna hover dan warna teks tetap sama dengan Mini Project 1 Berikut adalah kode html nya:     < label for = "text" > Input Teks: </ label >     < input type = "text" id = "text" placeholder = "Masukkan teks" >     < label for = "quantity" > Input Jumlah: </ label >     < input type = "number" id = "quantity" placeholder = "Masukkan jumlah" min = "1" value = "1" >     < button onclick = " generateListItem ()" > Generate Item </ button > < br >     < ul id = "myList2" ></ ul >     < input onclick = " ChangeBlue ()" type = "radio" name = "color" id = ...
Baca selengkapnya