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.
- 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
The following package.json file has all the dependencies you would need in order to deploy to Github pages and also
- hexo new “My New Post”
- hexo new page “about”
- hexo server
- hexo generate
- hexo generate –watch
- npm install hexo-deployer-git –save
- hexo deploy
- npm run-script dev
- npm run-script deploy
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:
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