Sudah dua tahun lebih saya tidak ngeblog, cukup lama juga blog ini nggak kopèn. Setelah sekian lama, akhirnya kelakon juga saya menulis di sini lagi. Kali ini saya akan menulis tentang framework untuk membuat blog ini. Sebelumnya blog ini dibuat menggunakan Jekyll dan dihosting di GitHub Pages.

Jekyll, kalau boleh saya bilang framework ini lumayan ribet dan rumit. Biasanya sebelum posting ke blog, saya melakukan pratinjau di mesin Linux saya dengan perintah:

1
$ jekyll serve

Tapi, entah kenapa setelah melakukan ritual update di mesin Arch Linux saya waktu itu Jekyll tidak bisa dijalankan seperti biasanya. Sekalinya sudah bisa dijalankan tampilan blog tidak sesuai dengan yang saya atur sebelumnya. Itulah yang menjadi salah satu alasan kenapa blog ini tidak update selama ini. 😅

Sekitar pertengahan tahun 2017 yang lalu saya mendengar tentang Hexo. Setelah membaca artikel tentang Hexo saya punya rencana untuk mulai membuat blog dengan Hexo dan memindahkan tulisan-tulisan saya. Berhubung waktu itu saya tidak selo dan lupa (halah), maka baru hari ini saya memulainya. Kemungkinan tulisan-tulisan saya di blog yang lain juga akan dipindahkan ke blog ini. 😁

Apa itu Hexo?

Hexo adalah framework blog yang cepat, sederhana dan powerfull yang didukung oleh Node.js. Hexo ini konon katanya super cepat, hanya membutuhkan waktu beberapa detik untuk membangun sebuah website lengkap. Dokumentasi lengkapnya ada di https://hexo.io/docs/.

Fitur

  • Blazing fast generating
  • Mendukung Markdownnya GitHub dan plugin-plugin Octopress
  • One-command deploy ke GitHub Pages, Heroku, dll
  • Sistem plugin yang powerfull

Instalasi

Untuk instalasi cukup gampang, yang penting nodejs dan git sudah diinstall di mesin:

1
$ npm install hexo-cli -g

Instalasi Hexo di Arch Linux melalui AUR menggunakan yaourt, packer atau program yang sejenisnya:

1
$ yaourt -S nodejs-hexo-cli

Ngeblog

Perintah yang digunakan untuk mulai membuat blog dengan Hexo:

1
2
3
$ hexo init <blog>
$ cd <blog>
$ npm install

Isi dari direktori blog:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

Konfigurasi blog ada di berkas _config.yml. Info lebih lanjut: https://hexo.io/docs/configuration.html.

Membuat tulisan baru

Untuk membuat tulisan baru cukup gampang:

1
2
$ hexo new post "Judul"
INFO  Created: ~/dev/github/blog/source/_posts/Judul.md

Info lebih lanjut: https://hexo.io/docs/writing.html

Jalankan server

Untuk melihat pratinjau blog yang baru saja dibuat:

1
2
3
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

Info lebih lanjut: https://hexo.io/docs/server.html

Generate berkas statis

Membuat berkas statis dengan Hexo cukup gampang dan cepat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$ hexo generate
INFO  Start processing
INFO  Files loaded in 213 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: archives/2018/03/index.html
INFO  Generated: archives/2018/index.html
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: js/script.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: 2018/03/11/hello-world/index.html
INFO  Generated: 2018/03/11/Judul/index.html
INFO  29 files generated in 710 ms

Info lebih lanjut: https://hexo.io/docs/generating.html

Deploy

Sebelum deploy ke GitHub, pasang dulu plugin hexo-deployer-git:

1
$ npm install hexo-deployer-git --save # <~ dijalankan di dalam direktori blog

Edit berkas _config.yml lalu atur bagian deployment:

1
2
3
4
5
deploy:
  type: git
  repo: <repo github>
  branch: master
  message: <message>

Info lebih lanjut: https://hexo.io/docs/deployment.html

Untuk deploy blog bisa menggunakan salah satu perintah di bawah ini:

1
2
3
4
5
$ hexo deploy       # <~ deploy blog
atau
$ hexo deploy -g    # <~ generate blog lalu deploy
atau
$ hexo generate -d  # <~ generate blog lalu deploy

Yeaah! Sekarang go2n.github.io sudah pakai Hexo! 🤘🏼 😎