Membuat Blog dengan Hexo dan Netlify

Artikel ini adalah versi lain dari artikel yang saya buat sebelumnya tentang cara membuat blog menggunakan Gitlab Page dan Hexo. Kali ini, kita tidak akan menggunakan cara fork sample Gitlab Page, tapi langsung menggunakan hasil init blog dari hexo itu sendiri.

Install Hexo

Artikel ini dibuat menggunakan perintah-perintah untuk pengguna ubuntu dan turunannya. Jadi bagi pembaca yang menggunakan sistem operasi lain tinggal menyesuaikan saja.

Sebelum meng-install Hexo, pastikan di sistem anda sudah terpasang node.js dan paket manajernya.

sudo apt install nodejs npm

Untuk Mac OS dan Windows, bisa men-download Installer di situs nodejs.org

Setelah node.js terpasang, langkah selanjutnya adalah meng-install Hexo dan menambahkan blog di Localhost.

npm install hexo-cli -g
hexo init blog
cd blog
npm install

Tes generate dan jalankan di Localhost menggunakan perintah di bawah ini lalu ctrl + click link yang muncul di terminal.

hexo generate && hexo server

Jika berhasil, Browser akan membuka link tersebut dan blog menampilkan Hello world dengan tema Landscape bawaan Hexo.

Konfigurasi Blog

Go to the next step… Buka file _config.yml yang ada di dalam directory blog menggunakan teks editor kesayangan anda. Bagian # Site adalah tempat kita mengatur judul blog, sub-judul, deksripsi, kata kunci, penulis, bahasa dan zona waktu. Berikut ini adalah contoh punya saya. Edit sesuai keinginan anda.

# Site
title: Aflasio
subtitle: No art no life
description: Portfolio of a FLOSS user artist
keywords: aflasio
author: Sira Argia
language: en
timezone: UTC

Bahasa yang digunakan secara default adalah en. Jika anda ingin mengubahnya, anda bisa menggunakan dua huruf dari code ISO-639-1. Dan untuk zona waktu, jika anda masih di wilayah indonesia, gunakan UTC atau lihat di sini.

Bagian penting lainnya adalah # URL. Bagian ini mengatur alamat website anda, letak root, dan permalink.

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.aflasio.com
root: /
permalink: post/:title/
permalink_defaults:

Pada bagian url, karna kita akan hosting di Netlify, maka kita akan menggunakan domain netlify.com. Isi dengan format seperti namaanda.netlify.com. Jangan khawatir bila nama itu tidak bisa digunakan, anda bisa menggantinya nanti. Lalu bagaimana jika misalnya anda sudah membeli domain seperti namaanda.com? anda bisa langsung menulisnya dengan format http://www.namaanda.com, pada akhir tutorial saya akan memberikan cara mengatur DNS-nya.

Lalu pada bagian root, cukup isi dengan / jika blog berada pada directory utama atau /blog jika blog berada di sub-directory. Biasanya /blog ini digunakan untuk situs yang menempatkan blog di dalam sebuah website, misalnya www.namaanda.com/blog

Terakhir, permalink atau permanen link, adalah URL yang mengarah pada suatu artikel blog atau forum tertentu setelah melewati halaman depan. Karna permalink bersifat permanen, maka kita tidak boleh mengubahnya bila sudah diatur karna akan memakan waktu lama bagi mesin pencari untuk meng-update index URL artikelmu. Secara default, Hexo mengatur permalink menjadi :year/:month/:day/:title/ dimana link artikel anda akan ditampilkan menjadi seperti

http://www.namaanda.com/2018/12/4/judul-artikel

tapi saya pribadi lebih suka seperti

http://www.namaanda.com/post/judul-artikel/

Jika anda ingin menggantinya seperti itu, ganti permalink default menjadi post/:title/.

Bagian penting terakhir adalah # Pagination, kita bisa mengatur jumlah artikel yang tampil di halaman depan.

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

Pada contoh di atas, saya membatasi 10 artikel saja yang tampil di halaman depan. Jika anda ingin menampilkan seluruh artikel, maka anda bisa menggantinya menjadi 0. Tapi saya tidak menyarankannya karena berpengaruh pada kecepatan load halaman.

Untuk informasi lebih lengkap mengenai konfigurasi blog, dapat anda liat panduan lengkapnya pada halaman ini.

Menambahkan Tema

Sebelumnya, jika OS yang anda gunakan belum ter-install git maka anda dapat meng-install-nya menggunakan perintah berikut karna banyak hal yang dibutuhkan oleh Hexo ada di server npm dan repository yang menggunakan git.

sudo apt install git

Bagi pengguna Windows dan Mac OS dapat men-download-nya di git-scm.com

Tema yang akan saya gunakan sebagai contoh adalah Magnetic, tema cantik yang bisa anda lihat preview-nya di blog portofolio saya Aflasio.com

Buka terminal lalu masuk ke directory blog.

cd blog
git clone https://github.com/klugjo/hexo-theme-magnetic themes/magnetic

Buka kembali _config.yml dan ubah tema landscape menjadi magnetic seperti contoh di bawah.

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: magnetic

Masuk ke directory Magnetic, download perbaharuan (jika ada) lalu hapus directory .git.

cd themes/magnetic
git pull && rm -rf .git

Konfigurasi Tema

Di dalam directory theme/magnetic, ada file konfigurasi dengan nama _config.yml. Silahkan buka dan edit menggunakan Text Editor kesayangan anda.

Yang pertama adalah # header. Pada bagian ini, kita bisa menambahkan menu apa saja yang akan tampil di halaman depan. Ingat, letak home adalah root, jadi cukup isi dengan tanda / saja, tidak perlu mengetik alamat website anda misalnya http://www.namaanda.com/. Contohnya seperti punya saya di bawah ini.

# Header
menu:
  Home: /
  Commissioned: /categories/Commissioned
  Random Artwork: /categories/Digital-Painting/
  Archives: /archives
  About: /about

# Default post title mengatur judul artikel otomatis bila anda tidak memberi judul pada artikel. Secara default, tema Magnetic akan membuatnya menjadi “Untitled”.

# Default post title
default_post_title: Untitled

# Default post cover index yaitu gambar thumbnail otomatis yang akan tampil di halaman depan bila anda lupa mengaturnya pada artikel yang anda buat. Gambar ini berukuran 450x450px. Pada portofolio saya di www.aflasio.com, saya mengatur letak cover index pada directory /img yang terletak pada directory blog (bukan directory theme) dengan file animasi gif. Maka format penulisannya seperti di bawah ini. Lakukan hal yang sama pada post_cover-detail yang merupakan gambar cover yang tampil saat artikel dibuka. Gambar ini berukuran 1350x500px.

# Default post cover index page
default_cover_index: "/img/loading.gif"

# Default post cover index page
default_cover_detail: "/img/cover.jpg"

# Favicon adalah gambar icon kecil yang muncul pada tab Browser. Anda bisa mengaturnya menjadi logo anda sendiri. Usahakan square dengan ukuran 50-200px dan background-nya transparan.

# Favicon
favicon: "/img/icon.png"

Untuk komentar, tema Magnetic menyediakan 3 pilihan yaitu: disqus, facebook, dan valine. Saya lebih memilih facebook karena disqus menyisipkan iklan yang lumayan mengganggu pada bagian komentar (bukan google ads).

Tema Magnetic juga sudah menyediakan fitur Google Analytics jadi kita hanya perlu memasukkan kode yang kita dapat dari https://analytics.google.com/ sehingga kita bisa melihat informasi tentang pengunjung di sana.

Terakhir # Social Accounts, cukup tambahkan link profil kita saja.

twitter_url: https://twitter.com/sira_argia
facebook_url: https://www.facebook.com/sira.argia

Untuk informasi lebih lengkap tentang panduan menggunakan tema ini bisa anda kunjungi repository aslinya disini.

Membuat Artikel

Untuk membuat artikel, dapat menggunakan perintah berikut pada directory blog.

hexo new post "Judul artikel"

Maka file artikel secara default akan masuk pada directory source/_posts berekstensi *.md. Anda dapat mengeditnya menggunakan aplikasi Typora. Buka file artikel yang baru saja anda buat di directory tersebut dengan Typora. Tekan ctrl + / untuk melihat dalam mode source code. Karena tema Magnetic menyediakan fitur thumbnail yang akan tampil di halaman depan dan gambar cover yang tampil saat artikel dibuka, anda bisa mengaturnya pada post header seperti pada contoh di bawah.

---
title: Seira
date: 2018-10-27 00:06:53
tags: 
  - digipaint
  - OC
  - male
  - black
  - red hair
  - red
categories: Digital Painting
cover_index: /img/450x450/seira.jpg
cover_detail: /img/cover/seira.jpg
---
![Gambar](/img/asset/seira.jpg)
Karya di atas saya buat menggunakan krita.

Pada contoh di atas, saya meletakkan semua gambar pada directory source/img/asset jadi untuk menyisipkan gambar cukup memanggilnya dengan link /img/asset/namagambar.jpg. Pastikan link ke gambar anda benar, karena gambar tidak akan tampil setelah menjalankan perintah hexo generate jika anda salah memasukkan link. Untuk memastikannya, jalankan perintah berikut.

hexo generate && hexo server

Lalu ctrl + klik link yang muncul di terminal.

Push Blog ke Gitlab

Setelah semuanya tampak beres di Localhost, sekarang waktunya meng-upload blog anda. Pada tutorial ini, saya menggunakan gitlab. Pastikan anda sudah membuat repository terlebih dahulu. Jika bingung, anda dapat melihat panduannya pada artikel saya tentang tutorial dasar Git dan Gitlab.

Copy-paste semua isi directory blog ke directory git anda. Abaikan directory node_modules dan public dengan mengedit file .gitignore dan menambahkan dua directory tersebut di daftar.

/node_modules
/public

Cek status perubahan.

git status

Pastikan directory yang saya sebutkan di atas tadi tidak ikut masuk. Jika sudah, jalankan perintah selanjutnya.

git add .
git commit -m "masukkan komentar commit"
git push origin master

Hosting di Netlify

Saya sudah mengatakan pada awal artikel ini kalau artikel ini adalah versi lain dari artikel saya yang sebelumnya tentang Gitlab Page. Tapi sebenarnya saya menulis artikel ini karena saya memang sudah pindah dari Gitlab Page ke Netlify. Kenapa? Ada beberapa alasan:

• Gitlab Page cara kerjanya menggunakan gitlab-ci (berisi konfigurasi/perintah untuk generate code yang sudah anda push) melalui Pipeline yang berujung pada directory Artifacts. Masalahnya, Gitlab hanya memberi free storage sebesar 100MB per job untuk Artifacts. Jadi saya rasa itu agak percuma walau Gitlab sendiri menyediakan free storage sebesar 10GB/repository. Apa lagi untuk orang seperti saya yang meletakkan asset gambar dalam satu blog (tidak hosting gambar ke situs lain) CMIIW
• Netlify sangat mudah, hanya mengintegrasikan dengan repository, website langsung live dalam beberapa menit.
• Netlify menyediakan fitur DNS Management dan free SSL Certificate sehingga bagi kalian yang sudah membeli domain tidak perlu repot-repot mengatur DNS dan SSL Certificate menggunakan Cloudflare.

Membuat Akun Netlify

Membuat akun baru di Netlify sangat mudah, cukup buka situs Netlify.com lalu klik Sign up dan pilih akun Gitlab. Isi formulir yang diperlukan (jika ada).

Membuat Situs Baru dari Git

Untuk membuat situs baru, klik New site from git lalu pilih Gitlab maka akan tampil halaman seperti pada gambar di bawah. Pilih repository tempat blog anda bersemayam.

Anda akan diarahkan ke kotak dialog pengaturan deploy, isi tepat seperti gambar di bawah lalu klik Deploy. Tunggu sampai proses selesai.

Mengganti Nama Situs

Setelah situs berhasil live, anda akan mendapatkan nama random. Anda dapat menggantinya dengan cara klik situs anda yang memiliki nama random, klik Domain settings.

Klik tanda titik tiga yang ada di ujung situs anda lalu pilih Edit site name. silahkan ganti sesuai dengan nama yang anda tulis di _config.yml yang terletak pada directory blog. Jika nama tersebut tidak bisa digunakan, anda harus menggunakan nama lain dan mengganti URL yang ada di _config.yml sesuai nama situs yang berhasil dibuat.

Mengatur Custom Domain

Bagian ini khusus bagi anda sudah punya domain sendiri. Anda bisa mengaturnya dengan cara klik Add custom domain lalu masukkan domain anda lalu klik `Verify’

Anda akan diminta untuk memasukkan Name Server netlify ke pengaturan DNS tempat anda membeli domain.

Terakhir, jangan lupa enable https di pengaturan domain di netlify.

Cheer…

Jika ada kesalahan kata-kalimat dalam artikel ini mohon beri tahu saya, bisa lewat komentar atau kontak di halaman about. Terimakasih.