blog.info()

The AST for each article can now be found at the end of the page.

What is an Abstract Syntax Tree?

To understand ASTs, let's put it in context of this blog.

My blog is a static site generator (SSG). That means it generates the HTML you're seeing based on raw data, usually markdown files. In my case, I do indeed use markdown files for my posts. What does markdown look like?

 1---
 2title: Displaying Abstract Syntax Trees 
 3slug: building-ast
 4date: Nov 26, 2025
 5category: Engineering
 6excerpt: Rendering ASTs at the bottom of each article.
 7---
 8## What is an Abstract Syntax Tree?
 9To understand ASTs, let's put it in context of this blog.
10
11My blog is a static site generator. That means it generates the HTML you're seeing based on raw data, usually markdown files.
12In my case, I do indeed use markdown files for my posts. What does markdown look like?

This is what the markdown files look like. Notice that it's very simple - no HTML, CSS, or JavaScript. This allows the writer (me) to focus only on writing the story, not the details of how the story is displayed for every article. It keeps the style consistent across articles as well.

But how does my SSG know how to convert the markdown files into HTML? Enter the AST.

Abstract Syntax Tree

An AST is a representation of the article's content. Each piece of data is a node on the tree.

Let's look at a simple example.

1## Simple Example
2I wanted to show a simple example.
3
4Here's some more simple words:
5- Food
6- Drinks
7- Animals

The AST for this markdown looks like this:

1// Document
2// -- Heading -------> ## Simple Example
3// -- Paragraph --------> I wanted to show a simple example.
4// -- Paragraph --------> Here's some more simple words:
5// -- List
6// -- -- ListItem --------> Food
7// -- -- ListItem --------> Drinks
8// -- -- ListItem --------> Animals

Why it's Useful

ASTs allow us to infer information about the structure of code (or markdown, in this case.) That structure can be used to then determine things like:

How a program is interpreted
What colors to display for different and related parts of the content
What HTML and CSS properties are applied to each part of the content (our SSG's use case)

How This Blog Displays the AST

My blog has two steps:

A build phase, where all the HTML is pre-built/rendered before the server even starts
A run phase, where the server is actively running and serving those files over the internet

To show the AST, I used the build-time phase to pre-render the HMTL of the AST. This means less work for your browser to do. A less optimal implementation would have generated the ASTs dynamically when your browser fetched the web page.

Conclusion

Now you can see the AST of every page I've written, giving you direct insight into the internals of how a SSG works.