Adding a CMS to hugo

Static doesn’t mean dead

Just because we have a static site doesn’t mean that we can’t have an admin tool to write and edit posts! Lets go through how we can add the NetlifyCMS to the site and host it wherever we want.

In my case I’m storing the code on GitHub and also serving the pages from GitHub Pages. Netlify also seems like a really promising company with a number of other services that they offer, so I’d encourage you to check it out. But since I’m changing one thing at a time, I’ll leave that for a later exercise.

The CMS works by loading the code and it’s configuration from your site. These are 100% static so nothing needs to happen at build time. The configuration tells the admin – which again runs totally in your browser – where to get authentication and the data for your site. Once that’s done you’ll need to figure out how to setup the build process.

Install the admin

in /static/admin/index.html:

<!doctype html><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Content Manager</title></head><body><!-- Include the script that builds the page and powers Netlify CMS --><scriptsrc="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script></body></html>

Summary

The NetlifyCMS is really interesting, though its still a work in progress. With this setup, we are using a couple of external services – GitHub, Firebase – all within their free tiers to edit and push out a website. This process would probably be even easier if we went all in with Netlify, so that’s another great service to start checking out.

Read next

See also

Now that’s its 2018 its time to retool the blog using hugo. Why not? Hugo is built in golang and is blazing fast and everything is cleaner than it was in the middleman years.
One of the reasons that I liked middleman – it’s usage of the rails’ Sprockets library – is no longer a strength. The javascript and front-end world has moved over to WebPack and I’ve personally moved over to create-react-app.

This article walks through the motivations driving and benefits of using a the Seed Architecture for building performant websites using Middleman, React, and a seperate API server such as Parse. The benefits are:
You get full SEO with a heavy client JavaScript site without having to do crazy things with PhantomJS or meta fragments. Hosting and operations become both cheap and doesn’t require a support team. Scaling out the system is mainly a bandwidth problem, and secondarily a API scaling problem for a subset of behavior.

firebase depends on grpc, which isn’t set to build right on the Chromebook. This is because node-pre-gyp, which is used to download precompiled binaries, is not setup correctly. In then uses node-gyp to compile the C++ bindings directly, which is also not setup correctly.
We are going to adjust the settings of node-gyp to make it compile things right under termux, and then we are going to tweak the grpc package itself in our local cache to make it build correctly.