Hexo Static Site Generator

Hexo is one of several static site generators. The nice thing about it is that it’s built in
Node.js. It’s mostly used as a blog framework, however it can also be used for
building out documentation sites for your Github repositories.

There is a really cool website which shows you how many stargazers each static generator has in Github. It’s called
staticgen. As of now, while I write this article, it is currently ranked at number 3.

I had implemented my previous website with HarpJS which I also found very easy to use and a
great tool as well. However I wanted to learn to use this new static website generator, that’s why I decided to redo
my old website using this blog framework.

So without further ado , let’s dive into how we can use this powerful blog framework with Github pages.

How to configure blog from scratch

  • npm install hexo-cli -g
  • hexo init name-of-your-website (Then copy files from name-of-your-website folder to project root)
  • cd name-of-your-website
  • npm install

Adding additional dependencies for SASS processing and also deploying to Github pages

The following package.json file has all the dependencies you would need in order to deploy to Github pages and also
compile SASS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
"name": "name-of-your-website",
"version": "0.0.1",
"private": true,
"hexo": {
"version": "3.2.2"
},
"scripts": {
"deploy": "hexo generate && hexo deploy",
"dev": "hexo clean && hexo generate && hexo server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-deployer-git": "^0.2.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-cname": "^0.3.0",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.2.0",
"hexo-renderer-marked": "^0.2.10",
"hexo-renderer-scss": "^1.0.2",
"hexo-renderer-stylus": "^0.3.1",
"hexo-server": "^0.2.0"
},
"devDependencies": {
"node-sass": "^3.10.0"
}
}

Create a new post

  • hexo new “My New Post”

Create a new page

  • hexo new page “about”

Start server

  • hexo server

Generate static files

  • hexo generate
  • hexo generate –watch

Deploy to remote sites

  • npm install hexo-deployer-git –save
  • hexo deploy

NPM custom scripts

  • npm run-script dev
  • npm run-script deploy

Troubleshooting

I was having some issues trying to get to compile my SASS files correctly , the solution to this was:

Add the following code to your theme _config.yaml file:

1
2
3
4
node_sass:
outputStyle: nested
precision: 4
sourceComments: false

Then in your themes/name-of-your-theme/source/css folder you would put all the SASS files.
You would need to install hexo-renderer-scss.

I added a comment with this information to an existing Hexo issue since the workaround provided was to move the SASS
files to the project root


Comments: