بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيم
Source : source
Bahan-bahan yang diperlukan :
1. Akun Github. Sebagai remote repositori.
2. Akun Travis CI. Kita akan menggukan Travis CI sebagai layanan hostingnya. Biasa dipakai untuk projek-projek open source. Terintegrasi dengan Github.
3. Projek Next.js.
Cara kerja :
Karena Github Pages ada hosting khusus website statis saja, jadi kita akan menggunakan perintah next export pada projek Next.js kita untuk meng-export projek kita menjadi halaman-halaman statis. Dengan memanfaatkan Travis CI, kita akan setting Travis CI agar menjalankan perintah next export saat ia mem-build projek kita.
Langkah-langkah :
1. Membuat Github Token
Berfungsi sebagai kunci untuk menghubungkan Travis CI dan Github. Jika sudah punya bisa di-skip. Kalau belum punya masuk ke Settings akun Github kita, klik submenu Developer Settings, pilih Personal access tokens, klik tombol Generate new token, masukkan password akun jika diminta, checklist option repo, lalu klik tombol Generate token, copy tokennya.
Lalu masuk ke akun Travis CI, tambahkan dulu projek kita ke Travis CI. Jika sudah, pilih projek kita, klik tombol More option, lalu pilih Settings, drag hingga ke setting Environment Variables, isi namanya dengan GITHUB_TOKEN (nama bebas, asal sama dengan yang ada di settingan .travis.yml di step kedua nanti), isi valuenya dengan token yang sudah kita dapatkan di Github, isi branchnya dengan branch utama, lalu klik tombol Add.
2. Membuat settingan Travis CI
buat file bernama .travis.yml di tempat paling luar folder projek kita. Lalu isi dengan settingan berikut (klik ini jika source tidak tampil)
lalu push projek kita ke Github. Pastikan nama reponya ada usernamekamu.github.io ya, misal username saya disaada maka nama reponya disaada.github.io. Jika projek kita sudah pernah disimpan di Github berarti hanya tinggal menambahkan .travis.yml ke sana.
3. Setting Github Pages
Buat branch gh-pages terlebih dahulu di remote repositori kita. Jika sudah, masuk remote repositori projek Next.js kita, lalu pilih menu Settings (bukan setting akun Github yah, tapi setting repositori kita). Lalu drag hingga ke settingan Github Pages, lalu pilih branch gh-pages dan klik tombol Save.
kekurangan :
1. Bagus untuk projek yang tidak berinteraksi dengan API. Jika membutuhkan interaksi dengan API, maka ia hanya akan mengakses sekali saya yaitu ketika projek sedang di-build. Ia tidak bisa melakukan SSR (server side rendering) dengan menggunakan getServerSideProps. Misal seperti blog Github Pages saya di atas, karena saya ambil postingan-postingannya dari Blogger API (biar cepat, kapan-kapan saya mau belajar buat blog API dengan RoR) secara statis dengan menggunakan getStaticProps, maka jika ada postingan baru tidak akan otomatis muncul di blog Github Pages sampai saya build ulang blog Github Pages saya di Travis CI.
2. (Untuk kasus blog yang kontennya ngambil dari external source seperti Blogger) tidak bisa inject HTML di dalam konten. Contohnya di postingan ini saya menyajikan source dengan Gist Github. Kalau di Blogger ini bisa muncul. Tapi tidak kalau di Github Pages. Masih mencari solusinya. Sementara disiasati dengan menyertakan link.
kali aja kalau ada yang bertanya : lah sudah punya Blogger ngapain dibikin lagi di Github Pages? gabut?
1. Iya gabut
2. Mumpung gabut saya pakai waktunya belajar Next.js
3. Challenge diri sendiri, contohnya kan jadi ada tantangan baru seperti di kekurangan no. 2
4. Biar lebih bagus domain blognya. Daripada belakangannya blogspot.com, kalau github.io kan lebih terasa sense of web engineer nya huehehehehe
5. Bisa saja di siasati dengan me-link-an yang ada di Github Pages ke Blogger/Medium seperti yang saya lihat di beberapa personal web para web engineer, tapi saya mau memberikan user experience ala orang mager yang tidak suka berpindah-pindah. Semua satu tempat di Github Pages.
ٱلْحَمْدُ لِلَّٰهِ رَبِّ ٱلْعَالَمِينَ
Komentar
Posting Komentar