Start blogging with Hexo (Part 1)

Been feel like to start the personal blogging for sometimes, but due to project rushing. Now finally get some free time to breath.

1. Prerequisite

  • Node.js (Should be at least Node.js 10.13, recommends 12.0 or higher) Download here
  • Git Download here
  • Domain Name (Bought in few years back)
  • GitHub Account

2.Install Hexo

  1. Once all requirements are installed, you may install Hexo with npm
1
npm install -g hexo-cli
  1. Verify Hexo installed with hexo -v

3.Setup Repo in Github

  1. Go to Github and setup a Repository named in <username>.github.io (Repo must match with github username)
  2. Set the repo as public
  3. Enable README file
  4. Create Repository

4.Setup SSH Keys

  1. Open GitBash
  2. Config username and email
1
2
git config --global user.name "username"
git config --global user.email "email"
  1. Validate it with git config -l
  2. Generate SSH Public key
1
ssh-keygen -t rsa -C "email"
  1. Find the public key file id_rsa.pub from C:\Users<user>.ssh path
  2. Use Notepad or VSCode to access the .pub file and copy the content
  3. Go to GitHub, top right profile icon select settings > SSH and GPG keys, and Add new SSH key.
  4. Verify SSH key working
1
ssh -T git@github.com

You should able to see Hi ! You’ve successfully authenticated, but GitHub does not provide shell access. Now, we had completed the environment setup

5.Initial Hexo Project

  1. Setup blogging path (Where my path is stored inside NAS Z:/blog)
1
hexo init hexo-blog
  1. Go to hexo-blog, and proceed with npm i
  2. After initial, we will get below structure
    • node_modules : dependencies
    • scaffolds : Template for blog
    • source : Folder to store blog markdown
    • themes : Themes
    • .npmignore : Ignore the blog markdown when publish
    • _config.landscape.yml : Theme configuration file
    • config.yml : Hexo configuration file
    • package.json : Misc information including Project Name, Desc, Version, Developer etc.
  3. Start the hexo with hexo server or hexo s
  4. Access to http://localhost:4000 with browser to check if the hexo blog had successful running locally.

6.Push Static Blog to GitHub Pages

  1. Install hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. Edit _config.yml based on the your preferences. Official reference
1
2
3
4
5
6
7
8
# Site
title: <Site title>
subtitle: ''
description: ''
keywords:
author: <author username>
language: en
timezone: 'Asia/Singapore'
  1. On the last line of _config.yml change the deploy config by following
1
2
3
4
deploy:
  type: git
  repository: git@github.com:eugeneewe/eugeneewe.github.io.git
  branch: main
  1. After complete config, execute the below command to deploy it into GitHub repo
1
hexo clean && hexo generate && hexo deploy
  • hexo clean : Remove previous generated static file
  • hexo generate : Generate static file, can use hexo g in shortcut
  • hexo deploy : Deploy static file, can use hexo d in shortcut
  1. Wait for couple minute and access https://eugeneewe.github.io with browser to check our Hexo blog is online!

🔗 References

  1. Hexo Official Guide
  2. Hexo博客搭建基础教程(一)