Hai, selamat datang di blog saya dan mari sambut tulisan / post blog pertama saya. Dalam post kali ini, saya akan membahas bagaimana caranya untuk membuat blog menggunakan Hugo tanpa harus memliki VPS (Virtual Private Server).
Daftar Isi
- Daftar Isi
- Pre-requisite
- Instalasi / Pemasangan
- Membuat Repository Baru
- Membuat Blog Baru
- Mengelola Blog
- Cara Build Hugo
- Live Preview
- Deploy Hugo & Go Live!
Pre-requisite
Sebelum melanjutkan membaca postingan ini, pembaca diharapkan untuk memenuhi persyaratan sebagai berikut:
-
Mempunyai koneksi internet
-
Mempunyai akun GitHub
Untuk membuat akun GitHub, silahkan ke sini].
-
Mempunyai text editor Visual Studio Code
Untuk memasang Microsoft Visual Studio Code, silahkan ke sini.
Instalasi / Pemasangan
NixOS
Install Hugo menggunakan nix-shell
nix-shell -p hugo git
Ubuntu / Debian
Install Hugo menggunakan apt
sudo apt update && sudo apt install hugo git
MacOS
Install Hugo menggunakan homebrew
brew install hugo
brew install hugo
Membuat Repository Baru
Sebelum membuat blog, kita harus membuat GitHub repository di Github.com bernama my-new-site
Membuat Blog Baru
Clone repository yang sudah dibuat sebelumnya. Dikarenakan repository saya ada di https://github.com/BangDevOpsCom/my-new-site
, saya clone repository saya menggunakan perintah di bawah ini:
git clone https://github.com/BangDevOpsCom/my-new-site
Untuk membuat website baru, bisa menggunakan perintah hugo new site $NAMA_WEBSITE
. Berikut adalah contoh untuk membuat website baru bernama my-new-site
hugo new site my-new-site --force
Setelah perintah di atas dieksekusi, hugo
akan membuat direktori baru dengan nama my-new-site
Mengelola Blog
Dalam bagian ini, kita akan mulai mengelola blog baru bernama my-new-site
seperti menambahkan postingan blog, merubah tampilan (themes
), mem-build
static asset, serta mengkonfigurasi blog sesuai keinginan kita sendiri
Menambahkan Post
Sebelum mulai untuk membuat posingan baru, kita dapat menggunakan Microsoft Visual Studio Code sebagai development tool kita. Berikut adalah perintah untuk memulai menggunakan Microsoft Visual Studio code di terminal
code my-new-site
Untuk membuat posting baru berjudul Hello World, ketikan perintah berikut pada Microsoft Visual Studio Code Integrated terminal
hugo new content content/posts/hello-world.md
Perintah di atas akan membuat file baru dengan nama hello-world.md
pada direktori content/posts
Jika Integrated Terminal tidak muncul, gunakan shortcut keyboard berikut untuk menampilakan nya
MacOS
⌃`
Linux
Ctrl `
Untuk memulai menulis isi content dari post hello-world.md
, kita bisa menggunakan vscode
code content/posts/hello-world.md
Jangan lupa untuk menyimpannya
Mengganti Tema Blog
Untuk megganti tema blog menggunakan PaperMod, ikuti langkah berikut
Clone PaperMod repository menggunakan git
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
Update Konfigurasi Hugo
Untuk meng-update konfigurasi hugo untuk menggunakan tema PaperMod
kita bisa menambahkan ini file hugo.toml
Cara Build Hugo
Setelah post file disimpan dan tema sudah di-konfigurasi, kita bisa mencoba untuk mem-build
static asset
dari blog kita dan bisa langsung melihat live preview
dengan menggunakan perintah di bawah ini di integrated terminal
hugo server --cleanDestinationDir -D
Setelah build selesai, kita bisa melihat live preview blog kita di http://localhost:1313
. Kita bisa melihatnya menggunakan browser
Live Preview
Berikut adalah tampilan live preview dari halaman utama blog yang telah di-build menggunakan hugo
Berikut adalah tampilan live preview dari post Hello World yang telah di-build menggunakan hugo
Deploy Hugo & Go Live!
Banyak cara untuk deploy Hugo. Kalian bisa memilihnya sesuai dengan keinginan / kebutuhan masing masing.
GitHub Pages
Untuk men-deploy blog menggunakan GitHub Pages, silahkan ke sini