The Tools I Use for The Bannerbear SaaS Marketing Site

I often get asked "what are you using for your marketing site?". So I thought I'd take the time to write about the tools and workflows I use to run this site.

Plus I'll explain a little bit of my thinking around what makes a good SaaS site.

Note: in this article I am writing about the marketing site at bannerbear.com - I'm not talking about the app itself here. That's for another post maybe!

My Top Priorities

There are a million choices out there when it comes to what CMS to use. They all have their pros and cons. Me personally, I was looking for something with these attributes:

Static site builder

I wanted the speed of a static site, but something extensible enough that would allow me to write bits of custom code if I needed to.

Ruby based

The Bannerbear app uses Ruby on Rails. I wanted the marketing site to also run Ruby. Why? Because as a solo founder, the more I can reduce the friction of context switching the more productive I am.

On a day to day basis I have to jump from my app code to the marketing site code, and if they were in completely different languages it would probably fry my brain after a while.

Compatible with Slim

I use the Slim templating language in my Rails app and wanted to use it in my marketing site. I haven't written any HTML/HAML for years now. I just find Slim so much more compact and… slim.

Git workflow

I deploy the Bannerbear app using git. I want to deploy the Bannerbear marketing site using git too. See the point on context-switching above! The more I can keep languages and workflows the same across my estate, the better.

Nothing new to learn

I was looking for a framework / platform that I could grok quickly. Something where I clearly understood where things should go, with decent documentation etc.

As a solo founder, the more I can reduce the friction of context switching the more productive I am

The Tech

The static site builder that I landed on is called Middleman.

Above: me writing this blog post in Markdown

Out of the box it does everything you might need from a marketing site, you can host multiple blogs, you can tag posts, it's easy to add frontmatter (metadata) to any page etc.

But what I like about Middleman is that the feature set is not overwhelming. It doesn't do a million things, it just does the typical blog / static site stuff very well.

Middleman checks a lot of boxes for me, it's Ruby-based, there's a Slim fork of it, and it was very easy to get up and running.

The CSS / JS

I've tried a lot of different CSS frameworks over the years but the one I use primarily now is Bulma. It has very nice default styles for form elements and personally I just find the implementation of things like responsive styles, columns, and basic structure like that is all very pleasant on Bulma.

That said, Bulma is used on the site mainly for its layout capabilities. Aside from Bulma there's a lot of custom CSS on the Bannerbear site. This custom CSS is all written in Sass which Middleman works with out of the box.

Above: a tantalizing snapshot of some Sass…

Again, Sass is something I work with in Rails, so it just makes sense to try to capitalise on the same toolset for the marketing site.

All the javascript on the marketing site is good ol' JQuery.

The Hosting

Netlify handles my static site hosting. I love being able to just git push and then forget about it. It has been a huge productivity booster to be able to git deploy the marketing site!

I let Netlify do all of the optimizations that it wants to do, like concatenate assets, compress images etc - I just trust them to do their job, and they do!

The Enhancements

Here are some small enhancements that add to the experience or improve my workflow…

Rakefile

I have a Rakefile with some workflow scripts in it, for example when I want to write a new blog post I just run:

rake bannerbear:np "this is a title"

Which creates a new markdown file with some sensible defaults e.g. today's date.

Bannerbear on-demand images

Middleman has a config file that's Ruby-based so you can create any kind of helper function you want. I have helper functions that generate unique images for all of my open graph images. So Bannerbear generates nice previews that look like this:

And also some other neat things like I have a helper function that transforms any blockquotes in my blog posts and creates a dynamic image for them (also using Bannerbear, of course!) which looks like this:

External data

The Template Library on the marketing site is synced up to the Rails app via an API request. So basically whenever there is a new template available in the Rails app, when I redeploy the marketing site the new data is pulled in and a new static page is generated for a template, like this one.

Conclusion

I hope that helps to answer your questions if you were curious about how this site is built! Remember though that there is no such thing as "the best way" - you need to find "the best way for YOU".

As you can see, the tools I'm using all heavily overlap with the languages and skills that I'm using on the Bannerbear Ruby on Rails app, so for me this was the best way to go to maximise my output!