My own static site generator

Created: 2021-01-11 | 2 min

I am moving from using Gatsby to start generating this site with my own script generator.

#The problem

I'd say, there is not an actual problem with Gatsby. In fact, everything I've done so far with Gatsby went pretty well. I just want to learn what it takes to do it from scratch, being my site a very simple blog without any complex data states or plugins everywhere.

#Scope

This new generator should:

• Create pages based on templates and layouts
• Support markdown, because I want to keep the current format of my articles
• Support frontmatter, because again, all the metadata of my articles should not change at all

#Out of the scope

I don't really want to complicate myself with javascript. So, all my pages will be generated in plain HTML files.

#The tool

I just wrote a very simple python script that uses:

• jinja2: To generate my pages with templates
• ~~commonmark~~ mistune: To support markdown for my pre-existing (and new) articles
• frontmatter: To support frontmatter and read the metadata of my articles

The logic is actually simple, it just reads a directory (./blog) which contains all the markdown files. Then iterates them to render the list of posts in the main page. After that generates the About page and all the actual articles. All that is done by using the above libraries. All templates are read from a second folder ./resources. Finally, the static files are created in the ./public, which is overwritten everytime the python script runs.

#Local testing

For local environment, and since it is all static files, I'm using a Chrome extension called Web Server for Chrome which is simple to use and accomplish my use case. I just need to locate the ./public folder and open http://127.0.0.1:8887 in my Browser. It also has the ability to open the site in your local network, so that I can test it in my mobile device.

#Deploy in "production"

EDIT: On June 2021, I moved this site from Netlify to Firebase.

~~Since I'm using Netlify to host my site, there are few things I had to do to have Netlify using my brand new static site generator:~~

~~1) runtime.txt: Needed to specify the python version that should be used to run my script. In my case I set it 3.7.~~ ~~2) netlify.toml: Included a rule to redirect all "not found" resources to a custom 404.html page.~~ ~~3) Changed the "Build command" to have python generate.py, so that Netlify will ran that command to actually build the site per my requirement.~~ ~~4) Changed the "Publish directory" to be ./public, since I am giving instructions to the python script to generate all static files to that folder.~~

#Final thoughts

I know I am, kind of, reinventing the wheel. But it's somewhat satisfying to see exactly what I expect my page to have: Html files, a single css based on the script to generate the site. Nothing really fancy but meets my (very, very simple) needs. I think it can work for some time.