Tips dan Cara Saya Hosting Gambar untuk Hugo di Github
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.
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.
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.
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:
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.
Kemudian saya gunakan seperti ini:
Akan tetapi, rasanya sama seperti ngeblog dengan CMS.
Malah lebih repot, karena harus copas URL-nya.
Cara Hosting Gambar di Github dengan Repositori Terpisah
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.
Setelah itu, aktifkan fitur Github Pages pada repositori tersebut.
Masuk ke Settings, kemudian pada Github Pages pilih branch master.
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.gitSSH:
git clone [email protected]:username/img.gitTambahkan gambar, lalu commit dan push.
git add .
git commit -m "gambar baru"
git push origin master(Serasa seperti lagi ngoding)
Cara pakai gambarnya sama seperti tadi:
Tapi dengan syarat, kita harus membuat symbolic link ke direktori static.
ln -sf ~/img ~/petanikode-hugo/static/Keterangan:
~/imgadalah 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.