author Ahmad Muhardian

Migrasi Petani Kode dari Blogger ke Hugo


Tercatat pada tanggal 11 Januari 2017, website Petani Kode mulai dikembangkan ulang dengan mesin (engine) Hugo. Hugo adalah salah satu mesin generator web statis yang berusia cukup muda.

Hugo ditulis dengan bahasa pemrograman Go dan diklaim lebih cepat dari mesin sejenisnya seperti Jekyll, Middleman, Octopress, dsb.

Pengembangan website Petani Kode berlangsung cukup cepat. Meskipun bahasa pemrograman Go belum pernah saya pelajari dan pahami.

Namun, berkat kerja keras dan semangat website ini bisa jadi dalam waktu sekejap.

Ya, karena di Hugo kita tidak menulis kode Go, melainkan hanya bermain pada template Go yang mirip-mirp seperti template engine pada umumnya.

Kesulitan saya rasakan ketika belum paham fungsi dan variabel dalam template Go. Namun, itu bukanlah kendala. Karena Hugo sudah menyediakan dokumentasi yang lengkap dan forum disksui tempat bertanya.

Saya tidak sadar sudah menulis kode CSS hampir 700 baris. Tema ini jadi dalam waktu dua setengah hari. Tema ini menerapkan AMP yang dikembangkan dari tema AMP Starter.

Proses Migrasi

Sebelum dan Sesudah Migrasi

Tabel perbandingan:

ItemSebelumSesudah
HostingBloggerGitlab (untuk source), Netlify (untuk production)
Hosting GambarGoogle/BloggerGoogle/Blogger, CDN Netlify
DNSIdwebhostCloudflare
EngineBloggerHugo
Template EngineXML BloggerGo Template, Ace
Format ArtikelHTMLMarkdown, HTML
FontOpen Sans, Roboto, Merriweather, Font-awesomeMerriweather, PT Sans
Font ProviderGoogle Font, Wordpress, CDN BootstrapGoogle Font
Sistem KomentarDisqus, Blogger, FacebookDisqus

Petani Kode memilih hosting di Gitlab karena di sana bisa membuat private repositori dan langsung terintegaris dengan CI.

Sedangkan di Github, tidak bisa membuat repositori private kalau menggunakan akun gratis. Kemudian, saya juga pernah mencoba di Bitbucket. Akan tetapi terbatas dengan deploy, minimal 5x deploy per hari.

Update: (13 Februari 2018) Petani kode sudah migrasi ke Netlify untuk production dan Gitlab untuk menyimpan source

ItemGithubGitlabBitbucket
Maksimal Ruang Repositori1GB10Gb10GB
Private Repositorypremiumyaya
Dukungan HTTPSgithub.ioyaya
PagesGithub pagesGitlab PagesAerobatic

Sebelum migrasi, penulisan artikel dilakukan dengan membuka Blogger. N amun setelah migrasi, penulisan artikel bisa dilakukan di teks editor mana saja. Rasanya seperti menulis kode, dan kalau ingin diterbitkan tinggal melakukan push ke repositori git.

Penulisan Artikel di Blogger vs Hugo

Perbandingan skor kecepatan, analisis gtmetrix.

Hasil analisis gtmetrix

Validasi AMP

Validasi AMP

Kenapa Petani Kode Migrasi ke Hugo?

Ini alasan kenapa Petani Kode migrasi ke Hugo…

1. Template Blogger Masih menggunakan XML

Saya merasa kesulitan memodifikasi template blogger yang berbasis XML.

Dokumentasinya juga sangat minim…

Selain itu, kita tidak bisa membuat template secara offline.

2. Agar Bisa Edit Artikel dan Template Secara Offline

Hugo tidak memiliki halaman admin seperti Blogger dan Wordpress.

Bila kita ingin mengisi konten atau menulis artikel, kita harus membuat dokumen markdown melalui teks editor.

Penulisan Artikel Hugo menggunakan teks editor Atom

Namun, bisa juga menggunakan layanan seperti Netlify CMS dan Forestry.io untuk adminnya.

Tapi saya lebih senang menulis dari teks editor. Karena terasa seperti ngoding. 😄

3. AMP Susah Valid

(Update: 13 Februari 2018 – Petanikode sudah tidak lagi menerapkan AMP)

Validator AMP sangat ketat dalam menilai web. Kita dilarang keras menggunakan Javascript. Karena Javascript katanya dapat memperlambat web.

Sementara itu, di Blogger banyak menggunakan Javascript; dan parahnya lagi, di sana untuk load widget-nya pakai Javascript.

Validasi AMP

Pada Hugo, saya tidak menggunakan Javascript. Kecuali Javascript bawaan AMP. Hasilnya pun valid tanpa error.

4. Agar Terbiasa Menggunakan Git

Saya harus menggunakan Git setiap kali ingin update blog. Karena setiap selesai menulis, saya harus push ke repositori Gitlab.

Keuntungan menggunakan Git:

  • Semua versi dari source blog kita akan tersimpan di dalam satu tempat
  • Bisa diintegrasikan dengan CI/DI

5. Ingin Mencoba Teknologi Baru

Ngeblog dengan SSG (Static Site Generator) belum begitu populer di Indonesia. Oleh karena itu, saya menganggap Hugo adalah teknologi baru.

Meskipun sudah ada pendahulunya, yaitu Jekyll dan kawan-kawan.

Versi Hugo saat tulisan ini dibut adalah 0.18.

Meski belum mencapai versi 1.0, tidak ada salahnya untuk dicoba.

Ketika mengembangkan Petani Kode, saya sedikit kesulitan, karena hasil pencarian Google hanya mengarah ke dokumentasi Hugo, Forum Hugo, dan Isu Hugo di Github.

Sangat jarang ke Stack Overflow. Namun, itu bukanlah kendala.

Baca Juga ini

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

Belajar PHP: Konsep Dasar Pemrograman PHP yang Harus Dipahami Pemula

Belajar PHP: Konsep Dasar Pemrograman PHP yang Harus Dipahami Pemula

Pelajari gimana konsep dasar pemrograman PHP. Gimana sih cara membuat web dengan PHP? Mengapa kita harus pakai PHP? dan gimana alur coding dengan PHP? Baca selengkapnya...

Cara Mengatasi Serangan XSS pada CodeIgniter

Cara Mengatasi Serangan XSS pada CodeIgniter

Yakin aplikasimu sudah aman dari serangan XSS? Pada tutorial ini kita akan belajar melakukan serangan XSS dan juga mitigasi agar aplikasi kita terhindar dari XSS.

Helper CodeIgniter untuk Membuat Tanggal dalam Bahasa Indonesia

Helper CodeIgniter untuk Membuat Tanggal dalam Bahasa Indonesia

Saat kita membuat sbuah tanggal otomatis dengan fungsi Date(), kita akan mendapatkan hasil dalam format bahasa inggris. Contoh, Date(’d F Y’) akan menghasilkan output 22 December 2016 (sesui tanggal sekarang). Format penanggalan ini mungkin tidak begitu penting bagi sistem yang tidak digunakan di tempat formal. Namun, bagaimana kalau untuk membuat surat atau laporan formal. Pastinya, kita dituntut untuk menggunakan bahasa indonesia yang baik dan benar. Hal yang perlu kita lakukan untuk merubah tanggal ke dalam bahasa indonesia adalah merubah nama-nama bulan dari fungsi Date().

Cara Menggunakan Composer pada CodeIgniter

Cara Menggunakan Composer pada CodeIgniter

Composer sangat dibutuhkan apabila kita bekerja dengan banyak library. Composer akan membantu kita menginstal, men-download, meng-update, dan mencarikan depedency dari library yang digunakan. Pada CodeIgniter, composer sudah mulai didukung pada versi 3. Namun, autoload-nya belum diaktifkan secara default. Pada kesempatan ini, saya akan membahas cara konfigurasi CodeIgniter agar dapat mengunakan Composer. Mari kita mulai… Konfigurasi CodeIgniterBuka file konfigurasi CodeIgniter pada application/config/config.php. Kemudian isi nilai autoload untuk Composer seperti beikut ini:

Cara Menggunakan Composer untuk Manajemen Proyek PHP

Cara Menggunakan Composer untuk Manajemen Proyek PHP

Bayangkan kita sedang mengerjakan proyek web dengan PHP. Kemudian kita membutuhkan beberapa library untuk melengkapi proyek ini. Biasanya, kita men-download sendiri library-nya dari internet. Tapi… Kadang library yang satu dengan yang lain saling membutuhkan agar bisa digunakan. Hal ini disebut depedency (keterkaitan/ketergantungan). Contohnya: Library X membutuhkan library Y agar bisa digunakan, kemudian library Y membutuhkan library Q,R,S. “Bagaimana kalau ada banyak sekali library yang digunakan?” Pastinya akan repot mencari sendiri depedency library-nya.