author Ahmad Muhardian

Cara Hosting/Deploy Hugo di Github


Github memiliki layanan hosting Static Page yang bisa kita manfaatkan untuk hosting Hugo.

Pada dasarnya SSG seperti Hugo akan membuat sebuah file statis yang (biasanya) berada di dalam direktori public.

Nah direktori ini yang akan kita upload ke Github agar website atau blog kita bisa dibuka melalui: https://username.github.io atau kustom domain sendiri.

Berdasarkan panduan di dokumentasi Hugo, ada empat cara yang bisa dilakukan 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)

Kita akan mencoba cara yang nomer 3, karena menurut saya cukup gampang.

Kita membutuhkan dua repositori untuk melakukan cara ini.

  1. Repositori untuk menyimpan konten (opsional).
  2. Repositori untuk menyimpan hasil render.

Mari kita mulai…

1. Membuat Repositori di Github

Buatlah dua repositori di Github dengan nama seperti berikut ini.

  1. blog (opsional)
  2. username.github.io atau organisasi.github.io

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

Membuat Repository di Github

Repositori blog berfungsi untuk menyimpan semua file Hugo (proyek hugo). Repository ini bisa kita gunakan untuk back-up.

Repositori Konten Hugo

Sementara repositori username.github.io untuk menyimpan file yang ada di public atau hasil render dari Hugo.

Repositori Hasil render Hugo

Semua file statis yang ada di repository username.github.io akan bisa diakses melalui https://username.github.io.

2. Persiapkan Repositori Lokal

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 ke direktori Hugo:

cd blog

Inisialisasi Git:

git init

Hapus direktori public… tenang nanti kita bisa buat lagi dengan perntah hugo.

rm -rf public

Tambahkan repositori remote (github):

Untuk yang menggunakan HTTPS:

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

Untuk yang menggunakan SSH:

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

Atau kalau tidak mau repot, URL-nya bisa di-copy dari repo Github-nya.

URL Repositori Github

3. Upload ke Github

Repositori lokal sudah dipersiapkan, sekarang kita upload/push ke github.

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

Nah sekarang, semua file Hugo sudah dipublikasikan ke repository blog.

Tips: Buat yang mau menyimpan secara private, bisa belangganan akun premium Github atau menggunakan layanan lain seperti Gitlab dan Bitbucket

4. 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.

HTTPS:

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

SSH:

git submodule add -b master [email protected]:{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 repository username.github.io.

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

Biar tidak repot, kita bisa membuatkan sktrip untuk perintah-perintah tersebut.

5. Membuat Skrip deploy.sh

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

Nah biar tidak repot, kita bisa bungkus perintah-perintah tersebut ke dalam sebuah file skrip.

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

Sebagai contoh, kita simpan dengan dengan deploy.sh.

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.

deploy Hugo ke Github

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.

Cara ini saya gunakan di Petani Kode dan juga di blog saya:

  1. Repositori konten https://github.com/ardianta/blog
  2. Repositori hasil render https://github.com/ardianta/ardianta.github.io

Referensi: Dok. Hugo

Baca Juga ini

Migrasi Petani Kode dari Blogger ke Hugo

Migrasi Petani Kode dari Blogger ke Hugo

Tercatat pada tanggal 11 Januari 2017, website Petani Kode mulai dikembangkan ulang dengan mesin (engine) Hugo. Hugo adalah salah satu mesin generator web statis yang berusia cukup muda. Hugo ditulis dengan bahasa pemrograman Go dan diklaim lebih cepat dari mesin sejenisnya seperti Jekyll , Middleman , Octopress , dsb. Pengembangan website Petani Kode berlangsung cukup cepat. Meskipun bahasa pemrograman Go belum pernah saya pelajari dan pahami. Namun, berkat kerja keras dan semangat website ini bisa jadi dalam waktu sekejap.

Cara Impor Artikel Blogger ke Hugo Kurang dari 15 Menit

Cara Impor Artikel Blogger ke Hugo Kurang dari 15 Menit

Dalam rangka migrasi Petani Kode ke Hugo, saya harus melakukan impor artikel dari Blogger ke Hugo. Untungnya Hugo sudah menyediakan skrip untuk impor konten dari blogger ke Hugo. Proses impor ini memakan waktu cukup cepat. Saya kira, tidak sampai 15 menit. Mungkin anda bisa melakukannya lebih cepat. Begini caranya… Sebelumnya, pastikan telah menginstal Go (Golang) dan Git . Kemudian lakukan langkah-langkah berikut ini. 1. Ekspor BlogPertama, kita perlu mengekspor dulu konten yang ada di blogger.

Cara Membuat Halaman Github Kurang dari 10 Menit

Cara Membuat Halaman Github Kurang dari 10 Menit

Halaman Github (Github Pages) merupakan layanan hosting web statis yang diberikan oleh Github. Layanan ini diberikan secara gratis dan kita juga akan mendapatkan subdomain .github.io. Bagaimanakah cara membuatnya? Baiklah, pastikan anda sudah punya akun Github dan sudah menginstal Git. Kemudian silahkan ikuti langkah-langkah berikut, tidak sampai 10 menit kok. 1. Buat Repositori BaruBuatlah repositori baru dengan nama username.github.io. Gunakan username github Anda, contoh petanikode.github.io. 2. Buat Repositri di KomputerBuka terminal atau CMD, kemudian buatlah repositori baru.

Cara Setup SSH Key untuk Github agar Bisa Ngepush Tanpa Password

Cara Setup SSH Key untuk Github agar Bisa Ngepush Tanpa Password

Kita bisa melakukan push ke Github melalui dua metode yakni, melalui protokol HTTPS dan SSH. Jika kita menggunakan HTTPS, maka kita akan dimintai password di setiap kali melakukan push. Sedangkan kalau pakai SSH, ini tidak perlu.. ..karena passwordnya akan diwaklili oleh SSH Key. Pada tutorial ini, kita akan belajar gimana cara setup SSH Key untuk Github. Sehingga nanti bisa melakukan push tanpa harus ngetik password terus menerus. Mari kita mulai!

Saya tidak Bisa Bahasa Pemrograman Go, Terpaksa ini yang Saya Lakukan

Saya tidak Bisa Bahasa Pemrograman Go, Terpaksa ini yang Saya Lakukan

Ada cerita menarik yang saya alami ketika migrasi Petani Kode dari Blogger ke Hugo. Waktu itu, ketika saya ingin mengimpor konten dari Blogger ke Hugo, ada sesuatu yang kurang dari skrip Go yang disediakan. Kekuarangnnya tidak mampu membuat atau mengambil gambar (thumbnail) untuk setiap artikel. Saya kemudian berpikir, mungkin nanti saya bisa edit setiap gambar untuk artikel. Namun, rasanya akan sangat melelahkan melakukannya karena jumlah artikelnya sampai ratusan. Tidak ingin melakukan hal yang berulang-ulang seperti kata orang, Don’t Repeat Yourself di singkat DRY.

Kumpulan 1150+ Link Ebook Pemrograman Gratis (Sedot Semua!)

Kumpulan 1150+ Link Ebook Pemrograman Gratis (Sedot Semua!)

Kumpulan buku pemrograman gratis dalam bahasa indonesia dan inggris untuk belajar pemrograman