Hello World
September 19, 2025
This blog is essentially going to be an attempt at the Feynman technique, a learning strategy where one tests their knowledge of a subject by explaining it in the simplest terms possible. For this first post, I will try and provide an explanation of how this site works.
This site was generated by a computer program which takes a set of templates and associated content as input and spits out a website of static content. Static, in this context, means non-interactive. The only way to change the content on a static site is to directly edit the underlying HTML documents.
One can create a static site by manually writing the HTML documents for each page and linking the pages together in a logical manner. This is a perfectly fine approach but tends to result in lots of repeated HTML, especially if you are trying to maintain a uniform format across several different pages.
To avoid repeating the same HTML over and over again we can pull out common code into a template. Think of a template as a MadLibs story. The machinery of the story is provided by the MadLibs template, the punctuation, transitions between sentences, etc. This frees the writer to focus on the content. What is the name of the main character? Do they like pizza? Is their pet a Labrador or some sort of alien creature from Jupiter?
To speak in more concrete terms, for this website I want all pages to have a header with navigational links and a footer with links to my other social accounts. I want all my pages to have the same metadata and I also want the content to be centered with the same margin. To avoid having to repeat all of this, I can pull the shared HTML out into a base template. Now, to create a new page for this site, all I have to concern myself with is providing the content for the page, not the headers, footers, or metadata.
Raw HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/projects">Projects</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<h1>About Me</h1>
</main>
<footer>
<a href="https://twitter.com">Twitter</a> |
<a href="https://github.com">GitHub</a>
</footer>
</body>
</html>
Base Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/projects">Projects</a>
<a href="/blog">Blog</a>
</nav>
</header>
{% block content %}{% endblock %}
<footer>
<a href="https://twitter.com">Twitter</a>
<a href="https://github.com">GitHub</a>
</footer>
</body>
</html>
Additionally, I want all my posts to appear on their own page with a title and date. Great, lets pull that out into a post template which inherits from the base template! Now, to write a new post, all I have to do is provide the title, date, and post content. My site generator can then fill in the missing "slots" on the post template and, in turn, use the completed post template to fill in the missing "content slot" on the base template.
Post Template
{% extends "base.html" %}
{% block content %}
<h1>{{ title }}</h1>
<h2>{{ date }}</h2>
{% block postContent %}{% endblock %}
{% endblock %}
A New Post
{
"url": "/blog/newPost/",
"template": "post.html",
"context": {
"title": "New Post",
"date": "September 19, 2025",
"postContent": "path/to/content/newPost.html"
}
}
Have I actually saved myself time by doing all this? Probably not. I imagine writing all the HTML pages by hand would have taken significantly less time than figuring out this whole template setup. But where's the fun in that?