Pada postingan sebelumnya yaitu tentang Cara Mudah Membuat Blog Dengan Hugo kita dapat mengetahui bawah Hugo adalah generator web statis yang ditulis dalam bahasa pemrograman Go. Dan pada kesempatan kali ini kita akan mencoba mendeploy project kita atau blog kita ke github.

Github Pages adalah sebuah website yang memanfaatkan hosting github langsung dari repositori yang ada. Setiap akun atau organisasi hanya memiliki satu Repositori, namun hosting yang kamu miliki masih bisa di manfaatkan sebagai media penyimpanan proyek yang sedang kamu kerjakan. Nah, disini kita akan mencoba memanfaatkan akun github yang kita miliki sebagai hosting Hugo. Jika kamu belum memiliki akun github, kamu perlu mendaftar terlebih dahulu untuk dapat menggunakannya.

Berdasarkan panduan yang saya baca dari situs resmi Hugo, ada empat cara yang bisa digunakan untuk hosting hugo di github :

  1. Hosting ke direktori doc
  2. Hosting ke cabang gh-pages
  3. Hosting ke halaman personal/organisasi
  4. Hosting Github dengan Continuous Integration (CI)

Dan kali kita akan mengunakan cara nomor tiga yang menurut saya mudah untuk dipahami bagi kita yang baru belajar.

Membuat Repositori Github

Sebelum membuat repositori di Github, ada beberapa syarat yang harus dilakukan, yaitu :

  • Pastikan anda sudah memiliki akun github
  • Sebelum membuat repositori lebih baik setting SSH terlebih dahulu ke github agar kita tidak diminta memasukan password disetiap kali nge-push hugo ke github.

Buat Repositori

  • blog (opsional) Repositori Blog

    Repositori ini opsional dibuat sebagai back-up semua file Hugo. Dikarenakan saya sudah membuatnya jadi muncul informasi bahwa nama repositori blog sudah ada.

  • username.github.io repo user Repositori username.github.io untuk menyimpan file yang ada di public atau hasil render dari Hugo dan repository ini yang nantinya akan bisa diakses melalui https://username.github.com

Saat membut repository, jangan centang “Initalize this repository with README.md” agar kosong.

Membuat File Back-Up

Setelah kita membuat repository kosong di Github, selanjutnya buatlah repository baru di dalam proyek hugo dengan melakukan inisialisasi git.

Silahkan ikuti perintah berikut ini.

  • Masuk direktori hugo, sebagai contoh nama direktori website saya

    cd ryk

  • Instalasi Git

    git init

    Hapus direktori public, karena ini adalah repository back-up file ini dihapus saja.

    rm -rf public

  • Kita hubungkan direktori website kita dengan repository hugo mengunakan repository remote

    Jika kamu sudah melakukan setting ssh gunakan perintah SSH

    git remote add origin git@github.com:{username}/{nama-repo}.git

    Jika belum kita gunakan perintah HTTPS

    git remote add origin https://github.com/{username}/{nama-repo}.git

  • Selanjutnya kita deploy ke github

    git add .
git commit -m "commit pertama"
git push -u origin master

    Perintah ini akan selalu kamu lakukan setiap ingin melalukan update file back-up.

    rblog

Membuat Submodule

Kita sudah meng-upload semua file Hugo ke repository blog, namun blog https://username.github.io masih Error 404 Not Found.

Kenapa bisa begini?

Karena repository username.github.io belum ada isinya.

Untuk mengisinya, kita akan membuatkan submodule dari repository inti (blog).

Pastikan sedang berada di repository blog, lalu ketik perintah berikut untuk menambahkan submodule.

  • Tips: Jika kamu menggunakan HTTPS, maka kamu akan diminta password disetiap kali nge-push ke Github, maka cobalah untuk menggunakan SSH.

Jika kamu sudah melakukan setting ssh gunakan perintah ssh

git submodule add -b master git@github.com:{username}/{username}.github.io.git public

Jika belum kita gunakan perintah HTTPS

git submodule add -b master https://github.com/{username}/{username}.github.io.git public

Perintah tersebut akan melakukan clone repository username.github.io ke dalam direktori public.

Sekarang kita bisa mulai mempublikasikan web atau blognya.

Silahkan ketik perintah berikut:

# generate statc web
hugo

# push ke repository
cd public
git add .
git commit -m "tes Deploy hugo"
git push -u origin master

Perintah hugo akan menghasilkan sekumpulan file web statis di dalam direktori public. Setelah itu kita melakukan push ke rrepository username.github.io.

Hal ini akan terus kita lakukan setiap kali kita mau update konten.

Biar tidak repot, kita bisa membuatkan sktrip yang sudah di buat oleh Ahmad Muhardian untuk perintah-perintah tersebut.

Membuat Script Deploy

Setiap kali kita mau update blog, kita harus melakukan upload atau push ke Github, dengan perintah-perintah ini:

# generate statc web
hugo

# push ke repository
cd public
git add .
git commit -m "tes Deploy hugo"
git push -u origin master

Biar tidak repot, silahkan buat sebuah file dengan nama deploy.sh kemudian copy dan paste script di bawah ini :

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Genterate file statis
hugo # if using a theme, replace by `hugo -t -yourtheme-`

# pindah ke direktoru publik
cd public
# tambahkan perubahan ke Git
git add -A

# Buat sebuah commit baru
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push atau puload ke Github
git push origin master

# Balik ke direktori sebelumnya
cd ..

File skrip tersebut dapat kita simpan di dalam root direktory proyek Hugo.

Setelah itu, berikan hak akses eksekusi untuk skrip ini.

chmod +x deploy.sh

Nah, kita bisa melakukan deploy dengan skrip tersebut. Setiap kali kita ingin meng-update blog, kita cukup menjalankan skrip itu saja.

Kita juga bisa menambahkan pesan commit-nya:

./deploy.sh "tes deploy web hugo ke github"

Tunggulah beberapa saat, website kita akan segera mengudara di username.github.io.

Terima kasih sudah membaca.