Changing website builder from Eleventy (11ty) to Bash Static Site Generator (BSSG)

Why and how I made this decision to move SSGs and a list of the steps it took to change this site over from 11ty to BSSG

Why

I have been using 11ty foryears on many differing projects. Consequently, I feel very at home and comfortable using it. It’s fast and efficient. You might very well wonder then… why does he want to change it?

Well, I’m a bit of a “tinkerer”. I do like new projects, new ideas, new ways of doing things. I also like to experiment. Maybe I have too much time on my hands? One day I came across BSSG whilst scrolling down through my Mastodon toots. Neil Brown had written an article on how he moved from Hugo to BSSG. I became interested and then started following the founder and lead developer on BSSG, Stefano Marinelli. I decided to set up a local test site.

How

The excellent project website at https://bssg.dragas.net/ provides a lot of information for those not familiar with Bash. I wasn’t familiar, although I am used to using a terminal and the command line. With hindsight, this was to prove enough.

The documentation provided on the website is full and complete. I wish other projects took as much care and attention to detail over their documentation. The process of installation and running is straightforward. There is also a useful theme gallery to whet the appetite. I liked the simplistic style. The emphasis on clean and efficient. This fitted in well with my ongoing attempts to move away from the mainstream, from Big Tech. To rediscover roots from the internets past.

Steps

1. Downloaded BSSG from the website’s self hosted git repository and installed locally. There is a Quick Start, but I chose the recommended route which creates a contents folder set apart from the BSSG one. This is preferable for any future upgrades and to safeguard content from program files
2. Created a test post using the CLI and made sure the content file redirection using config.sh.local file worked. Used the build and server commands to create the site and view at http://localhost:8000
3. Experimented with changing themes and determining which suited me the best
4. I then took a MD file from another project and copied it into my /contents/src directory. Would you believe it? The site not only built but rendered the MD file, even though there was erroneous frontmatter not required by BSSG
5. Encouraged by this I copied over 40 MD files from a recent trip to Patagonia into the /contents/src directory. Holy cow! They all rendered text and detail fine to the new site. By updating image shortcodes from my old MD files to pure markdown format my images appeared in the new site too
6. At this point I was enjoying the way BSSG processed MD files. I was beginning to understand the concept, the “raison d’être” as it were, of BSSG. It dawned on me that a whole site revamp was not only possible but easily achievable
7. I copied all 196 MD files over, some dating back to 2009. Yes, frontmatter needed adjusting and image shortcodes needed are URL’ing (is that a word?). This took some time but by then I was on a roll
8. One basic and not insubstantial problem remained. My site contains a lot of media… I travel, I go into the mountains. A major hobby is landscape photography. There were a lot of slideshows and videos gathered over the years. These were encased in 11ty shortcodes. The BSSG “Commonmark” implementation didn’t recognise the iframe tag as Commonmark provides a stricter and more standardized Markdown implementation. But, by installing “Pandoc” iframe tags could be read and rendered. Problem solved
9. Pandoc also allowed other HTML tags to be read such as detail and video to be rendered. Possibly there are many more that I have yet to come across
10. So I had a working site. I deployed it to an online test directory
11. I then wanted to change themes. I do this frequently, I’m annoying that way! This brought about a caching problem that needed solving as CSS is not cached by default as far as I can see. I eventually solved this by using a script file that adds a caching hash to the output files (via the deploy script). This doesn’t reside in the core BSSG directory, it resides in the contents directory, so would not get overwritten.
12. I also made changes to the BSSG “Dark” theme I had chosen. It’s a nice theme but I didn’t like the way on mobile platforms the menu went down the page instead of scrolling across. By adjusting the contents/static/custom.css file I was able to recfify this.
13. Build time is 30 seconds for my 200 posts, 26 tag pages, archive page and 10 index pages. That’s certainly a lot compared to 11ty, which seems almost instant. But, I’m in no rush, I don’t post much so it is not a critical factor for me.

Conclusion

Using BSSG turned out much better than expected. It’s an absolute joy to discover. Yeah, there’s a learning curve involved, but isn’t that why we do these things? To be honest, I’ve only touched on the possibilities. My route, described above, is not the only way of doing things. For instance, there are in-built, distraction free, markdown editors and you can create posts/pages via the command line too. If you are comfortable with using the terminal then why not give it a try?

Here’s some BSSG features (from their website):

• Markdown & HTML Content - Generate HTML from Markdown using commonmark, pandoc or markdown.pl (configurable). Also supports plain HTML pages.
• Rich Post Metadata - Support for frontmatter (title, date, tags, slug, image, image_caption, description, secondary flag). Auto-generates excerpts if description is missing.
• Featured Images - Support for featured images (with optional captions) displayed in index, tag, and archive pages.
• Reading Time - Automatically calculates and displays estimated reading time for posts (configurable template string).
• Customizable URLs - Define custom URL patterns for posts and pages using URL_SLUG_FORMAT and PAGE_URL_FORMAT.
• Dynamic Menu & Pages - Generates menus based on pages, distinguishing primary/secondary pages (via secondary: true). Creates a separate pages.html index for secondary pages.
• Tag & Archive Pages - Automatically creates tag index pages and archives by year and month (optional) for easy browsing.
• Advanced SEO - Generates detailed OpenGraph, Twitter Card, and Schema.org (JSON-LD: Article, WebPage, CollectionPage, WebSite) metadata.
• Sitemap & RSS - Generates sitemap.xml and RSS feed (with timezone support) for content discovery and syndication.
• Built-in Development Server - Test your site locally with the integrated development server that automatically adjusts URLs for local preview.
• Visual Post Editor - Modern Ghost-like browser-based editor with live preview, auto-save, Unsplash integration, and offline capability.
• Multiple Themes - Choose from over 50 built-in themes including modern, retro computing, OS-inspired, and more.
• Internationalization (i18n) - Built-in support for multiple languages using locale files (e.g., en.sh) and MSG_ variables in templates.
• Flexible Configuration - Configure via config.sh, override with config.sh.local, and use command-line flags for fine-grained control.
• Date & Time Support - Full date/time support with configurable format (DATE_FORMAT) and timezone awareness (TIMEZONE).
• Cross-Platform - Works on Linux, macOS, and BSD systems with automatic OS detection for commands like date and stat.
• Performance Optimized - Incremental builds, metadata/content caching, parallel processing (with fallback), file locking, and absolute URL post-processing.
• Draft Posts - Draft post support with editing capabilities and easy publishing workflow.
• Backup & Restore