Patrick Grey: Hexo Static Site Generator Setup

Hexo Static Site Generator Setup

Tuesday, 12th December 2017

Feature Aim

Find a static site generator to deliver a simple list of posts on a secure, performant and accessible site that allows new features to be gradually integrated.

Development Notes

I wanted a node-based CMS as it’s a familiar environment.

I looked at https://nuxtent.now.sh/guide but woah, that seems overly complicated for what it's meant to do.

I chose https://hexo.io/ as it is stable and quick to get started with for a simple blog.

Creating a custom theme took a little reading of the docs but I mainly looked at how the provided template worked and cannibalised the parts I needed.

My theme only really contains four template files in the layout folder:

layout.ejs: the top level template containing header, body and main container div
index.ejs: the landing page, including a list of posts
post.ejs: post content template
about.ejs: a "partial" or chunk of HTML that is reused in the index and post pages.

To keep my post files manageable, I’ve grouped posts into year and month folders. I was expecting issues with this but Hexo seems to handle it fine.

I wanted to use http://prismjs.com/ as a code formatter and found a good plugin: https://github.com/ele828/hexo-prism-plugin. However, this would require an extra CSS link and I wanted to combine the relatively little CSS with my own to maximise performance (maybe not an issue with http/2 right enough).

To get round this problem, I extracted the plugin JS file, commented out the part that added the CSS link and added it to my theme scripts folder where it runs automatically.

Hexo offers several Helpers but I’m avoiding contaminating post Markdown with these. This should make the site easier to transfer to another CMS in future if required.

^ Go to top