The term Jamstack may sound alien to people who are unfamiliar with it. It is also confused with the development stack such as in MERN, LAMP, etc...
What is Jamstack?
Jamstack is a collection of best practices. You can also call it new standard architecture for the web.
To give you a better understanding JAM in Jamstack stands for JavaScript, APIs, and Markup. In a traditional website built with typical CMS's, your pages are created on the fly on a web server.
But with the Jamstack approach, pages are pre-built during deployment and served on CDN. And, trust me, nothing beats the time to the first byte. After all, both your customers and search engines crave a website that delivers a fast, secure and engaging user experience.
All this may be a lot to digest but, if you start now, your first Jamstack website will be ready in the next 60 mins.
Prerequisites
Before diving straight, you need to have a Github account and a Netlify account created using Github.
Step 1: Go Stackrole
Here are you can find a collection of open-source and premium Jamstack website templates. Pick the one you like the most.
To make it simple, I am using gatsby-starter-foundation
Step 2: Experience the Live preview
Once you have decided on the template you are going to use for building your website. Click on Live Preview
Step 3: Time to Deploy (Launch your website)
Like what you see, hit "Deploy". This will redirect you to Netlify and ask you to connect to Github and Authorize netlify to access your Github account.
Now enter the repository name you want Netlify to create in your Github account and click save and deploy. This will allow Netlify to fork a copy of the Jamstack template and start building your website.
You can check the deployment logs by clicking Building in Production deploys. This gives you insight into how your website is being built.
After the deployment, you can go back to deploys and find your website URL that looks like https://[your-sitename].netlify.app. This is your base website address, which can be customized or a domain name can be added when ready.
See, that was easy, isn’t it?.
Step 4: Managing your website
To make changes to your website, go to your GitHub account and open the repository Netlify created. Here, you can find all the code of your website, Now you can click the code button to clone. I prefer using the GitHub desktop because it keeps my workflow simple. From there you can open the repository in VSCode, start making changes and commit.
After your commit, Netlify will take note of the changes and start building your website to make appropriate changes.
Make sure to check out your website repository's readme file, this will give you a broader understanding of features, folder structure, and which file to change.
Conclusion
By following this tutorial we have created a website using a Jamstack template from Stackrole. Congrats 🎉
There is one more step before you call it your own website, connecting it to your domain. We mapped out the steps needed to add custom domain name to your Netlify website
Hit a roadblock any point DM me on twitter @stackrole or use our Contact form