Introducing FourSG

Here's a little project I've been working on for a bit. FourSG (pronounced "Force G") is a static site generator I've created that will convert an Obsidian vault into a static html website, implemented as a plugin for Obsidian. Chances are you're reading this on a site that was generated with it. All the technical details are there on GitHub.

Why did I take the time to create an SSG, when there are a hundred of them already out there that do just about anything you could imagine? Simply put, none of them do things exactly the way I want them done. So yes, I created yet another one. There are already several very nice options that will work with Obsidian vaults like this. If you're reading this and looking for such a thing, chances are you will want to use one of those other options instead. They have more features, more established users, and will probably get you going with your own SSG just fine.

What does FourSG do that the others don't? The short answer is "less".

It won't do things like automatically generate an index page for your blog posts. You need to create the index page yourself and link your new posts there manually. It doesn't optimize your images for you, it just plops whatever is in your vault onto the web page. A core design principle is that FourSG recreates your Obsidian vault in html as closely as possible. So if the content is in the vault, it will appear on your site pretty much exactly as it is. You don't need to worry about how anything happens in the background when generating the site, because there isn't really anything happening in the background. WYSIWYG.

Now, the exceptions to that design principle.

FourSG will auto-generate SEO support for your content. Though I don't want to bother with any of that stuff myself, I concede it's pretty important nowadays if you want people to be able to find your content. So FourSG will auto-generate a robots.txt and sitemap.xml for your site. There are a few optional properties you can add to your documents in Obsidian that give you some control over what is put into those files, but if you don't bother, you'll still get a decent SEO implementation.

FourSG will also auto-generate a simple, collapsable navigation column on the left side of your pages. When rendered at desktop proportions, this column will always be visible on the left on every page by default. When brought down to mobile size, this navigation will be behind a hamburger icon. There is a bit of javascript involved in this navigation, but it's lightweight and simple. You can optionally specify the sort order of items in the navigation bar with a property in the pages they link to.

The tool comes with a single default html template, and a single default css file. It does support defining your own templates and css files, and you can override the defaults using optional properties in your Obsidian pages. If the user wants something different than the default, they can make their own html and css files, and these will be preserved right in the Obsidian vault just like any other document. Changes to the defaults are also preserved in the vault, and if the user deletes them, the original versions are recreated automatically.

One common thing you'll find in other SSGs that FourSG does not support is partial templates, include-able content snippets, or any dynamic or scriptable content. There are no globally-definable constants beyond the bare minimum necessary to make the site work. It's possible someone could hack up support for this sort of thing with custom templates, more javascript, and clever css. But nobody should bother doing that, because it's already been done in so many other SSGs out there.

Put another way, if you thought GeoCities and Microsoft FrontPage 97 were the pinnacle of personal website technology and everything that came after that was just unnecessary and confusing, FourSG might be for you. I know it works for me.

A final note, one of the reasons I finally got around to creating my perfect SSG was because I wanted to try out the latest and greatest AI-assisted coding available at the time I started the project. It was initially created with the help of the Windsurf plugin for JetBrains WebStorm. Being a software engineer by degree and 30+ years experience, I can attest that AI coding assistance is certainly a valuable tool in the hands of an intelligent and patient developer. More thoughts on that subject are better shared in another post though.