Host your website for free with the Jamstack (Gatsby + Strapi)

In 2021, it is perfectly possible to host your website for free using popular CMS like WordPress, Wix, Webflow... but in the end, the free tier of these platforms does not allow you to connect the website to the domain name you've purchased.

In this article, I will be showing you how the Jamstack (with Gatsby and Strapi) could be the next solution for your future website and how to host it for free on Netlify and Heroku.

What is the Jamstack?

JAM stands for Javascript, APIs, Markup. It is a modern way of building a website reliably by pre-rendering your web pages. This makes your website faster than any website (which is a great thing for SEO), and it makes it free or very cheap to host and very scalable.

Websites built using the Jamstack do not require web servers as they are only made of pre-rendered HTML static pages, instead, they are being served using CDNs.

Jamstack for blogs

Coding Samples is using the Jamstack with Gatsby and Strapi. The Jamstack can be an absolute game-changer when it comes to creating an affiliate marketing blog because it costs $0 to host compared to other solutions that will cost around $15 to $20 per month, this is the ultimate solution to reach your break-even point faster.

Requirements to use the Jamstack

• You need to know how to code using Javascript, HTML, and CSS.
• Setup Strapi (the Headless CMS) and push it to Heroku for free
• Setup Gatsby (the static website generator) and deploy it to Netlify for free
• Setup a Cloudinary account to host your images for free.

What is Strapi?

Strapi is a headless CMS, it is a CMS that only takes care of the management of your data and not the visual aspect, unlike WordPress and others.

They are many others Headless CMS you could use like Contentful which is a great alternative.

What is Gatsby?

Gatsby is a static website generator with tons of plugins that makes your developer life easier. Gatsby will be connected to your Strapi instance hosted on Heroku to get all of your data at build time in order to create the pages of your website with the right content.

This is why you don't need a paying web server.

Gatsby will fetch all Strapi data you ask for in your configuration file gatsby-config.json:

{
	  resolve: 'gatsby-source-strapi',
	  options: {
	    apiURL: 'https://your-strapi.herokuapp.com',
	    collectionTypes: ['article', 'category', 'author'],
	    singleTypes: ['homepage'],
	    queryLimit: 1000,
	  },
},

After that, you will be able to query your data using GraphQL at localhost:8000/__graphql

Difference between Gatsby and Webflow

Webflow is a low-code/no-code website builder that generates a static website for you. To use Webflow you only need to understand how Html tags and CSS rules work. On the other hand, Gatbsy is an open-source Javascript framework using ReactJS that gives you the ability to code and generate a static website from scratch using different sources of data.

Free hosting you said?

Netlify for gatsby

Indeed, when you run a static generated website from Gatsby, you only need a CDN. Netlify is perfect for that as their free tier allows you to have up to 100 GB of bandwidth which is enough for general-purpose websites.

Netlify also allows you to connect your website to your custom domain.

Heroku for Strapi

In order to update your website content, you will need to access your Strapi dashboard and this one can be hosted on Heroku for free with the smallest instance and the free PostgreSQL plugin with it.

Cloudinary for your images

When you create blog posts of other types of content, you need images. Fortunately, Cloudinary offers a free tier to host your images. You just need to create a free account, get your API keys and add it to your Strapi configuration.

How to update my website if it's a static website?

Netlify allows you to set up webhooks that will trigger new builds automatically when you update some of your data on your Strapi dashboard in the webhooks section.

Learn more about how to create a webhook here.

Convinced to start using the Jamstack?

You can now follow these tutorials to start using the Jamstack with Gatsby and Strapi.