Cara Membuat Blog dengan Hugo dan Hosting Gratis di Github

JagoTekno.com - Guys, kamu ingin punya blog yang keren, tapi tidak mau bayar biaya hosting tahunan yang cukup mahal, ada satu cara yang bisa dilakukan.

Yap kita bisa membuat blog dengan menggunakan HUGO.

Jika anda baru mendengar HUGO, ini adalah artikel yang paling tepat untuk anda baca.

Karena tutorial yang akan diberikan dalam tulisan ini berisi step by step cara membuat blog Hugo dengan mudah sehingga para pemula bisa mengikutinya sampai berhasil.

Salah satu kelebihan HUGO adalah bisa dihosting ke mana saja bahkan dengan gratis?

Jika anda pernah membuat blog menggunakan Wordpress atau Blogger, maka alurnya akan bebeda jika sudah berkenalan dengan HUGO.

Karena HUGO sebenarnya adalah static site generator, berbeda dengan blog yang dibuat dengan wordpress yaitu dynamic content.

Di HUGO konten yang kita buat akan dicompile menjadi halaman-halaman html untuk ditampilkan ke layar. Artikel tidak disimpan di database, melainkan siap untuk ditampilkan saja sesuai request pengunjung.

Biar lebih jelasnya, mari kita kenalan dulu dengan Static site generator atau SSG.

Apa itu SSG?

SSG atau static site generator singkatnya adalah situs yang tidak perlu menggunakan web server dan database untuk berjalan karena sifatnya statis.

Tercatat ada lebih dari 300 jenis static site generator, misalnya Jekyll, Gatsby, NextJS, dan lain-lain.

Kelebihan situs SSG :

• Cepat, tidak ada loading yang lama karena tidak membutuhkan akses ke database untuk bisa memunculkan konten yang ingin disajikan.
• Memiliki SEO yang bagus.
• Bisa setting permalink sendiri. Tanpa tanggal yang ada di wordpress.com dan blogger.com.

Nah kalau anda jeli, beberapa fitur di atas bisa anda temukan di wordpress. Contohnya permalink yang bisa dicustom.

Keren yah, selanjutnya mari kita kenalan dengan Hugo.

Apa itu HUGO?

Hugo adalah salah satu site generator dari sekian banyak jenis static site generator yang bisa anda pilih.

Alasan memilih hugo adalah karena cocok untuk pemula, termasuk admin yang asli cupu banget menggunakannya.

Sebenarnya artikel ini hadir sebagai catatan penulis karena berhasil membuat blog/website menggunakan HUGO.

Kekurangan menggunakan HUGO

Menurut saya ini bukanlah kekurangan tetapi kendala bagi pemula, namanya juga belajar.

Ini hanya masalah learning curve saja.

Pada awalnya anda mungkin akan mengira bahwa membuat konten/artikel menggunakan HUGO itu ribet.

Bagaimana tidak jika kita harus membuka text editor seperti VSCODE lalu mengedit menggunakan markdown style.

Markdown style itu contohnya ketika ingin membuat judul artikel ditandai dengan tag html kan!

Nah di hugo kita menulisnya dengan markdown dengan diawali dengan tanda pagar contohnya ini :

\# Judul H1
Isi artikel pada paragraf pertama.
## Sub judul h2
Isi artikel pada paragraf selanjutnya.
### Sub sub judul h3
Isi artikel paragraf selanjutnya dan seterusnya sampai h6.

Saya yakin nanti anda akan sangat excited dengan melakukan hal ini. Tidak perlu edit banyak ketika artikel sudah ditampilkan ke situs yang akan kita buat.

Anda bisa latihan menulis markdown melalui situs https://dillinger.io/

Syarat menggunakan HUGO

Basic pengetahuan yang perlu diketahui untuk menggunakan HUGO adalah anda harus familiar dengan penulisan perintah pada terminal shell / terminal / command prompt / Command line interface.

Jika anda tahu html dan CSS, ini akan memudahkan.

Cara membuat blog Hugo

Pertama download dulu hugo ke komputer.

Ukurannya cukup kecil, hanya sekitar 20 mb saja, anda sudah mendapatkan mesin hugo di komputer anda.

Jika menggunakan linux anda bisa mendapatkannya melalui repository distro anda.

Jika anda menggunakan Windows dan Mac, anda bisa mengikuti langkah-langkahnya instalasinya di situs resmi Hugo.

Membuat situs HUGO pertama anda

1. Setelah hugo terinstall di komputer anda, mari kita meyiapkan situs yang akan dibuat dengan HUGO.
2. Pertama buatlah folder baru misalnya bernama folderhugoku.
3. Lalu masuk ke folder tersebut klik kanan di layar dan pilih open in terminal, atau anda juga bisa menggunakan cd folderhugoku
4. Ketik hugo new site namabloghugo untuk membuat situs hugo anda
5. Dalam beberapa detik blog hugo anda pun jadi dengan nama namabloghugo
6. Selanjutnya install theme hugo di ke folder /themes yang sudah otomatis muncul di folder namabloghugo.
   • Anda bisa pilih berbagai macam tema hugo di https://themes.gohugo.io/
   • Perlu diketahui setiap tema memiliki pengaturan yang berbeda-beda. Sempat dibikin pusing karena banyaknya struktur tema HUGO yang bisa dipilih. Maka dari itu saya memilih tema yang sederhana saja yaitu Etch - https://themes.gohugo.io/etch/
7. Selanjutnya pada tema tersebut ubah file config.toml sesuai dengan dokumentasi tema.
   • Penting! Pada bagian base URL ubah sesuai dengan url githubpages yang akan dibuat anda nanti. Penjelasannya ada di bawah, jadi pastikan anda edit file ini sebelum upload ke repository github anda.
8. Untuk membuat post pertama di hugo silahkan ketik hugo new post/artikel-pertama.md
9. File artikel-pertama.md itu akan secara otomatis muncul di folder content » post
   • Postingan di hugo memiliki file dengan akhiran .md (markdown), jadi pastikan anda menambahkannya di akhir.
   • Tulisan post sendiri adalah folder yang akan dibuat untuk menyimpan artikel. Anda bisa ganti menjadi blog atau lainya dengan cara mengetikkan perintah
   • hugo new blog/artikel-kedua.md
   • Jadi file artikel-kedua.md ini akan berada di dalam folder blog.
10. Tulislah artikel anda di sana lalu ganti draft dari true menjadi false * Untuk menulis artikel di HUGO kita menggunakan format Markdown. * Markdown itu kita hanya menulis saja, untuk konfigurasi heading, di depannya berikan tanda pagar (# ) yang diikuti spasi. Misalnya ingin menulis H1, maka ketik # judul heading 1. Maka setelah dipublish, format markdown akan otomatis akan terbaca di situs hugo anda nanti. * Keren yah, menulis ala programmer.
11. Kemudian jika anda ingin test situs anda silahkan buka terminal pada folder namabloghugo lalu ketik hugo server. Jangan di sembaran folder karena perintah itu tidak akan terbaca.
12. Anda bisa melihat preview situs anda di localhost:1313, seperti yang tertulis di terminal nantinya.
13. Selamat sekarang anda sudah punya situs statis berbasis hugo. Keren.

Selanjutnya mari kita upload ke github supaya orang-orang bisa membaca tulisan anda. Istilah teknisnya adalah deploy.

Cara deploy situs Hugo di Github

Caranya sangat mudah, di sini saya meringkasnya saja supaya sesama pemula bisa gampang mengukutinya.

1. Buatlah akun di github terlebih dahulu. Ini gampang kan yah.
2. Setelah memiliki sebuah akun di github, buatlah repository baru yang namanya sama dengan nama username anda di github.
   • Misalnya anda memiliki username di github dengan nama githubku maka repository yang anda buat adalah githubku.github.io
3. Kembali ke terminal di folder namabloghugo di komputer anda. Ketik hugo -v maka seketika hugo akan membuat sebuah folder bernama public.
   • Isi folder ini yang akan diupload ke github.
4. Sekarang masuk ke folder namablghugo/public dengan mengetik perintah cd public.
5. Lakukan inisialisasi git di dalamnya dengan ketik git init
6. Selanjutnya menambahkan repository remote init dari folder public. ketik git add remote add origin urlrepository
   • Misalnya yang sudah kita buat yaitu git remote add origin https://github.com/githubku/githubku.github.io.git
7. Selanjutnya kita deploy / upload ke repository github tujuan kita dengan perintah berurutan :
   1. git status
   2. git add .
   3. git commit -m “isi pesan”
   4. git push -u origin master #tulisan master merujuk ke nama branch yang digunakan github anda, bisa saja nama branch anda bernama main maka ketik git push -u origin main.
8. Tunggu beberapa saat maka situs anda akan bisa diakses malalui github pages anda di alamat yang sudah berikan tadi yaitu : githubku.github.io
   • Anda bisa cek github pages anda di setting repository lalu temukan github pages di bagian bawah.
9. Jika anda sudah menambah artikel baru di local/laptop anda, itu tidak akan langsung muncul di situs anda. Anda harus melakukan langkah 3, dilanjutkan langkah 7 di atas. Begitu seterusnya.

Cara ini berhasil admin lakukan setelah 2 hari berpusing-pusing mempelajari perintah-perintah Git dan Github.

Selanjutnya di masa depan, misalnya folder blog anda yang ada di kompter dihapus atau anda ganti komputer baru, tenang saja karena anda hanya perlu untuk melakukan clone repository anda ke komputer lalu rename nama folder hasil clone tersebut dengan nama public lalu simpan di dalam folder produksi hugo anda (dalam tutorial ini yaitu di folder namabloghugo). Kemudian setelah membuat artikel baru, anda hanya perlu melakukan inisialisasi git sampai melakukan push.

Akhir kata

Akhirnya demikian cara membuat situs / blog keren dengan menggunakan Static site generator (SSG) Hugo.

Semoga membantu.