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

Pre-requisite

Sebelum melanjutkan membaca postingan ini, pembaca diharapkan untuk memenuhi persyaratan sebagai berikut:

  1. Mempunyai koneksi internet

  2. Mempunyai akun GitHub

    Untuk membuat akun GitHub, silahkan ke sini].

  3. 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 hugo-create-new-repository.png

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

hugo-getting-started-vscode 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 hugo-change-theme.png

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

hugo-build-and-live-preview.png

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 hugo-live-preview-blog.png

Berikut adalah tampilan live preview dari post Hello World yang telah di-build menggunakan hugo hugo-live-preview-post.png

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