Thoughts on tooling for static sites
Introduction
Since moving my site from Wordpress to Eleventy at the beginning of the year I've been trying find the most comfortable workflow for writing, editing and publishing posts. I love the control over my site given by using a static site generator. The speed my little site now loads in is phenomenal - way beyond anything Wordpress could deliver. Not that Wordpress was slow at all, but it can't compete with loading a few KBs of data with no processing at all. However the editing experience of Wordpress, and the workflow it included is still hard to replicate without jumping between services, repositories and branches. In Wordpress everything is in one place. You edit, create drafts, reviews and ultimately publish all from one place. So this is the description of the journey I've been on and where I have go to so far in my search of replicating the Wordpress experience for my static site generator.
Requirements
The key requirements for me are:
- Code and content must be stored in GitHub.
- As few services as possible. If I could do it all efficiently in GitHub, I would.
- A user friendly editing experience
- As far as possible this should all be free!
GitHub
Why GitHub? It's free for my needs and I always have access to my content from anywhere. I still struggle with many concepts in git, but GitHub itself is easy to use and lots of online support and documentation is available. It's also the de facto authentication service for all online developer services. No need to create endless accounts with passwords if you just authenticate through GitHub.
Services
With WordPress you go there, draft your post, publish it and you are done. Since moving to Eleventy I've been trying to reproduce this experience as best I can. Initially I coded, wrote my posts and generated my site locally on my laptop then copied it to my hosting provider (nearlyfreespeech.com). This worked a treat after some initial config and scripting in PowerShell to automate it as much as possible.
But this was not the most portable solution, so I looked for options to use online services as much as possible. First, I needed an online editor, which could edit my markdown posts stored in GitHub. This would enable me to write posts from anywhere, not just my laptop. After trying a number of services, I chose Forestry. It suits my basic needs perfectly without all the complexity of other services. Forestry does one thing only: enable you create content. It's not a development environment or anything else. It's content authoring only.
Next was the building and hosting my site. Again, I tried a number of options before settling on Netlify. This was easy setup and trigger builds from pull requests to GitHub repositories. It is great.
Finally, I was curious about online coding environments and used GitPod for a while. But in the end I gave that up and still do my coding on my laptop using Visual Studio Code. If GitHub Codespaces is ever available for free to basic users, I would be interested. For now I don't code that much and I can do that on my laptop.
So for most of the year I have been coding locally in Visual Studio Code, writing my posts in Forestry, storing my content in GitHub and publishing and hosting my site using Netlify.
Editing experience
I like Forestry, but didn't want to keep jumping to it to edit my posts. So I tried out Netlify CMS, but decided that wasn't really an improvement over Forestry. I did like the ability pull in the CMS as a subfolder of my domain (using "/admin/"). But I preferred Forestry, so stuck with that.
A few days ago I tried out cloudcannon. Whilst this was not for me, it led me to the idea of outputting my static files to a repository to be used by GitHub Pages. If I could build my site using GitHub Actions I could point GitHub Pages to my static files and host my files directly on GitHub. This took me a day to get working, helped a lot by this GitHub Action for building Eleventy sites. It works great and means I no longer have a need for Netlify. So as much as I really liked Netlify, I decided to move my site's hosting to GitHub Pages.
Finally, after looking further into the settings available in Forestry, I realised it also had the possibility present the CMS as a subfolder of my site, ie "/admin/". That was dead simple to setup and now I am down to using GitHub for storing and publishing my content and Forestry for editing the content, but being able to do so from my own domain. Small detail, but I like it.
Free, as in beer
Most of the services and tools I've used over the last few months are free for my level of usage. This is great. I am always amazed at the ability of companies to offer free plans. This is not like Facebook selling your user data. This is simply the fact that for small users, the costs to companies hosting them are not very significant compared to large enterprise clients. Also, I imagine with many small scale users, they get to iron out all the annoying edge cases that you only encounter by being a "stupid end user".
So how much does all this cost me? Well up until I switched to Netlify, it was free. But using GitHub pages with my own domain required some DNS configurations which obviously Netlify won't do for domain not using their services. So I switched my DNS servers back to those of my registrar and previous hosting provider, nearlyfreespeech. They do charge for this service though. Thankfully it's less than $4 per year, it's hardly going to break the bank. My goal of running my site for free is currently not quite met. I know there are free DNS providers, but since I already pay about $12 per year for my domain name, an extra few dollars is hardly an issue.
So my entire setup is almost, but not quite, free (as in beer). It's less $20 per year though. That's quite a miracle in my books!