Meta Post

This is how I have built this website.
  1. Turn off old web hosting and let it rot.
  2. Figure out a cheap way to host HTML on the domain.
Let's dive in!
I'd done some previous work with using Trello as a simple content management system, and also recently learned about Cloudflare's (free plan) Workers which enables simple serverless functions running on their edge networks.
Putting the two of these free services together gives me a lightweight and familiar content management system, and a super-fast and minimal serverless, global hosting for responding to page requests.
I'm purposely avoiding spending any money whatsoever on this for a simple personal site / blog, therefore I'm avoiding using the Workers KV storage, which would simplify some of the steps below.

Constraints

  • Must cost zero dollars, so keep on the free plans.
  • Workers on the Free plan have a limit of 10 milliseconds of CPU time per request, with a limit of 100k requests per day, as well as not being able to use the KV storage feature.
  • Trello has free personal plans and you can get API keys and board / list IDs to use to fetch lists of cards programatically.

Features

  • Select a list of cards to use for a single page's content.
  • Create navigation between pages, hardcoded as paths and list IDs.
  • Use card title as a header, and the card description as content.
  • Render images from card covers inline on the page.
  • Add a stylesheet.

Setup

First, I had to import the top level domain into Cloudflare's DNS, which was pretty easy and straightforward. Once there, I could map specific routes to specific worker nodes, in order to split up the work of rendering HTML and returning it to the request. In order to make sure we don't spend too much CPU time in a single worker, we can pretty easily split up the work between a few different nodes.
  • Worker #1 - Fetching a list of cards, and rendering HTML
  • Worker #2 - Rendering CSS
  • Worker #3 - Proxying card attachment images
  • Worker #4 - Handling deep page links with "read more"

This all ended up working pretty easily and is responsible for the page you are reading right now.
I can edit or add content at any time even from the Trello mobile app, and changes appear semi-instantly.
I'm limited somewhat in terms of design or page complexity, since HTML rendering is mostly just string concatenation and templates using vanilla Javascript. Fine and good enough for a simple use case such as a personal site or blog!
For Markdown support (the card descriptions) I was hoping that the Trello API would provide renders, but it does not. Therefore I turned to a very simple Markdown parser that is a small enough chunk of script that I can include it directly in the worker source code, which I found in the form of snarkdown. This gives me easy formatting and links directly from the card descriptions.
Also for blog post items, I read the card's due date, and use that as a 'published' date. A special label on cards indicates that the description should be split up for the "read more" functionality on the blog pages, and I recycle the Trello card slug into a page slug, leveraging the search API to get the full card data in a separate worker.
I'm pretty happy with this setup and can self-publish for zero dollars, and zero ads or user-side tracking. I do get some basic analytics from Cloudflare's DNS, but it's completely blind to end user details.
Posted: Tue, 19 May 2020 17:17:00 GMT