Cara Menulis Artikel Hugo dengan format Markdown

Deuxly - Membuat Blog dengan Hugo di Android! Ini merupakan artikel pertama saya di blog deuxly.net, sebelumnya saya sudah pernah buat artikel serupa di blog yang lain. Namun di blog ini akan saya jelaskan kembali Tutorial Membuat Blog dengan Hugo di Android menggunakan Termux.

Anda yang biasanya ngeblog pasti sudah sangat familiar dengan blogger maupun wordpress tetapi, bagaimana dengan blog statis? mungkin bagi anda ini adalah hal baru. Kenyataan nya Website Statis ini sudah ada sejak beberapa tahun kebelakang dan memang belum populer di Indonesia.

Saya akan coba jelaskan secara singkat Apa itu Static Site Generator.

Apa itu Static Site Generator

Static site generator adalah tools yang dapat membantu anda mengubah website atau blog menjadi file file statis yang terdiri dari HTML, CSS dan Javascript untuk dinikmati oleh pengunjung website atau blog anda nantinya. Inti nya adalah, ya situs yang hanya terdiri dari file HTML CSS dan Javascript.

Apa saja Platform Static Site Generator

Ada beberapa platform yang menyediakan static site generator diantaranya adalah sebagai berikut.

1. Jekyll
2. Gatsby
3. Hugo
4. Next.js
5. Nuxt.js
6. Astro

Diantara ke-6 di atas, saya sangat menyarankan untuk nyoba dulu membuat blog dengan Hugo karena, Hugo ini bener bener mudah untuk dipelajari dan proses build, deploy nya juga terbilang lebih cepat dibanding yang lain.

Apa Keunggulan Static Site ?

Pastinya blog maupun website statis memiliki keunggulan, dibawah ini akan saya berikan kelebihan maupun keunggulan menggunakan website statis.

1. Cepat Dalam segi Performa Karena, situs versi statis ngga butuh yang namanya database, sudah pasti kecepatan nya ngga diragukan lagi
2. Ngga perlu bayar Hosting, anda bisa deploy website statis hugo secara gratis di netlify, github pages dan vercel.
3. Keamanan situs terjaga karena tidak ada interaksi dengan database.

Langkah-Langkah Membuat Blog dengan Hugo

Karena di tutorial membuat blog dengan hugo yang saya buat ini menggunakan termux, silahkan dipersiapkan terlebih dahulu aplikasi nya.

Gunakan termux versi F-Droid agar fitur yang didapatkan lebih maksimal.

Install Hugo

Jika termux sudah terinstall, masukkan command dibawah ini pada terminal termux anda

apt-get update
apt-get install hugo

Bisa juga menggunakan perintah ini

pkg update && apt upgrade -y
pkg install hugo -y

Setelah penginstallan pkg selesai, langkah selanjutnya yaitu menginstall git pada termux.

pkg install Git

Setelah menginput perintah tersebut, Hugo akan otomatis terinstall, silahkan tunggu sampai selesai proses penginstallan. Untuk melihat apakah Hugo sudah terinstall, ketik command dibawah ini

hugo version

di android saya, hugo sudah terinstall dengan detail sebagai berikut

hugo v.0.126.1 extended

Membuat Blog baru dengan Hugo

Langkah berikutnya yaitu membuat blog baru dengan hugo, untuk mengeksekusi nya silahkan ketik perintah dibawah ini

hugo new site testhugo

Kemudian akan muncul output seperti ini di terminal termux kalian

Congratulations! Your new Hugo site was created in /data/data/com.termux/files/home/testhugo.

Just a few more steps...                                          
1. Change the current directory to /data/data/com.termux/files/home/testhugo.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

Command hugo new site akan membuat sebuah blog baru di terminal kalian dengan folder testhugo

Struktur blog hugo nya akan seperti dibawa ini

├── ├── archetypes
│   └── default.md
├── config.toml
├── content
├── layouts
│   └── partials
│       ├── footer_custom.html
│       └── head_custom.html
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes

Menambahkan Tema pada Hugo

Tema sangat penting, oleh karena itu kita akan menambahkan tema pada blog hugo. Silahkan masuk terlebih dahulu kedalam folder testhugo

Masukkan perintah dibawah ini

cd hugo

disini saya akan memberikan contoh menggunakan tema coder, anda bisa coba menggunakan tema yang sesuai dengan selera, bisa dilihat di official website hugo

Ketik perintah dibawah ini

cd testhugo
git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

Setelah tema terinstall, masuk kedalam folder tema dengan memasukkan perintah

theme = "coder"

untuk melihat tampilan blog yang sudah anda buat, bisa ketikkan perintah

hugo server -D

jangan lupa untuk menambahkan tema pada file hugo.toml agar tema nya bisa digunakan pada blog.

Setelah memasukkan perintah di atas, nanti akan muncul output seperti dibawah

Watching for changes in /data/data/com.termux/files/home/d/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /data/data/com.termux/files/home/d/hugo.yaml
Start building sites …
hugo v0.126.1+extended android/arm64 BuildDate=unknown

                   | EN
-------------------+-----
  Pages            | 32
  Paginator pages  |  1
  Non-page files   |  0
  Static files     |  5
  Processed images |  0
  Aliases          |  6
  Cleaned          |  0

Built in 902 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Buka Google Chrome atau browser kemudian masukin url http://localhost:1313 dan anda telah berhasil Membuat Blog dengan Hugo di Android

Kesimpulan

Pertimbangkan terlebih dahulu sebelum terjun, menggunakan hugo sebagai platform blogging bisa dibilang susah susah gampang. Untuk menulis artikel anda harus membuat nya dengan sistem Markdown.

Apabila ingin migrasi dari Hugo ke Wordpress sangat ribet, tidak seperti migrasi dari wordpress ke hugo yang bisa dibantu menggunakan plugin.