Burning money, because you won't need it after this. (Don't actually do this)

Apologies for the clickbait-style title; but, it's not a lie.

I did in fact get totally free web hosting, with a CMS for content editing (read: blogging), and this guide will show you step-by-step how I achieved it.

For starters, though, you'll need a website. Luckily, I can help! If your business needs a kickstart online, get in touch and let's have a chat!

My Configuration

Before we begin, I should tell you how my website (the one you're reading this on right now) is set up. That's easy enough!

• I developed the front-end (the website you see) myself, using Next.JS. It's hosted on Netlify's free tier.
• The backend (where the website gets blog and portfolio posts from) uses an API provided by Strapi, a free, open-source CMS (Content Management System). That's hosted on Heroku - again, on the free tier.

There's a catch with the Heroku thing, though. Without a credit card on your account, you only get a small, limited amount of "dyno hours" (hours your app can be running) per month. If you were wondering why I used Netlify with Next.JS, this is the reason.

The post you're reading right now is technically part of the website you've visited, and it's not being pulled directly from the API, because my front-end already did that when it "built" the website. So the Heroku app only needs to be "on" during the initial build process, then it can go to sleep, and I don't get charged a penny! Confused? Don't worry - it should make sense when I explain the build process later.

The Front End

As I stated earlier, the front-end of this website is built using Next.JS. This means I can write reusable "components" for each element of the website, and still have static files after the website is "built". In simpler terms; I can write code once, use it 20 times on a page, and export it to a single webpage with zero dependencies. I can also fetch data once, use it 20 times, serve it to 100,000 people, and never have an issue - because it only fetches the data once. If websites could be viewed on toasters, this one would work just fine. Unfortunately, they can't. Yet...

During development, I run a local web server which refreshes pages every time I edit a file, and therefore data is fetched from the API on every refresh (I use a local copy of the API during development). When I'm done, I can run a build process which exports all my files to simple HTML pages, which any browser can read (even if JavaScript is disabled). This build process calls the API once, waking the Heroku app and embedding all the fetched data directly into the website's pages. Then Heroku goes back to sleep, and I don't get charged.

The Back End

The back-end of this website uses Strapi, a totally free and open-source Content Management System. I'm a pretty big advocate for open-source, so it fits in my workflow perfectly. Plus, it's super easy to use.

I've created "Collection Types" for blog posts and portfolio projects, both of which are fetched by the front-end when the build process is run. However, Netlify doesn't know when to rebuild the front-end by default. That's where the next section comes in...

How They're Connected

Netlify supports Webhooks - I won't go into detail on what a webhook is, but it's basically a message sent from one app to another when something happens. It normally triggers some form of event.

Luckily for me, Strapi also supports Webhooks! Do you see where this is going?

When I post a new blog post, like this one, Strapi sends a Webhook to Netlify, telling it to rebuild the front-end. During the build process, my app sends a request for various data (blog and portfolio posts) to Strapi, and Strapi sends the data back. Next.JS embeds the data into its generated files, and Netlify then publishes those files on the web for you to see!

The Details

This "stack" of web application is called "JAMstack" - Just A Mess stack (it's actually JavaScript, APIs, and Markup stack). It's what Netlify prides itself on supporting. Anyway...

Webhooks Configuration

In Strapi, when you visit the Settings page you're immediately greeted with options for configuring Webhooks. Perfect.

I have one Webhook enabled, which is my Netlify build. Netlify uses a simple URL for this - here's how to find yours: 1. Head to your app settings, go to Build & deploy, then scroll down to Build hooks. 2. Click Add build hook, type a name and select a branch (my Netlify site uses Git). 3. Copy the resulting URL.

Now, head back over to Strapi and go to Webhook settings. Click Add new webhook, type a name and paste in the URL from Netlify - ignore the Headers section (it's not important here).

Under the Events section, select every event on which you'd like to rebuild the website. I've got everything selected.

You can click Trigger to test the Webhook, or Save to save it.

A Good Ending

I think you deserve a coffee if you got this far. Thank you for reading!