Simple Templating for Static Sites
Here I’ll discuss how we built Masquerade, a really simple static template tool that we use as a low level CMS. Using Masquerade we can generate hundreds of pages detailing information, features, and our company blog, all without the pain of manually editing HTML files and large refactors on every minor update to our footer.
This article was originally written in 2017.
A couple weeks ago, I came across several web blogs. They all looked pretty suave, with minimalistic structure and a very light reading theme. However, the bulk of modern blogs remain on CMS’s like Jekyll, WordPress, Wix, etc., all of which (in my opinion) SUCK.
And I understand this is an unpopular opinion--don’t get me wrong here, if I’ve got a simple website to design for a quick buck with a non-technical client, I’ll WordPress it in half an hour and be around to collect my check. But I can’t help but feel that something is very much lacking from these engines--or rather, three things are lacking.
- Speed. The beauty of static sites usually lies in their speed, but content managers like WordPress rely on bulky interfaces sourced in PHP. As a result, these sites are extremely heavy loaders, pointing to several plugins and dependencies which point to other dependencies up and down the chart.
- Ease of use. For a quick and dirty setup, WordPress can actually be extremely painful. It can take hours to setup if something goes wrong and hours more to move or recover it. Jekyll itself has so many setup issues that I find myself wanting to punch my desk. On top of this, posting is ridden with a billion horrible plugins and themes all fighting with each other to show you dashboard notifications. Not to mention your site is constantly getting attacked by ukranian bots.
- Focus on content. All of these existing CMS’s fail on content BIG TIME. A focus on content would create a very light weight content editor with ease of use and simple formatting. Instead, blog customization has ushered in an age of unnecessary and annoying bulk, with content editors that don’t work for the user.
So to address these three issues, I built an ultra light weight blog CMS, complete with a templating engine and full generation. I call it Masquerade, and to develop it I focused on three solutions:
- Speed. To make my system faster, I integrated it with version control and setup a python script. Python is usually natively supported by most hosts, and can very easily and efficiently work as a templating engine. By generating fully static files, and replacing the bulky nonsense of plugins and themes with simple, shared CSS/JS, Masquerade achieves razor fast load speeds.
- Ease of use. To make Masquerade as easy as possible to use, I integrated it directly into version control with a pre-commit hook. I simply add content and then commit, and Masquerade handles the rest: generating an index, handling 404, creating blog content, rendering excerpts, you name it. And this brings me to our last focus,
- Focus on content. For this, I took a page out of GitHub and Jekyll’s book. Essentially, GitHub and most coder friendly tools use markdown so the coder can quickly develop documentation and instead focus on the actual documentation rather than how it looks. I integrated my own flavor of markdown, taking in the title, timestamp, tags, and excerpt in the beginning of the file (I call this the metadata), and then rendering simple markup (text formatting, images) in the coming body of text. This allows the blogger to focus on simply getting the content straight, while Masquerade handles all the heavy lifting.
Essentially, Masquerade takes in simple blog files:
Then, once you commit, it begins to build your blog. It generates all the blog content pages:
And also generates the index file:
In addition, Masquerade comes with a no-cache flag for development, but still operates quickly. Masquerade also integrated favicons and mobile compatibility. On mobile, the interface is actually accessible through reading list as well:
And thus, Masquerade was born. It has a few shortcomings (I haven’t finished creating prettier 404, comingsoon, etc pages, or building the tags page). In the future, I hope to integrate link detection and other Markdown features, while providing different themes in CSS format. Masquerade is, of course, entirely open source on my repo and hosted with GitHub pages. Check out the full demo here.
Like this, and more? At Aiko Mail, we love open source projects and exploring and visualizing data!