Hugo Hosting Gambar

Bagi yang belum pernah ngeblog dengan SSG, mungkin akan berpikir seperti ini:

“Ngeblog dengan SSG kan pakai teks editor, lalu bagaimana cara menambahkan gambar di artikelnya? Ngetik manual…kayaknya ribet.”

Saya juga berpikiran seperti itu sebelumnya 馃槃.

Tapi setelah mencoba dan merasakan sendiri ngeblog dengan SSG, rasanya lebih produktif menggunakan SSG daripada CMS seperti Blogger dan Wordpress.

Pada tulisan ini, saya akan membagikan cara menambahkan gambar pada artikel Hugo dan tips cara hosting-nya di Github.

Cara Menambahkan Gambar pada Artikel Sebelum Menggunakan SSG

Semua sudah tahu cara menambahkan gambar pada CMS seperti blogger dan WP.

Tinggal klik “Insert Media/Image”, cari gambarnya…udah itu aja.

Atau cara yang lebih cepat: “drag-drop” gambarnya ke artikel.

Drag and drop gambar ke artikel

Maka gambar sudah ditambahkan.

Mudah bukan?

Tapi masalahnya:

  • Gambar harus ditambahkan satu-per-satu (bisa juga sih di-upload semua).
  • Kalau ada kesalahan: gambar dihapus dan di-upload ulang.
  • Sementara koneksi internet tidak mendukung alias lelet 馃槃.
  • Lalu kalau ngedit artikel, harus online untuk buka panel admin-nya.

Berangkat dari keluhan tersebut, akhirnya saya pindah ke SSG.

Cara Menambahkan Gambar pada Artikel Hugo

Cara menambahkan gambar di artikel Hugo, bisa dibilang seperti menulis kode program (coding).

Yaitu: menggunakan HTML dan Markdown.

Contoh menggunakan Markdown:

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

![teks alt gambar](/link/url/gambarnya.jpg)

Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.

Contoh menggunakan HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<img src="/link/url/gambarnya.jpg" alt="teks alt gambar"/>

Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.

Gambarnya taruh di mana?

Gambarnya bisa ditaruh di direktori static.

Taruh gambar di Hugo

Pada contoh di atas, saya membuat direktori bernama img dan sub direktori lagi untuk tiap-tiap artikel.

Jadi kalau mau digunakan, tinggal buat url-nya seperti ini:

![Teks alternatif](/img/direktori-artikel/nama-gambar.jpg)

Gambar akan otomatis di-hosting ke Github, bila kita menaruhnya di direktori static dan akan digabungkan dengan repositori blog-nya.

Github memberikan kuota 1GB untuk setiap repositori. Jadi pastikan tidak terlalu banyak menyimpan gambar ya 馃槃.

Kalau sudah penuh, nanti tidak bisa nge-push lagi.

Tapi ini bisa diakali dengan membuat repositori lagi.

Sebelum menggunakan Github, saya hosting gambarnya di Google Photos.

Google Photos

Kemudian saya gunakan seperti ini:

![Cara komunikasi Bot Telegram dengan Hook.io dan API Simsimi](https://4.bp.blogspot.com/-89RK3vsPeAw/V9FJ-fgPW5I/AAAAAAAADOY/D-R__QHvwzMdNNKsIaNkEU7rzT2hVep7gCK4B/s1600/API%2BSimsimi%2Bdan%2BBot%2BTelegram%2B-%2BPetani%2BKode.png)

Akan tetapi, rasanya sama seperti ngeblog dengan CMS.

Malah lebih repot, karena harus copas URL-nya.

Cara Hosting Gambar di Github dengan Repositori Terpisah

Info: Cara ini sudah tidak saya pakai lagi setelah mengganti template ke Bootstrap 4

Pastikan blog Hugo-nya di-hosting dengan repositori username.github.io.

Kalau dihosting di repositori yang lain, mungkin saja tidak bisa 馃槃 (bisa saja, tapi akan lebih ribet).

Silahkan buat repositori baru untuk menampung gambarnya.

Sebagai contoh saya membuat repositori bernama img.

Pengaturan Github Pages

Setelah itu, aktifkan fitur Github Pages pada repositori tersebut.

Masuk ke Settings, kemudian pada Github Pages pilih branch master.

Pengaturan Github Pages

Nah untuk upload-gambarnya, kita tinggal push saja melalui terminal.

Sebelum melakukan itu, silahkan clone dulu ke repositori lokal:

HTTP:

git clone https://github.com/username/img.git

SSH:

git clone [email protected]:username/img.git

Tambahkan gambar, lalu commit dan push.

git add .
git commit -m "gambar baru"
git push origin master

(Serasa seperti lagi ngoding)

Upload/Push Gambar ke Github

Cara pakai gambarnya sama seperti tadi:

![Teks alternatif](/img/direktori-artikel/nama-gambar.jpg)

Tapi dengan syarat, kita harus membuat symbolic link ke direktori static.

ln -sf ~/img ~/petanikode-hugo/static/

Keterangan:

  • ~/img adalah direktori repositori (berlokasi di home) yang kita clone tadi.
  • ~/petanikode-hugo/static/ lokasi symbolic link yang akan dibuat.

Setelah itu, lakukan modifikasi (penambahan) pada skrip deploy.sh agar symbolic link tidak ikut ter-upload.

Karena kalau terupload, web-nya tidak akan bisa di-deploy oleh Github 馃槃.

#!/bin/bash

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

# Build the project.
hugo --config config.toml # if using a theme, replace by `hugo -t <yourtheme>`

# Go To Public folder
cd public

# hapus symbolic link img
rm -rf img

# Add changes to git.
git add -A

# Commit changes.
msg="rebuilding https://petanikode.com - `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back
cd ..

Dengan demikian, kita bisa menggunakan gambarnya baik saat online maupun offline.

Kalau ada kesalan pada gambar, tinggal ditindih dan di-push lagi ke Github.

Akhir Kata…

Itulah cara saya hosting gambar di Github untuk Hugo.

Terima kasih sudah menyimak artikel ini sampai akhir, semoga bermanfaat.