author Ahmad Muhardian

Cara Membuat Halaman Github untuk Repositori


Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori.

Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript.

Membuat repositori

Buatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.

git init
git add .
git commit -m "commit pertama"
git add remote origin https://github.com/{username}/{nama-repo}
git push origin master

Pengaturan Repositori

Klik tombol Settings pada repositori untuk masuk ke pengaturan repositori, kemudian gulung ke bawah sampai menemukan bagian Github Pages. Lalu pada Source, pilih cabang (branch) yang akan menjadi halaman Github. Kemudian simpan.

Membuat Github Pages untuk Repository

Sebagai contoh, saya menggunakan cabang master. Sebenarnya tidak disarankan menggunakan cabang ini untuk halaman github. Kita disarankan menggunakan cabang lain, tapi harus dibuat terlebih dahulu. Cara pembuatan cabang dapat dilakukan dengan perintah berikut.

git checkout -b nama-cabang

Percobaan

Setelah itu, beberapa detik kemudian, halaman akan langsung jadi. Kita bisa mengaksesnya melalui alamat https://{username}.github.io/nama-repo. Karena saya sudah menggunakan domain untuk halaman github, maka nanti saya akan mengaksesnya melalui http://petanikode.com/nama-repo.

Contoh yang sudah saya buat:

Selain cara ini, ada juga cara lain, yaitu melalui direktori docs. Mungkin akan saya bahas pada kesempatan berikutnya. Tetap pantau blog ini ya, 😄.

Jadi, itulah cara membuat halaman github untuk repositori atau proyek. Apakah kalian sudah pernah membuatnya?

Baca Juga ini

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

Baru belajar Javascript? ..dan masih bingung dengan cara menulis Javascript di HTML? Tenang! Saya akan menjelaskannya. Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang biasa dan sering digunakan.. ..ada juga yang ‘aneh’, jarang digunakan sih tapi masih work! Apa saja keempat cara itu? Mari kita bahas: googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); 1. Menulis Javascript pada Tag <script>Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.

Tutorial Web Responsif: Pengenalan RWD dan Viewport

Tutorial Web Responsif: Pengenalan RWD dan Viewport

Bagaimana cara membuat web responsif? itulah pertanyaan yang cukup sering ditanyakan kepada saya. Pertanyaan ini membutuhkan jawaban yang cukup panjang, karena itu saya tidak bisa langsung menjawab secara detail melalui lisan maupun pesan instan, selain itu juga waktu yang tidak mendukung. Berangkat dari keterbatasan itu, akhirnya saya menrebitkan tulisan ini. Apakah itu RWD?RWD singkatan dari Responsive Web Design. Responsif artinya webnya dapat merespon atau menyesuaikan diri dengan perangkat yang digunakan. Misalnya kita membuka webnya melalui ponsel, maka secara otomatis tampilan webnya akan disesuikan dengan ukuran layar ponselnya.

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb. 1. Menyisipkan Data TablesPlug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index.

Menggunakan TinyMCE pada Proyek Web

Menggunakan TinyMCE pada Proyek Web

Pada sebuah proyek yang saya kerjakan, terdapat fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat. Saya tidak punya banyak waktu untuk membuat teks editor berbasis HTML. Karena itu, cara tercepat ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, saya akan berbagi cara menerapkan TinyMCE dalam Web. 1. Download TinyMCESilahkan men-download TinyMCE pada website resminya: tinymce.