Cara Membuat Blog dengan Hexo dan Github Pages

Cara Membuat Blog dengan Hexo dan Github Pages

Hexo adalah salah satu Generator Situs Statis populer, seperti Gohugo dan juga Gastby.

Pendahuluan

Menggunakan Hexo untuk membuat blog adalah salah satu pilihan terbaik, biaya untuk hosting pun bisa dikurangi dengan adanya github pages yang bisa kamu gunakan secara gratis. Kecepatan sebuah situs web statis juga lebih unggul dibanding situs dinamis, namun terdapat beberapa kekurangan seperti fungsi dari situs dinamis tak bisa dijalankan di situs statis.

Persiapan

Sebelum kamu membuat Blog dengan Hexo, pastikan Sistem Operasi kamu terhubung dengan internet dan stabil. Selain itu kamu juga harus mempunyai akun github karena kita akan menghosting Blog kita di Github Pages.

Yang Akan Dilakukan

  • Memasang Node dan NPM
  • Menginstal Hexo CLI
  • Membuat Blog Dengan Hexo CLI
  • Mengkonfigurasi Blog Hexo
  • Menulis Konten
  • Deploy
  • Atur Github Pages

Memasang NPM dan Node

Untuk menginstall NPM beserta Node kamu bisa menuju Nodejs.org, silahkan pilih sesuai dengan system operasi yang kamu gunakan. Untuk Windows kamu bisa menggunakan installer sedangkan untuk Mac saya kurang tahu dan untuk Linux saya juga kurang paham, karena saya installnya langsung dari apt.

Menginstall Hexo CLI

Buka Terminal / CMD lalu ketikan perintah berikut.

terminal
1
npm install -g hexo-cli

Membuat Blog Dengan Hexo CLI

Masih di terminal, kamu gunakan hexo init <nama-folder>. Contoh

terminal
1
2
3
4
5
#membuat blog di folder baru
hexo init taufik.nurhidayat.web.id

#membuka folder
cd taufik.nurhidayat.web.id

Mengkonfigurasi Blog Hexo

Silahkan buka text editor kalian boleh apa saja, disarankan text editor seperti Visual Studio Code atau Sublime Text.
Sekarang edit pada bagian _config.yml, tapi saya edit bagian pentingnya saja.

_config.ymlHexo Configurations
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Judul Blog
title: Taufik Nurhidayat
# Sub Judul dari Blog
subtitle: 'Development and Design Blog'
# Deskripsi
description: 'Learn Programming and Graphic Design'
# Kata kunci blog
keywords: 'Blog, Development, Programming, Desain Grafis, Node'
# author
author: Taufik Nurhidayat
# bahasa
language: id
# zona waktu
timezone: 'Asia/Jakarta'
# url page
url: 'https://taufik.nurhidayat.web.id'
# halaman utama blog
root: /
# Link postingan
permalink: ':year/:month/:title.html'

Untuk menulis konten kamu harus membuka terminal, jika di Visual Studio Code tinggal klik menu Terminal > New Terminal. Gunakan perintah hexo new [layout] <title>, nantinya akan menggenerate sebuah file markdown di direktori source/_posts/.

terminal (Membuat Post)Hexo Docs Writing
1
hexo new post-name
terminal (membuat halaman)Hexo Docs Writing
1
hexo new page page-name

Buka direktori source/_posts dan edit postingan yang telah dibuat, jika halaman biasanya berada di direktori source/nama-halaman/index.md.

Source Posts Direktori

Terdapat data untuk postingan dan halaman seperti judul, tanggal publish, tanggal update, kategori, tag, cover, thumbnail, dan sebagainya. Lebih jelasnya ada di halaman Hexo Docs Front Matter

Post Data Front Matter

Edit file di sana dengan bahasa markdown, jika kurang memahami markdown html pun bisa dipakai.

Terdapat dua bagian pada postingan, yaitu excerpt (Kata awal) dan full postingan. Excerpt dipisahkan dengan tag <!--more-->, sebelum tag tersebut adalah excerpt dan setelahnya adalah full postingan.

Silahkan kunjungi Hexo Docs Tags untuk lebih lengkapnya.

Deploy

Sebelum di deploy di github kamu harus membuat repositori github terlebih dahulu How to Create Github Repository.

Untuk deploy di github pages kamu bisa menginstall hexo-deployer-git dengan perintah berikut.

terminal
1
npm install hexo-deployer-git --save

Lalu atur config di _config.yml

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
deploy:
type: git

# Url repository github
repo: https://github.com/fiik346/taufik.nurhidayat.web.id
branch: gh-pages

# Nama
name: Taufik Nurhidayat

# Email
email: fik346@gmail.com

Sekarang tinggal deploy deh.

terminal
1
2
3
4
# Menggenerate terlebih dahulu
hexo generate
# Deploy
hexo deploy

Atur Github Pages

Akhir Kata

Yah mungkin tutorialnya acak-acakan wkwk, ini juga udah dipaksain bikin artikel haha. Semoga bermanfaat

Author

Taufik Nurhidayat

Posted on

2020-11-14

Updated on

2020-12-03

Licensed under

Komentar