Cameron Brown

Blot - Static Website Generator

The past few weeks, I've been working on a super simple static website generator. My plan is simple: I'm going to write something easy to use, that works well with a Git repository for version control. Please note that it was made only for fun and isn't the best code. There may also be some oversights I haven't noticed. Feel free to point them out to me. Blot is my realization of that plan and I believe it's good enough to start using. If you want to follow along, you can download it at the GitHub repository or you can clone it with:

git clone https://www.github.com/thinkallabout/blot.git

Blot requires the Markdown and Jinja2 modules to be installed. You can get them using the pip tool.

pip install markdown; pip install jinja2

Once these two modules are installed, you can use the provided compile.py script to create your website. Simply tweak the directory structure to your liking. As you can see, the /src folder is a simple, pre-built template for you to use. Currently, the config.json file doesn't to anything (yet). When the feature is implemented, it will be used to store your sites global variables, such as the title or your name.

The bin folder is where our compiled site will be kept; the templates folder is where we can keep templates; the posts folder is where we store each individual blog post and the static folder is where we can keep our JavaScript files, and CSS stylesheets.

Templates

Blot uses the Jinja2 templating system. We use templates so that we can keep our content separate from our markup and design. There are 3 default templates. base.html simply has a doctype and other basic elements, as well as a section for our content to go. 

For more information, visit the Jinja2 Template Designer Documentation. Index.html simply grabs the first 5 posts, and lists them. We can get access to our posts by using the site.posts variable. We then simply print the title, timestamp and content to the screen. We can also print our own custom variables, that we can insert into any post. 

Posts 

Your sites posts can be found under src/posts. Each folder represents one blog post. Inside there is two files, main.md where the content goes and post.json, where the post variables can be stored. main.md is simply a markdown file, that gets parsed at compile time. Read this post on Daring Fireball for the official Markdown syntax documentation. The post.json file contains information about your post.

The "_compile" section contains important info such as the post url, what template it uses, where the Markdown file is and the timestamp (for ordering posts). The "_post" section is where things get interesting. This is where you can set your posts variables. One could be the authors name and another could be featured image! The possibilities are endless. You can use any one of these variables in your template. Conclusion Blot has a lot more needed work to get it working. I'll be using it to replace my WordPress installation very soon, making my site blazing fast. I'll also start storing the source for my website on GitHub, so anyone can see how Blot is supposed to be used. Hope you enjoy.