Hexo + Netlify CMS + Optimisations

There are a lot of good static site generators that have come about in the last few years (Jekyll, Hugo and Gatsby are fantastic). But if you are really looking for one to set up a clean and easy blog as quickly as possible, I can highly recommend Hexo on top of Netlify + Netlify CMS. It really is a match made in heaven for simplicity and cost (=free).

The basic workflow is set up a github/gitlab repo, put together all the pieces of the puzzle in a local install, push to your repo and watch your blog come alive on Netlify. Normally you would then write a blog post locally then do a new push to put it live, but with Netlify CMS you can hook up your repo to Netlify and write your posts/pages straight through the browser.

Its very easy to set up but I decided I would make the first part of the workflow even easier by building a ready made git repo with some optimal plugins.

Click here to go to the repo

Click here to check out a demo (try running chrome lighthouse audit. You should get a 98+ performance score)

What do you get

Out of the box you get a hexo install with the default theme ‘landscape’ (easy to add another theme).

You get Netlify CMS for easily writing pages and posts straight from your browser.

You get optimisations that will give you a 98-100 lighthouse performance score.

You get a basic setup for a progressive web app.

You get some tweaks for SEO.

You also get lazy loaded images delivered at the correct sizes.

Getting Started

Use the deploy button below to boot up a site straight away on Netlify.

Deploy to Netlify

You’ll be asked to connect to GitLab (so get a free GitLab account).

Netlify will then automatically create a repository in your GitLab account with a copy of the files from here.

Give it a minute and the new site will be ready on Netlify.

Enable netlify git-gateway

Add netlify-identity-widget.js
code is

Note: set registration preferences to invite only if you want to keep the riff-raff out

Now, Netlify CMS is available at your-site/admin

Play around locally

1
2
3
4
5
$ git clone https://gitlab.com/buzzcat/hexo-netlify-cms-optimised
$ cd hexo-netlify-cms-optimised
$ npm i
$ hexo generate
$ hexo s

Heres what gets installed:

hexo Star on GitHub

hexo-filter-optimize Star on GitHub

hexo-nofollow Star on GitHub

hexo-autoprefixer Star on GitHub

hexo-generator-seo-friendly-sitemap Star on GitHub

hexo-pwa Star on GitHub

hexo-lazysizes Star on GitHub

hexo-all-minifier Star on GitHub

hexo-netlify-cms Star on GitHub

Make sure to go to each of the repos above to check out the available options and give them a star!

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×