Artikel

Materi: Cara Mempublikasikan Halaman Website di GitHub Pages

Creator: Caca Amatul Firdausya

Editor and Publisher: Azka Najiha

 

Assalamu’alaikum Warahmatullahi Wabarakatuh.

Halo guys! Apa kabar kalian? semoga sehat selalu yaa. Pada artikel sebelumnya kami mengenalkan kalian dengan website atau aplikasi GitHub, selanjutnya kami akan membahas bagaimana cara mempublikasikan halaman website di GitHub Pages. Yuk simak lanjutan artikel pertama dari GitHub!

 

GitHub Pages ini adalah layanan hosting situs statis yang hanya berupa file HTML, CSS, dan JavaScript langsung dari repositori di GitHub, dimana secara opsional menjalankan file melalui proses pembuatan, dan menerbitkan situs web. GitHub ini memberikan subdomain .github.io. Lalu bagaimana cara membuat GitHub Pages? Nah, berikut langkah-langkah mempublikasikan halaman web ke internet menggunakan GitHub Pages, tanpa bantuan git:

  1. Buka GitHub 
    Jika belum memiliki akun GitHub, bisa buat akun terlebih dahulu pada menu Sign Up. Jika sudah memiliki akun GitHub, bisa langsung masuk ke akun melalui menu Sign In.
  2. Membuat Repository Baru
    Selanjutnya, membuat “new repository”. Repository ini dapat membantu kita dalam mengelola suatu halaman website pada GitHub, biasanya berisi semua file proyek dan setiap riwayat revisi file. Cara membuatnya ialah klik tanda tambah (+) pada pojok kanan atas yang berada di sebelah kiri profil, lalu pilih new repository.
    github 2 1

    Beri nama repository pada kolom repository name sesuai keinginan kita. Nama repository ini nantinya menjadi URL halaman web yang berkaitan pada nama repository ini. Berikut penjelasannya sebagai contohnya:


    Dalam membuat repositori ini terdapat dua jenis pengaturan visibilitas yaitu public repository agar dapat diakses oleh semua pengguna di internet dan private repository  yang hanya dapat diakses oleh pribadi dan hanya pengguna GitHub lainnya yang sudah diberi akses. Karena di sini akan mempublikasikan website maka pilih “Public”. Selanjutnya terdapat “README.md” adalah untuk menjelaskan lebih lengkap mengenai deskripsi dari proyek yang telah dibuat. README.md ini boleh dikosongkan atau tidak perlu di-checklist (opsional).
    github 2 2

    Lalu klik tombol “Create Repository” yang berwarna hijau. Jika sudah berhasil maka muncul halaman seperti di bawah ini:
    github 2 3

  3. Mengunggah File
    Disini kita dapat mengunggah file yang kita inginkan dengan klik “uploading an existing file
    github 2 4

    Klik “choose your files” dan cari file yang ingin di-unggah.
    github 2 5

    Contohnya disini saya mengunggah file html dan css. Setelah berhasil mengunggahnya, kemudian klik tombol “Commit changes” yang berwarna hijau untuk menyimpan perubahan tersebut.
    github 2 6

    Jika sudah berhasil, maka muncul halaman seperti yang ada di bawah. Di sini kita bisa melihat isi dari setiap file dengan memilih salah satu nama file untuk meriksa bahwa semuanya sudah di-unggah dengan benar.
    github 2 7

  4. Mempublikasikasi Halaman Website
    Klik tab “Settings”.
    github 2 8

    Lalu pilih menu “Pages”, pilih branch main lalu tekan tombol “Save”.
    github 2 9

    Jika muncul tulisan "Your site is ready to be published at ...", berarti halaman web sudah berhasil dipublikasikan dengan URL yang ditampilkan. Sebagai contoh ini adalah website yang telah saya buat https://cacafirdausya.github.io/latihan/
    github 2 10
    Jika tidak muncul atau gagal, kemungkinan source adalah none, maka lakukan perubahan menjadi default branch (master atau main) lalu tekanlah tombol “Save” untuk menampilkan URL-nya.

    ss 1

    ss 2
    Gambar di atas adalah contoh tampilan website yang sudah saya publikasikan menggunakan GitHub Pages.

  5. Memperbarui Halaman Website yang Sudah Dipublikasi
    Misalnya ingin memperbarui index.html sebagai latihan. Untuk memperbarui-nya klik tab “Code”, lalu pilih index.html (seperti pada gambar di bawah).
    github 2 11

    Selanjutnya, akan tampil isi kode dalam html tersebut. Untuk melakukan perubahan pada isi file tersebut, bisa meng-klik ikon pensil di pojok kanan atas.
    github 2 12
    Setelah selesai mengedit, pilih ‘Commit directly to the main branch’ dan klik tombol “Commit changes” yang berwarna hijau untuk menyimpan perubahan tersebut.

 

Cukup sekian untuk artikel kedua Github mengenai cara mempublikasikan halaman website di GitHub. Bagi kalian yang ketinggalan artikel pertama bisa klik link di bawah yaa Materi: Pengenalan Git dan GitHub Politeknik STMI Jakarta (himasis.org)

Sampai jumpa di artikel GitHub selanjutnya, bye bye!

 

Sumber:

https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages

Follow Us

Tags

20182019202020214glAdobe XDAfter Event After Event MnG 2020AFTERGLOWAktivasiaktivasialgoritmaangketArrayArtikelAutoCADAutoCAD2015autonumberBack End Developerback end languagebahasa pemrogramanbayar kuliahbelajar vbberitabossbuka bersamabukber himasisCerpenciscocisco packet tracercodeigniterColouringcontainercoronacovid19Criptocurencycsscsscuci tangancurriculum vitaecv yang baikCyber CrimeCYBER SECURITYCyber Securitydasar algoritmadasar jaringanData DiriDatabasedatabasedehidrasidockerdownloadDownloadEcommasterEcommerceEntrepreneurevent ExpressJsFigmaflutterfolder projectFrameworkFront End DevelopergaikindoGambar 2dGambar 3dGitGitHubHIMASIS himasishtmlhtmlINDEXS2021InformasiinspirasiInstalisasi NodeJS installInstallinstalliterationjadwal imsakiyahJakartaJAKARTAjaringanjaringanjaringan komputerJavajavajavascriptJDKJoin MnG 2020JREKAHIM dan WAKAHIMkegiatankerenkinemasterkode otomatisKomunikasi Serverkonfigurasi filekrs onlinekstkunjungan pabrikleaderLebaranLibraryMading HimasismagentamakananmakrabMateri PembelajaranMedia VirtualBoxMedia VirtualBoxmeet and greetmeet and greet 2018meet and greet 2019Meet and Greet 2020meganthropusmelamar kerjaMethodsmicrosoft access 2010minumanmongoDBmudikmudik amanmvcnetbeansngodingOnlinepreneurshiporacleorracleOS Windowsosi layerotomotifPanduan Lengkappaslonpaslon nomer 2pelatihan 2Pelatihan BPHPelatihan UIUXpelatihan1pemilu HIMASISpemimpinpemimpin baikpemrogramanpencarianpendaftaranpengenalan jaringanpengisian angketPeriode 2020 - 2021Periode 2021-2022Periode 2022 - 2023phpphpPHP VS NodejspklPoliteknikPOLITEKNIK STMI Prosedurproses bisnispuasapuasapycharmpythonpytrainramadanramadan 1441hramadhanRansomwarerequestresponseRESTful APIresumeRoutingrun endpoint expressrun server expressschsearch barSecuritySecurity AttackselectionSemester Pendekseminarseminar umumseminar2018senisequenceSetup ProjetSistem InformasispectrumSQL vs NoSQLSSLstmistok otomatisstruktur fileStruktur Organisasistudy clubTableTableauTechnopreneurshipterhebatterpilihpaslonnomer2TipsTopologi JaringanTradisi LebarantriggerTriktutorialTutorialtutorialTutorialTwiterTwiter 2020Twiter 2021Twiter 2021Twiter AFTERGLOWTwiter AGENCYtwiter2019uang digitalUbuntuulangtahunultahhimasisVirusvisual basicvisual studiowebWeb DevelopmentWebinarWEBINAR HIMASISWebsitewhich is the best Windows 10windows 7Windows XPwirausahaYourXperienceyoutube