In this article, you will learn how to create a JAMStack powered website in under 10 minutes. The greater news is that you do not need to be a developer, and you do not need to know Javascript. You will learn how to create a website without needing to know much! In this article, we are going to use a great tool called StackBit. StackBit is a really handy tool. StackBit has many handy features, however, in this article, we will focus on StacBits ability to create and configure JAMStack powered websites with only a few button clicks! StackBit will hook up your source control, configure the CMS, and all of the infrastructure configurations for you. All you will need is either a valid Gmail, Netlify, or, GitHub account (I recommend using a GitHub account as the easiest).
I have been a professional web designer for nearly 20 years. Obviously, within that time things have changed. For me, the most impressive change is how long it now takes to set things up. This productivity boost is the thing I love most about StackBit. Back in the old days, starting a new project would involve a lot of work. The set-up tasks would include installing a server, setting up a CMS locally and then setting it up again on a shared server, connecting databases, fiddling around with the DNS and finally fixing any server errors that occur. This process felt like a chore and could take around a week. What used to take me a week, StackBit now does in under 10 minutes. It's amazing! This really is a great tool that you should be aware of!
Using StackBit will give you a very quick and easy way to try out JAMStack websites. This is not the only way to create a JAMStack powered website, however, if you are starting out this is the path I recommend you take. Let us go over the process. When building a StackBit website you get to pick and choose from the best of breed sources. First, you get to decide the theme. The themes can be powered using one of StackBits pre-made templates, or, you can use your own custom one. Some links to some sample sites (and the GitHub accounts) of some of the StackBit themes that I like can be found here:
Next, you get to decide which static site generator you want to use. You have a great selection here, as you can pick from the most popular ones:
- Gatsby - Blazing fast modern site generator for React.
- Hugo - Hugo is a static site generator written in Go
- Jekyll - is GitHub's blog-aware, static site generator in Ruby
- Next.JS - Most popular static site generator
One thing to note is that the static-site generator you pick will influence which of the CMS systems you can choose from later. In most cases, the CMS will be a more important consideration compared to the generator. When it comes to JAMStack, there are two types of JAMStack CMS systems, API-powered CMS systems and GIT-powered CMS systems. Some generators like Gatsby will work with everything, while Next.JS will only work with API powered CMS options. I recommend playing around with the settings until you can get the stack you want to use.
Finally, you can pick the CMS that you would like to use. Below lists the API-powered sites that you can use with StackBit:
You also have several GIT-first CMS solutions. These include:
After deciding the technologies that you want to power your website, you click build and StackBit will create everything for you. StackBit will host the site in Hetlify for you. While generating the site it will create all the web-hooks you need.
Once the site has been created, you will also have access to the StackBit editor. The StackBit editor will also work as a CMS/content editing editor. From the Stackbit editor, you will be able to the editor and public content. The Stackbit editor feels a little bit like Strapi.
I like the StackBit editing interface and I recommend that you give it a trial. You will find that you can do most things entirely within the StackBit editor, this includes A/B testing with a paid-for plan! As you can see creating a JAMStack powered website using StackBit is super simple. There are obviously a lot more steps to turn a theme into a production website. These steps will be covered in separate article/episodes. For now, you have a cool and easy way to play around with JAMStack to see what you think. Happy coding 🤘
