Intro to Stackbit: Build a Custom JAMstack Site in Minutes

Ever take a long flight with children? It’s horrendous—especially if they’re your own.

My wife and I have two (both under 3), so when we go somewhere we try to make the process as painless as possible.

Luckily travel planning sites like Google Flights have simplified everything. We have all our options in front of us, we pick and choose what times/airlines/hotels work best, and build the perfect round trip with a few clicks.

Easy.

If only building JAMstack sites were as simple as building vacations, right? Well, thanks to Stackbit, it now is.

If this is your first time hearing about Stackbit, don’t worry, it’s pretty new. In fact, it’s still in beta at this point. But it’s our prediction that you’ll soon be hearing a lot more about Stackbit, so we think it’s important to get familiar with it as early as possible. That’s why this article is going to cover:

• What Stackbit is
• Why Stackbit was created
• Unibit—their “meta” static site generator—and custom themes

Let’s dive right in!

What is Stackbit?

To understand Stackbit, you first need to have a basic idea of the JAMstack. For those unfamiliar with the approach, you should definitely check out our introductory post. It will provide you with a good foundation for understanding what makes Stackbit such an amazing tool.

But if you’re already familiar with the JAMstack, then you’ll be pleased to know that this novel way to building sites just got a whole lot more approachable with Stackbit.

Stackbit is a new SaaS that allows developers of any level to build their own JAMstack sites, fast. Founders Ohad Eder-Pressman (CEO), Dan Barak (CPO) and Simon Hanukaev (CTO) started playing with the idea in late 2018 and formed an official company in early 2019.

Stackbit takes all the tools you’d need for a site’s stack (theme, static site generator, CMS, and deployment) and quickly bundles them together for you. It offers options in each category, so you can mix and match the tools in your stack that best suit your needs.

At this point, you may be thinking, Ok, but “fast” is a relative term in this space… how “fast” are we really talking here?

Great question. Let me put it to you this way: you could literally throw a HotPocket in the microwave, go build an incredibly sleek JAMstack site, and you’d still be waiting for your food to be cool enough to eat.

Here’s how it works:

First, you get to choose a pre-built theme for your site. They’ve got many to choose from and that number will, likely, grow rapidly. As of today, you can also work with your own, custom theme. We’ll explore that feature further down.

Once you have your theme, you’ll choose from some of the most popular static site generators on the market today: Jekyll, Hugo, and Gatsby. More are on their way in the near future (Hexo and VuePress) but you’ll notice there’s also an option to request one to be added if you don’t see your favorite on the list.

Next, you get to decide which CMS you’d like to manage your content, or you can manually hook up your CMS later. That said, you’ve got plenty of good options to choose from including Forestry, NetlifyCMS, Contentful, and DatoCMS (not to mention Prismic and Sanity joining shortly).

Finally, you have your code repository with GitHub and deploy with Netlify, though you’ll soon have other options for both as well.

And voilà, presto, finito… that’s it. Now you just sit back, watch your site build, and wait for that HotPocket to cool.

Why was Stackbit created?

One of the main ideas propelling Stackbit is the driving force behind all technology: an innovation to make our lives a little easier in a particular niche. In this context, the niche is the JAMstack and it just so happens that Stackbit makes things a lot easier in at least three ways:

→ Speed: As mentioned before, you can bundle all of your JAMstack tools together and have a site up and running in a matter of minutes, regardless of your level as a developer.

→ Options: As mentioned, Stackbit is currently in beta but they still offer a variety of themes, SSGs, CMSs, and a couple of options for deployment as mentioned above.

→ Simplicity: The UI for Stackbit is just killer. Large visual displays, clear instructions, and thorough documentation makes using the platform virtually dummy-proof.

Now, I want to take a minute to address that last quality: simplicity. At first-glance, you may be tempted to put Stackbit in the “drag-and-drop” web builder category. I can see the temptation, but that doesn’t fully do this application justice. Stackbit isn’t a “get-out-of-jail-free” card for inexperienced developers; it’s just a great way to get started with the JAMstack. But that’s only the first step. Ohad explained to me that further down the lifecycle, Stackbit hopes to be more than just a JAMstack jumpstart but will actually help with maintaining and updating your site as well.

For now, though, using Stackbit gives developers the rare opportunity to play around with new stacks, try out different tools, see what they like—and more importantly, what they don’t—without investing hours of personal time. Plus, developers of any level are welcome.

And that’s where we get into the heart of why Stackbit was created: approachability.

Getting started with the JAMstack can be intimidating. Developers are forced to grapple with mountains of tools to learn, choosing tools that would be best for a particular job, and wondering how they can teach non-tech people (like...ahem... the marketing team) to work with those tools once the site is up.

Stackbit tries to tackle all these problems with one product and, in our opinion, they do a pretty d*mn good job of it.

So, if you’re just starting out, you can create quality, professional sites with a super low learning curve. Once you’ve got a great JAMstack site as your baseline, you’ll have a much better foundation from which to grow your skills and knowledge.

On the other hand, if you’re a seasoned vet, you can leverage Stackbit to take care of all the mundane tasks that come with bundling your tools and spend your time either designing custom themes or tinkering around under the hood. Whatever floats your code-based boat.

Again there’s a ton of potential for everyone here and as Ohad told me, “We’re just doing all the things developers don’t want to do so they can focus on the things they actually like to do.”

Bottom line? You can’t have mainstream adoption of a movement like the JAMstack without ease of use. Accessibility to new technologies is what pushes developers to grow. At least from our team’s perspective, it’s awesome that Stackbit is pushing developers to grow into the JAMstack at all levels.

Introduction to Unibit and custome themes

The real magic behind Stackbit is the creation of Unibit, a superset of existing static site generators that can transpiled to any modern static site generator. The interesting thing about Unibit is that the Stackbit team wrote a couple of transpilers (and will add more) to convert your Unibit project into a Jekyll, Hugo or even Gatsby project. So you just need to write your template one time and then you, and everyone using your theme, are all set!

We already mentioned that Stackbit has a couple of themes available, but some people want to be more unique. So if you’re interested in creating a custom theme for Stackbit, Unibit is the way to go. Fortunately, using Unibit is very simple. You’ll just need to learn how to use Nunjucks, a templating engine for JavaScript similar to Twig.

Note: We also got word that the guys at Stackbit are planning to enable developers to bring in themes built with any SSG, meaning that Unibit is a convenient choice but won’t be a must.

When you create your theme, you must include all the assets and data required for your theme to work. When the theme is used on Stackbit, the customer will end up with a fully functional site with all of your default content already provisioned in your Headless CMS of choice. Of course, they’ll be able to remove unwanted content once it’s up and running.

Here’s what the folder structure of a Unibit project looks like:

├── components
├── content
├── data
├── sass
├── static
├── templates
├── config.yml
└── stackbit.yml

I’m going to break down each folder/file:

• components folder is where you’ll create your partial views. For instance, you might want to create your navigation bar in there and include it in templates later on. This is where all your “reusable templates” should be located.

• content folder will hold all content. If you’re building a blog for example, blog posts will be created in this folder. Content files are usually Markdown files and are tied to a page.

• data is where you’ll add any data that isn’t tied to a page. For example, if you have an authors list but don’t need to have a specific page for each author, you’ll want to create a file like authors.json containing your authors list.

• sass is where you’ll add stylesheets, SASS is supported out of the box.

• static is where you’ll include any static assets such as images.

• templates is where you’ll add page templates. Templates are usually tied to content files.

• config.yml is the Unibit configuration file.

• stackbit.yml is where you’ll write content modeling and set some Stackbit-related settings.

Snipcart’s Stackbit E-commerce Theme

The purpose of this post isn’t to provide a tutorial for creating a theme for Stackbit, but we’re more than happy to share the one we created which is publicly available as of today.

Two of our developers got together to create a Stackbit e-commerce theme and demo shop with the input of our designer. Overall, the process took about two weeks, but they all had other projects to attend to as well. The theme with the design and the e-commerce integration would probably take about a week if it were done full-time.

We are definitely impressed with how aesthetically pleasing we were able to design the theme, especially in such a short amount of time. Plus, this is one of the first projects we’ve done that runs on our new v3.0. This updated shopping cart is still in beta, but will be officially released soon and is fully functional in the Stackbit theme. One of the neat things about the v3.0 is that we were able to customize the cart’s colors to match our Planty theme to stay consistent with the brand.

Here’s a quick look at the theme itself in use:

To get a better view of the Planty theme, click here

To access the Planty theme open source repo, click here

Again, this theme is now publicly available on Stackbit and is prebuilt with e-commerce functionalities. Meaning you can now use Stackbit to build an out-of-the-box e-commerce JAMstack site! To use Snipcart's custom theme, click here.

That said, we :heart: input from other developers, so feel free to contribute to our theme on GitHub.

Note: If you would like to create your own theme, we highly recommend you check out our guidelines for how to design an e-commerce site.

Closing thoughts

After playing around with Stackbit, our team was really impressed. I initially thought there would be some pushback from our developers because the platform makes the barrier to entry for the JAMstack really low. On the contrary, our developers were thrilled to see Stackbit helping move the JAMstack forward and, hopefully, popularize the movement. Plus, they reminded me that Stackbit isn’t a tool for maintaining a site (yet), so there’s still a lot of potential use for more experienced developers.

Another aspect of Stackbit that impressed us was their team. We’ve been lucky enough to build a bit of a digital relationship with them and respect their passion, enthusiasm, and openness to discuss the platform with us. This kind of project is tedious and there are loads of ways that it could all go wrong. It’s also the kind of project we wouldn’t trust many people—including ourselves—to pull off, but we’re confident these are the right people for the job.

What we’re most excited about, though, is seeing how far this software will go and what type of developers it will attract. Will it be more appealing to professional devs building JAMstack sites for clients or designers building custom themes? Our guess is a lot of both with an emphasis on the latter. Only time will tell.

That said, at this point it may be impossible to know where Stackbit is going but one thing is definitely clear: it’s definitely not going away.

---

If you’ve enjoyed this post, please take a second to share it on Twitter

Originally published on the Snipcart blog and in our newsletter.