Hugo Hosting with Gitlab and Firebase

Hugo bisa dihosting dimana saja seperti di gitlab, github, netflify termasuk firebase tanpa dipungut biaya sepeserpun.

Ada berbagai macam cara proses upload file atau sering dikenal deploy Hugo ke berbagai hosting. Bisa dengan menggunakan fitur Git atau bisa langsung upload ke hosting menggunakan SCP (Secure Copy), FTP atau deploy via aplikasi providernya langsung seperti Firebase, Render dan Surge.sh.

Kali ini kita tidak membahas hosting Hugo dan deploy langsung ke firebase, tapi prosesnya jadi bertambah satu dengan memanfaatkan gitlab terlebih dahulu baru dideploy ke firebase.

Menggunakan gitlab sebagai perantara untuk deploy memiliki satu keuntungan yaitu tidak perlu upload semua file ke server firebase setiap posting artikel baru atau merubah konfigurasi/theme yang diinstall.

Dengan Gitlab cukup push satu atau beberapa baris kode, artikel sudah bisa live. Sangat menghemat bandwidth. Hal ini akan terasa sekali dampaknya ketika kita sudah memiliki ratusan artikel dan gambar.

Why deploying Hugo using Gitlab and Firebase? 

Rencananya saya mau update artikel ini karena file salah satu contoh sudah terhapus.

Setelah update, seperti biasa saya langsung saja deploy ke firebase

1
2
rm -rf public/ && hugo --minify
firebase deploy

Proses berjalan normal, tapi setelah saya cek ternyata tampilan blog jadi berubah. Padahal tidak ada setting yang saya ubah.

Sempat beberapa kali oprek-oprek theme dan memperbaiki beberapa error yang muncul ketika deploy hugo di local. Akhirnya saya menuju link pembuatan theme hugo dream plus

Awalnya saya curiga mungkin theme ini sudah diupdate jadi ada pengaturan yang berubah.

Saat cek last commit ternyata sudah 3 bulan yang lalu, yaitu Oktober 2019. Wah ini mesti ada yang bentrok antara Hugo versi baru. Ternyata benar, ada yang open issue 12 hari yang lalu.

Issue di Github - Theme Dream Plus bentrok dengan Hugo Tterbaru (versi 0.62)

Saat itulah saya langsung berpikir untuk kembali menggunakan gitlab, karena gitlab memiliki CD (Continous Development) sehingga kita bisa deploy versi program yang kita mau.

Proses Deploy dari Localhost ke Gitlab 

Disini saya memulai semua dari baru, kecuali file config.toml dan folder content/posts.

File config.toml berguna menyimpan pengaturan Hugo berdasarkan theme yang digunakan.

Sedangkan folder content/posts adalah inti dari blog yang menyimpan semua file content dalam format markdown.

Berikut langkah-langkah memulai blog Hugo baru menggunakan Gitlab dan Firebase :

Inisiasi Blog Baru di Hugo 


Setiap blog Hugo yang saya generate saya simpan disatu folder tersendiri. Setelah membackup file penting dan menghapus folder lama dengan nama blog itu sendiri. Langsung gunakan perintah

1
hugo new site eka.gdn

Silakan ganti nama domain eka.gdn sesuai dengan nama blog/website yang diinginkan.

Download dan Setting Theme dari Repository Hugo 


Pilih theme yang ada di gohugo.io. Ada 2 cara untuk mendapatkan theme yang ada di repository Hugo.

  1. Langsung menuju repository theme di github dan ambil link download zip. Download dan extract di folder nama-blog/themes
  2. Menggunakan perintah git clone url-github

Saya sering menggunakan cara pertama, karena tidak perlu pusing dengan folder .git yang ada dalam folder theme saat nanti proses push ke repository blog di gitlab.

Pada saat ini blog belum bisa diakses. Atur file config.toml atau config.yml yang ada di root folder Hugo, contohnya nama-blog.com/config.toml. Agar konfigurasi sesuai dengan theme yang kita download copy dan paste file config yang ada di dalam folder theme tersebut biasanya dalam folder exampleSite.

Selanjutnya tinggal ubah konfigurasi yang ada didalamnya, yang paling penting adalah alamat blognya.

Buat Artikel Pertama atau Upload file backup 


Jika ini adalah blog baru, kita harus membuat file artikel dengan mengetikkan perintah :

1
hugo new posts/nama-artikel.md

File nama-artikel.md bisa ditemukan di folder nama-blog/content/posts/nama-artikel.md

Atau bisa juga meng-copy file artikel dalam folder exampleSite tadi untuk menyesuiakan konfigurasi artikel dengan themenya.

Buat Repository Baru di Gitlab 


Silakan daftar dulu di Gitlab, lalu buat repository baru. Catat alamat repository agar untuk dimasukkan ke konfigurasi repository git lokal.

Iniasi Folder Git Lokal, Repository Gitlab dan Firebase 


Selanjutnya agar bisa terhubung ke Gitlab kita harus membuat repository lokal dengan perintah

1
git init

Lalu atur konfigurasi file .git/config sesuai dengan repository gitlab yang telah dibuat sebelumnya.

Konfigurasi file *.gitlab-ci.yml*

File ini yang nantinya bertugas untuk mem-build Hugo dan Deploy ke Firebase.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
stages:
  - build
  - deploy

build:
  image: monachus/hugo:v0.55.3
  stage: build
  script:
    - hugo
  artifacts:
    paths:
      - public/

deploy:
  image: devillex/docker-firebase:slim
  stage: deploy
  only:
    - master
  script:
    - firebase use <project-name> --token $FIREBASE_TOKEN
    - firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token $FIREBASE_TOKEN
  environment:
    name: production
    url: https://<project-name>.firebaseapp.com
  dependencies:
    - build

Konfigurasi yang perlu diperhatikan :

Ganti versi dari Hugo dengan mengganti nomor v.0.55.3 jika menggukan versi saat ini ganti menjadi v.0.62.0

1
image: monachus/hugo:v0.55.3

Untuk mendapatkan project-name dan $FIREBASE_TOKEN gunakan perintah

1
firebase login:ci

Nanti akan muncul url diterminal, buka di browser dan login menggunakan akun google yang digunakan untuk firebase.

Agar folder file kita dikenali ketika proses deploy, lakukan inisiasi firebase

1
firebase init

Selanjutnya untuk mengupload file ke gitlab lakukan perintah berikut:

1
2
3
git add .
git commit -m "initial commit"
git push origin master

Jika semua proses benar, maka dalam beberapa menit kedepan silakan alamat nama-project.firebaseapp.com untuk melihat hasilnya.

Referensi : https://rhazn.com/posts/deploy-a-personal-blog-with-hugo-firebase-and-gitlab/