Cara Deploy atau Hosting Hugo di Github Pages

Hugo adalah static site generator yang bahasa pemogramannya adalah Go. Hugo adalah project open source yang menakjubkan.

Pada artikel sebelumnya, saya sudah menulis bagaimana Cara Membuat Blog dengan Hugo menggunakan Termux. Silahkan dibaca terlebih dahulu artikel tersebut sebelum membaca artikel Cara Deploy atau Hosting Hugo di Github

Github pages merupakan project dari Github yang memungkinkan anda untuk langsung mendeploy project secara langsung melalui repositori yang anda miliki. Project yang di deploy menggunakan Github Pages akan mendapatkan domain gratis yang berekstensi domainanda.github.io. Selain itu, anda juga bisa menggunakan custom domain pada github pages.

Kita bisa memanfaatkan ini sebagai media untuk Hosting Hugo di Github tanpa menggunakan pihak ketiga.

Menurut panduan resmi dari situs Hugo kita bisa melakukan deploy di Github dengan 4 Cara yaitu:

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

Pada postingan ini, saya akan memberikan Cara Hosting Hugo di Github dengan Halaman Personal yaitu pada poin nomor 3. Karena lebih gampang dan mudah untuk dipahami.

Membuat Repositori di Github

Pastikan sudah memiliki akun github, jika belum silahkan daftar disini. Untuk memudahkan proses deploy hugo di github, silahkan atur SSH pada terminal dan hubungkan ke github agar pada saat proses deploy, tidak meminta password.

blogsaya.github.io

ini merupakan url blog hugo kalian nanti nya, dan repositori ini harus dalam keadaan publik. Jika ingin private maka harus berlangganan.

pada bagian yang lain biarkan saja kosong, karena tujuan kita membuat repositori kosong sebagai database.

Membuat Repositori Backup di terminal

Setelah membuat repositori kosong di Github, selanjutnya kita akan membuat 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 testhugo

Inisiasi Git

git init

Hapus direktori public, nanti bisa di restore kembali dengan mengetik perintah

hugo

Ketik perintah dibawah untuk menghapus secara paksa

rm -rf public

Kita hubungkan direktori blog dengan repositori hugo mengunakan git remote

Jika sudah melakukan menyetting ssh gunakan perintah berikut

git remote add origin [email protected]:[username]/[nama-repo].git

Jika belum kita gunakan perintah HTTPS

git remote add origin https://github.com/[username]/[nama-repo].git

Selanjutnya deploy project ke github, masukkan perintah berikut

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

Command di atas berfungsi apabila kamu sudah menulis artikel atau memodifikasi tampilan blog dan perlu untuk menerapkan nya pada blog, tujuan nya yaitu untuk push repo lokal ke github.

Membuat Github Pages untuk Deploy hugo

Setelah membuat database untuk blog hugo, langkah berikutnya yaitu melakukan PUSH repositori kamu ke dalam github pages. Ikuti panduan berikut.

1. Klik Setting pada repositori database yang kita buat

2. Pilih PAGES lihat screenshoot dibawah

3. Pilih SOURCE > Github Action > Browse All Workflows

4. Scroll kebawah dan cari HUGO Lalu Klik

5. Tidak perlu merubah apapun, langsung klik Commit Changes

6. Tunggu proses build selesai, dan kini Blog Hugo mu sudah bisa di akses menggunakan domain yang sudah dibikin tadi blogsaya.github.io

Membuat Script Auto Push / Deploy Github

Untuk mempermudah kita dalam mengupdate blog maupun artikel, kita bisa mempercepat proses push repo ke github dengan membuat script auto deploy.

Script ini saya dapatkan dari blog nya Petani Kode buat yang lagi belajar ngoding bisa banget liat liat blog nya 🥰

Biasanya kita update dengan cara melakukan PUSH manual dengan perintah git add > commit > lalu push.

# generate statc web
hugo

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

Untuk mempercepat kita bisa akali dengan push repo menggunakan satu perintah yaitu ./deploy.sh

Silahkan buat file bernama deploy.sh jika menggunakan termux bisa dengan cara touch deploy.sh

Masukkan command dibawah ini pada file deploy.sh

#!/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 ..

Simpan file tersebut di directory blog hugo contoh blog saya disini yaitu testhugo letakkan file di dalam folder tersebut.

Setelah file tersimpan, berikan akses dengan mengetik perintah

chmod +x deploy.sh

Script auto deploy sudah selesai kita buat. Untuk melakukan push, kita cukup memasukkan command

./deploy.sh #boleh menambahkan commit ataupun tidak

Tunggu beberapa menit sampai proses push selesai, lihat kembali pada blog hugo untuk melihat update sudah terinput ke Github pages.

Kesimpulan

Begitulah Cara mudah Deploy / Hosting Hugo di Github untuk proses deploy ke Netlify dan Vercel akan saya bahas di lain artikel.

Kalau masih bingung, boleh langsung tanyakan akan saya jawab sebisa saya. Karna saya disini juga masih belajar, kita bisa sama sama belajar 😄