Build Blog with Hexo and Github Page

Powered by Hexo, deploied with Github Page. I first build and test on Github Codespace, but no long after, I run out of my 120 free hour. Thus I shift to my 256G M1 Mac(￣◇￣;). And there are some problems with codespace, which I will explain after.

Steps

1. Prepare Git, make sure you can pull and push.
2. Install Node.js.
3. Set up ${username}.github.io Repository, make it public.
4. Install hexo.
5. Find your favourite Theme and follow the document to set up your blog. You can first test your website locally.
6. Depoly your Blog to with Github Page

Git

As my blog is hosted on github, I believe anyone who have access to this website is familiar with git. Anyway, there are plenty of source address your problems with git. RTFM, STFW, :)

Install Node.js

Refer to the guide provided by Node.js.

I first setup my blog on codespace, where Node.js is preinstalled with older version.

Then I installed Node.js on my M1 Mac with commands below: (try to install nvm with brew install nvm will run into problems so I don’t recommend it)
Using Homebrew:

brew install node
echo 'export PATH="/opt/homebrew/opt/node@18/bin:$PATH"' >> ~/.zshrc
#

Don’t know why, mirror site for node.js returned error: 404, it took some time to downloads from default domain. I first the node version on website is node-19.3.0, but brew kept trying to downloads node-19.2.0, in the end, I down node@18.

After downloads, test with:

node -v
npm -v

Setup ${username}.github.io

Follow the guide, but don’t need to make your own index.html

Install hexo

First make a new empty directory. If you want to put it to git repo, first pull the repo, and add a new empty directory.

npm install -g hexo-cli
hexo init ${new empty hexo-site-dir}

then test your website locally

hexo s

It’s now with the default theme and content, we will edit it in next step.

Before, we went next step, let’s first deploy it with Github Page.
In _config.yml, set up:

timezone: 'Aisa/Shanghai'
deploy:
  type: git 
  repo: git@github.com/<username>/${username.github.io}
  branch: main 
  message: # maybe commit message, I don't know

After save, install package for deploy

npm install hexo-deployer-git --save
npm install hexo-server --save

Before deploy, make sure your Github Page, and git push using ssh are both setup. Went to your hexo site repository and deploy with:

hexo clean && hexo d -g

Then access your website from ${username}.github.io, you can first access your github repository to see if it has been build successfully.

Problems of build your blog with codespace

The point is that it seems your can’t pull and push to another repository from codespace opened for one repository. Which means you can’t put your hexo-site at codespace to deploy it to Github Page. To fix this problem, I first tried to put it under the ${username}.github.io, but then Github Page build failed when it read _config.yml for hexo. Then I have to add the hexo-site directory to .gitignore. And no long after, I nearly reach the end of my 120 free hour. In the end, I switch to my M1 Mac.

Make Blog the Way You Like

I picked the Theme redefine, choice your own theme and config it.
Install theme

npm install hexo-theme-redefine@latest

change theme in _config.yml

theme: redefine

setup theme config file

touch _config.redefine.yml

please remember that social_contact is only available for brand.

word_count

npm install hexo-wordcount

local_search

npm install hexo-generator-searchdb

in _config.redefine.yml add:

# Search
## See: https://github.com/theme-next/hexo-generator-searchdb
search:
  path: search.json
  field: post
  content: true
  format: striptags
local_search:
  enable: true

comment

Not yet set.

Math

npm install hexo-filter-mathjax

in _config.yml add:

mathjax:
  tags: none               # or 'ams' or 'all'
  single_dollars: true     # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9           # relative CJK char width
  normal_width: 0.6        # relative normal (monospace) width
  append_css: true         # add CSS to every page
  every_page: true # if true, every page will be rendered by mathjax regardless the `mathjax` setting in Front-matter of each article

Compress

npm install hexo-all-minifier

I met unfixable venerablity after install this. Don’t recommend install.

Bug

Some error Happen
It’s fun when I test locally:

But error happened after I deployed it on Github Page

Further Learing

Please refer to Hexo