Introduction to Bulba
I've just published a new version (0.0.5) of Bulba on GitHub and NPM, so I thought I'd write a post here explaining what it is, the current progress, and where I plan to take it in the future.
What is it?
It's a static site generator, and powers this blog.
Essentially, it takes a collection of .md files, and generates a static site. Featuring an index page, archive, individual posts, etc.
Here is the structure of a blog directory:
.
└── blog/
├── content/
│ ├── about.md
│ └── posts/
│ └── example.md
└── config.yaml
As you can see, there are only three things you need to have to build a blog with Bulba:
- about.md - The content that will appear on the about page
- blog posts - .md files inside the /posts folder
- config.yaml - Contains all the site, author, and Bulba configuration
From this data, Bulba will create a structure that looks like this:
.
└── out/
├── assets/
│ └── css/
│ └── style.css
├── archive.html
├── about.html
├── feed.json
└── blog-post.html
Those files are then ready to be hosted on a server somewhere.
Post structure
The only requirement of the blog post files is that they have the extension .md
, and also follow this structure:
---
title: Hello, World
slug: hello-world
date: 2021-10-19 22:29:00
excerpt: The first public blog post using Bulba
---
Content
This extra data is used by Bulba when generating the various pages.
What does it do right now?
Okay, so as of version 0.0.5, this is what Bulba will generate for you:
- Paginated index page containing a list of blog posts. The first page being named
index.html
, and subsequent pages being namedpageX.html
. - Archive page that shows a list of every single blog post. (No content, only excerpts are shown).
- about page, using the content from the
about.md
file, and saved atabout.html
. - Page for every blog post found, using the slug as a filename, and of course,
html
as the extension. - JSON Feed for use with RSS readers saved at
feed.json
.
And here is a rough list of the various customisable options that are available:
- Customise site info - name, description, url.
- Add author info - name, link, twitter.
- Customise how many posts appear on each index page.
- Custom assets path (is only used by css exports at the moment).
- Custom output directory.
- Option to show either the full post content or just the excerpt on index pages.
What do I plan on adding in the future?
In the long-term, I have a few ideas floating in my head, but as for the short term, I've got a few features that I plan on adding:
- Better code formatting, maybe code highlighting (Although I'd let this be an option)
- Add better formatting for elements like blockquotes.
- Support for footnotes.
- Adding a custom page, alongside the about page.
- Look at adding support for adding images to posts.
- Featured image support.
- Favicon.
As for some longer-term ideas, here are a few:
- Custom page templates.
- Custom assets, such as stylesheets, fonts, etc.
- Search.
If you want to checkout Bulba, and try it out for yourself, you can check out the repository on GitHub, and you can also find it on NPM under @chrishannah/bulba.
Also if you have any feedback, have some ideas on where you think I should take this project, feel free to contact me on Mastodon or Twitter.