About

John Chase Blog began as a small personal coding project, built for substance over style.

It exists to host whatever random content I feel like publishing to the World Wide Web. 🌎 (If you think that term is "old school", let me assure you that I am up to speed on the Information Superhighway. 🧐)

The blog is mainly composed of static HTML pages that have been generated from Markdown files on my PC by a PHP CLI script that I wrote. Below I have outlined how it works, and given credit to several key 3rd-party components.

The site is hosted on Cloudflare Pages, which surprisingly allows static websites to be deployed even on their Free plan, within generous file quantity & size limits (beyond which you should be paying for hosting).

I suspect that the tremendous capability of networks like Cloudflare to serve cached assets is one of the reasons why we have seen a resurgence of "static website generator" software tools. It's humorous to remember that back in the late 1990s to early 2000s, this is essentially what popular applications like Microsoft FrontPage did, before dynamic shared web hosting was cheap and plentiful!

Several of the modern projects seem thoroughly capable. However, my requirements for this blog were so simple that I decided to make my own static site generator tool, rather than learn how to operate someone else's Swiss Army knife.

How It Works

1. All pages begin life as Markdown files in a folder on my hard drive. Each MD file contains YAML front matter with a few variables, such as title and date. There is also one HTML template file for the overall page design, with placeholders for content & variables.

2. A PHP script that I wrote iterates over all the MD files:

   1. The YAML is separated from the Markdown, and converted to variables.
   2. The Markdown is converted to HTML content.
   3. The variables and content are inserted into the template, to make a complete HTML page.
   4. The filename of the MD file is "slugified" into a filename for the HTML file.
   5. If the page should appear on the list of posts, its variables are added to an index array.

3. The index array is sorted and then used to generate an HTML list of posts, which in turn gets injected into the Posts page.

4. The output folder of HTML files (and other static assets, such as CSS & images) gets ZIPped and uploaded to Cloudflare Pages.

I have glossed over the finer details, but that is essentially it.

Third-Party Components

Any delight I take in programming comes from having complete control over the logic flow -- not from re-inventing the wheel!

I was able to create my blog system in only a couple of days thanks to the following third-party components, which are worth taking a look at (in no particular order):

• W3.CSS is a free CSS framework for web development. It has plenty of example templates and all the classes necessary to quickly create a mobile-friendly page -- although I authored an extension that slightly decreases its default font sizes on smaller screens.

• Parsedown ("Better Markdown Parser in PHP") is doing the heavy lifting of converting Markdown to HTML. Without something like this, I would have just written my posts in straight HTML, but Parsedown enables me to use a Markdown editor for a more pleasant "word processor-like" experience.

• Prism is "a lightweight, extensible syntax highlighter" written in JavaScript, applying fancy highlighting to blocks of code. I am linking to it on cdnjs rather than hosting it locally, and letting its autoloader detect and pull in languages as needed. Prism is the perfect complement to Parsedown, as the latter already uses the necessary markup on code blocks by default.

• cocur/slugify "converts a string into a slug": turning "My Fancy Post Title!" into "my-fancy-post-title", to be URL & SEO friendly. It requires no external dependencies, and provides a method that conveniently allows you to add your own rules (e.g.- replace "&" with "and") without having to extend the class or hack on it.