Build Personal Website with Hexo and GitHub Pages on Mac

Knock on new home's door.

In this post:

• How-tos for building a personal blog

• Useful links for reference

Introduction

It has been long time since I would like to own a particular space to record my life, and until now I've finally started creating my personal website here. Among a variety of schemes, I opt to Hexo + GitHub Pages, which is friendly to noob like me.

Hexo is a fast, simple & powerful blog framework. Simply write post in Markdown and Hexo generates static files deployed to GitHub Pages.

As the first post, I am writing this article just in case anyone who is also interested in having a personal website but hasn't been prepared yet. On the other hand, it will be an importent reference for myself to re-create the environment efficiently when I change the Mac or migrate data in the future.

Environment setup

Install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubsuercontent.com/Homebrew/install/HEAD/install.sh)"

Install Node.js

brew install node

Install Git

brew install git

Install Hexo

npm install -g hexo-cli

Initialize Hexo

Once Hexo is installed, create a new folder for Hexo, and keep in mind the <path>.

cd <path>	# enter target folder
hexo init # initialize Hexo

We can see essential folders/files are generatred. And _config.yml is the "site config" file in Hexo root dict, personalize the top contents when required.

Here are some basic commands to compile Hexo below.

hexo clean	# clear the static files and cache
hexo g	# generate static web files locally
hexo s	# start a local sever for preview
hexo d	# deploy after generation finish

Deploy GitHub Pages

Create a repo in GitHub named as username.github.io.

Add SHH key to GitHub account.

git config --glabal user.name "username"
git config --global user.email "[email protected]"

Then generate SHH key.

ssh-keygen -t rsa -C "[email protected]"

Find id_ras.pub file under dict /User/.ssh/id_rsa.pub.

Open id_ras.pub with TextEdit, and copy/paste to Github account setting.

Check if successful.

ssh -T [email protected]

Install deployer plugin.

npm install hexo-deployer-git --save

Open _config.yml with TextEdit and scroll down to the bottom, modify as below.

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

Deploy to GitHub Pages.

hexo clean
hexo g --d

Now we can login our personal website using username.github.io 🎉

Personalize domain

It should be much cooler if we could have a custom domain. On top of GitHub Pages, my scheme is GoDaddy + Cloudflare - cheap, save and accessible.

Here are the brief steps:

Step 1: Buy a domain from GoDaddy

Step 2: DNS management by Cloudflare

• Change to Cloudflare-branded nameservers
  
• Add DNS records with IP addresses for GitHub Pages

Step 3: GitHub custom domain

Step 4: HTTPS & SSL encryption

• Page Rules set as "Always Use HTTPS"
  
• SSL/TLS encryption set as "Full"
  
• Tick "Always Use HTTPS" under Edge Certificates

Now we can login our personal website using custom domain 🎉

Customize Hexo theme

Select a Hexo theme, and make our blog more pretty.

I prefer Fluid, an elegant Material-Design theme, particularly for writing posts. If you favour the other theme, the configuration method should be similar.

Download Fluid.

npm install --save hexo-theme-fluid

Then _config.fluid.yml in root dict is created for custom.

Modify _config.yml in root dict as follows to start theme.

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

Creating the About Page.

hexo new page about

For more configuration, please refer to Hexo Fluid Docs.