in FOSS

Cara Membuat Website dengan Hugo Static Site Generator

Cara Membuat Website dengan Hugo Static Site Generator

Hugo adalah static site generator yang dibangun menggunakan bahasa pemrograman Go (Golang). Maksudnya static site generator itu seperti apa? Cara kerjanya seperti ini, kita membuat konten website melalui text editor dalam format Markdown (.md). Hugo kemudian mengubah konten dalam format Markdown tadi menjadi HTML. Static site juga tidak membutuhkan database sehingga aksesnya bisa lebih cepat tanpa harus melakukan query konten di database.

Beberapa website besar yang menggunakan Hugo yaitu, Let’s Encrypt, Linode Docs, 1Password Support, StackImpact, dan Forestry.io.

0. Install Hugo di Ubuntu

Download installer Hugo di GitHub, mendukung berbagai sistem operasi seperti Windows, Linux, macOS, FreeBSD, OpenBSD, NetBSD, dan DragonFlyBSD. Sistem operasi di laptop saya menggunakan Ubuntu 18.04 64bit, jadi Hugo installer yang dibutuhkan adalah Hugo Linux 64bit.deb.

Install Hugo di distro Linux berbasis Ubuntu/Debian 64bit.

sudo dpkg -i hugo_0.56.3_Linux-64bit.deb

Uji hasil instalasi.

hugo version

Hugo Static Site Generator v0.56.3-F637A1EA linux/amd64 BuildDate: 2019-07-31T12:51:09Z 

Install juga git.

sudo apt install git

1. Membuat Website Hugo

Langkah selanjutnya membuat website Hugo, di sini saya memberi nama ‘blog’. Hugo akan generate direktori bernama ‘blog’ dan berisi struktur dasar Hugo.

hugo new site blog

Congratulations! Your new Hugo site is created in /home/musa/www/test/blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
Cara Membuat Website dengan Hugo Static Site Generator di Ubuntu

Membuat website Hugo baru

Melihat isi direktori website Hugo.

cd blog
ls -l

drwxr-xr-x 2 musa musa 4096 Agu  5 16:33 archetypes
-rw-r--r-- 1 musa musa   82 Agu  5 16:33 config.toml
drwxr-xr-x 2 musa musa 4096 Agu  5 16:33 content
drwxr-xr-x 2 musa musa 4096 Agu  5 16:33 data
drwxr-xr-x 2 musa musa 4096 Agu  5 16:33 layouts
drwxr-xr-x 2 musa musa 4096 Agu  5 16:33 static
drwxr-xr-x 2 musa musa 4096 Agu  5 16:33 themes
Cara Membuat Website dengan Hugo Static Site Generator di Ubuntu

Isi direktori website Hugo

2. Install Theme

Selanjutnya install themes, di sini saya menggunakan themes Beautiful Hugo.

git init
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo  
Cara Membuat Website dengan Hugo Static Site Generator di Ubuntu

Install theme

Ubah config.toml agar memakai theme yang sudah didownload.

nano config.toml

Memasukkan konfigurasi theme = “beautifulhugo”.

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "beautifulhugo"

3. Membuat Postingan

Selanjutnya membuat postingan artikel.

hugo new post/cara-install-apache-ubuntu.md

Postingan yang digenerate berada di direktori content/post/judul-postingan.md.

Edit file postingan untuk mengisi konten, penulisannya menggunakan markdown syntax.

nano content/post/cara-install-apache-ubuntu.md

Isinya.

---
title: "Cara Install Apache Ubuntu"
date: 2019-08-05T17:24:00+07:00
draft: false
tags:  ["linux", "ubuntu", "apache"]
categories: ["sysadmin"]
---

Apache adalah aplikasi web server atau HTTPD server.

Cara install Apache di Ubuntu cukup mudah.

sudo apt install apache2 -y

Cek service apache2.

sudo systemctl status apache2

Selamat mencoba :)

4. Menjalankan Development Server

Lalu jalankan hugo server untuk build website Hugo dan menjalankan server. CTRL + C untuk menghentikan server.

Cara Membuat Website dengan Hugo Static Site Generator di Ubuntu

Jalankan server

hugo server

Browsing http://localhost:1313 untuk melihat hasilnya.

Cara Membuat Website dengan Hugo Static Site Generator di Ubuntu

Halaman depan

Cara Membuat Website dengan Hugo Static Site Generator di Ubuntu

Halaman postingan

Untuk tahap deploy ke GitLab Pages akan saya tulis terpisah di artikel berikutnya.

Selamat mencoba 🙂

Write a Comment

Comment