My target will be to spend the lowest amount of money and time while building a custom branded, fully operational, automatic deployable shop which is suitable for startup and small business purpose, but extendable for future growth. But first things first, lets make a battle plan.
Objective: Herbal Tea Shop
Me and my family like a rather natural diet, we avoid processed foods and enjoy quite a variety of herbal teas. Over the years we gained our experiences and now entertain the idea for a little side-hustle of promoting and selling those teas online. This is an experiment with a rather big chance of failing, so we aim low in regards of investments and just give it a try.
Before we are going to make real money we will be able to manage our products, prices and customers with familiar office tools, so we are not looking for any warehouse management or CRM solution, we just want to present the products and give the buyers an option to order. Neither will we start out with employees, so even user permission management is not an important concern in the beginning.
We will need to make the site multilingual though and provide prices in different currencies as essential part of our marketing strategy, so it will be more complicated as a plain vanilla tutorial.
Disclaimer: This is not a paid promotion of any of the following services, I just want to show what I use for my particular project and which experiences I’m going to have with each. In the basic level all tools are free, if I hit a wall and need to pay-to-play I will state that very clearly and look for an alternative solution.
StackBit will be the backbone for our new shop. It is a very easy and fast way to bundle all the JAM Stack in one UI and bootstrap a new website literally in minutes. It gives you the option to use a pre-build or any custom themes, let you choose your Static Site Generator and a CMS. The code and data will live in a GitHub repository and deployed with Netlify.
This tool has a sleek dashboard which allows you to create and manage your JAM projects. It will do the work of wiring the components together without any complicated integrations and provides you with the links and API key you may need.
First you are required to choose one from a list of currently ten professional looking themes or adding a GitHub link to a custom theme. You have a Live Preview for each theme and for blogging, a portfolio, documentation or most other purposes is the selection already reasonably well. This step also shows a preview of over 20 upcoming themes which you can’t select yet but gets you and idea what is planned for the near future.
There is a Vanilla theme as well which is most likely the best starting point if you want to make a fully customer specific theme.
Custom Planty theme
In the next step you have to choose your site generator. Currently you have the options of Jekyll, Hugo and Gatsby, while more options like VuePress and Hexo are already announced. I’ve choosen Jekyll, I like that it also can run with GitHub Pages and it is the one I have the most experience with.
Continue to CMS
Here we can currently choose between 6 Options: Forestry, Netlify CMS, Contentful, DatoCMS, Sanity or No CMS. My Planty theme supports Forestry and Netlify CMS but since I actually don’t know either, I want to test them out first and choose No CMS for now. Anyway, since I try to understand how the content flow actually works I figure its a good option to work without it first and add it manually later on.
Currently the repository with the website data has to be on GitHub, GitLab and Bitbucket Integrations are announced though. Since this would be my first choice anyway I’m good with that and move on to Deployment.
Deployments are right now just done with Netlify. I just created a free account with my GitHub login, authorized it and seem to be good to go. GitHub Pages and GitLab Pages are announced but for now we’ll see how well Netlify does the job.
First of all I have to enter a name for the project and I call it Rasta-Herb-Teas and then connect it to my GitHub account. A few clicks later everything seems to be alright. StackBit will now create a public repository with the name rasta-herb-teas for my user.
I see a message that my site is currently deploying and less then 2 Minutes later I got the notification of success. My site is now live available at
https://rasta-herb-teas-BUILD_ID.netlify.com/, this link can be shared.
When I follow the link I see indeed a working site build with my template, plus a StackBit management overlay that allows me to rebuild from here or go directly to the Netlify project or GitHub repository. That’s neat!
The actual creation process of bootstrapping a working website with a selected theme and dummy content takes indeed just a few minutes and can be done even from a mobile phone without a problem. After all it’s just choose and click, the only typing are your password and project name.
For the very first project it took me clearly longer since I had to register and authorize the components. I spend by far the most time choosing a template but it felt self-explanatory all the time. Until now StackBit gets a clear thumbs up, it did what it promised and looked good while doing it.
You can spin up a fresh professional prototype which is online available while talking with a customer. This allows you to get into the specific details in the very first meeting and is the easiest and fastest bootstrapping I’ve seen so far.
This article just aimed to outline the project and tools. In the follow up I want to apply a branding and work with the products, so it already get the looks and feels of a real shop. I strive to find a strategy how to deal with multilingual contents and try to figure out which CMS best fits my needs.