Deploy Blog di Github Pages dengan Hexo

Github Pages merupakan layanan hosting web statis yang diberikan oleh Github. Layanan ini diberikan secara gratis dan kita juga akan mendapatkan subdomain .github.io.

Hexo adalah framework blog sederhana dan powerfull yang didukung oleh Node.js. Web statis generator yang super cepat ini hanya membutuhkan waktu beberapa detik untuk membangun sebuah website lengkap.

Sekedar info, saat ini saya mengelola Ztrohub juga menggunakan Hexo dan Github Pages.

Pengantar

Dibutuhkan

Install Node.js

Langkah-Langkah

1. Buat Repo Github Pages

Pergi ke https://github.com/new, buat repository dengan nama username.github.io.
Sebagai contoh postingan ini memakai Ztrohub.github.io.
Lalu click Create repository.

2. Install Hexo

Pastikan sudah install Node.js versi terbaru. Lalu jalankan perintah ini :

1 2	npm install -g hexo-cli hexo -v

Jika memunculkan informasi dari Hexo, maka Hexo telah terinstall dengan benar.

3. Buat Local Project GitHub Pages

1
2
3

hexo init Ztrohub.github.io
cd Ztrohub.github.io
npm install

4. Jalankan Test Server

1	hexo server

Buka link yang diberikan pada browser. Biasanya localhost:4000

5. Atur Configurasi Blog

Buka folder Ztrohub.github.io dengan code editor, lalu edit pada file _config.yml seperti dibawah. Sesuaikan dengan blog kamu.

# Site
title: Ztrohub
subtitle: 'Welcome to Wonderland'
description: 'Ztroid personal Blog'
keywords:
author: Ztroid
language: id
timezone: Asia/Jakarta

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://Ztrohub.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
...

6. Atur Informasi Github

1	npm install hexo-deployer-git --save

Edit file _config.yml seperti dibawah. Sesuaikan dengan blog kamu.

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Ztrohub/Ztrohub.github.io.git
  branch: master

7. Generate Project Hexo

1	hexo generate

8. Buat Post Baru

1	hexo new "first post"

Edit post pada /source/_posts/first-post.md.
Perlu diketahui Hexo menggunakan bahasa Markdown (.md) dan Embedded JavaScript (.ejs) pada postingan.

9. Delete Hello World

Hapus file /source/_posts/hello-world.md
Hello world bawaan Hexo tidak perlu ikut di deploy.

10. Deploy ke Github

1 2	hexo clean hexo deploy

Setelah deploy, maka blog anda akan muncul di https://****.github.io

Setiap kali selesai melakukan perubahan pada local seperti tambah post / ubah theme website, maka jalankan kedua perintah di atas.

11. Ganti Theme Blog

https://github.com/hexojs/hexo/wiki/Themes

Pilih theme yang tersedia lewat link diatas lalu lakukan clone dengan cara :

1	git clone <repo-theme> themes/<nama-theme>

Sebagai contoh saya ingin pakai https://github.com/hexojs/hexo-theme-light

1	git clone https://github.com/hexojs/hexo-theme-light.git themes/light

lalu edit pada file _config.yml seperti dibawah. Sesuaikan dengan theme kamu.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: light

13. Menambah Page File

Untuk menambahkan seperti aboutme dan page lainnya gunakan perintah

1	hexo new page "aboutme"

lalu edit file /source/aboutme/index.md

14. Memotong Post agar Muncul Sebagian pada Website Utama

Untuk memunculkan sebagian isi post (seperti read more), tambahkan  di dalam post pada bagian yang ingin dipotong.