Finally, in this post, we will look at how to host our Gatsby generated static sites on Netlify for free, and how to set up a webhook to automatically regenerate and update our site each time our content change.

Before we get to Netlify though, let's look at how the final achitecture/workflow will work.

1. Each time any contents on our site changed, Ghost will automatically send a POST request to Netlify, notifying that a rebuild should be made.
2. Netlify then pull our Gatsby source code from our Git repository.
3. CI/CD pipeline run gatsby build.
4. During build process, Gatsby pull contents from our Ghost CMS to generate the final static sites.
5. Netlify then publishes the final result to its CDN.
6. The CDN then serve these to users upon visit.

Git Repository

In the previous parts (Part 1 and Part 2), we took care of the CMS and our Gatsby Source code. The one thing that is missing apart from the web host, Netlify, is a Git repo.

We need our code to sit somewhere that Netlify can pull, and our local machine just won't do. So, we need to push our code to a repository first. There is a lot of repo to choose from and a lot of tutorials to teach you how to do this so I won't go into that detail here.

Netlify

With Git repo out of the way, we will now set up automatic build process and host our site on Netlify.

First, you want to sign up for a free Netlify account.

Once that isd done, click on New site from Git.

Pick the Git provider that your site's source code is hosted. We will be using BitBuck in this tutorial.

Authenticate with your Git provider then select the correct repository.

Make sure the Branch to deploy is set to master.

Set Build command to gatsby build. This is the command that Netlify will run each time a build is requested.

Next, set the Publish directory to public/. This tell Netlify where your final static files (the result of previos build command) is located at. These are the files that Netlify will publish to its CDN.

Finally, click on Show advanced to configure our API keys.

Add two variable called GHOST_API_URL and GHOST_CONTENT_API_KEY, then put the values you obtained from Ghost's Integration we set up in the previous step in each respective value field.

Finally, click Deploy site.

Wait awhile while the your site is being build. If everything goes smoothly, you will see the status turned to Published. Once your site finished building, you can click on the URL below your site's name to go to your hosted site. Note that, Netlify will likely generate some random subdomain for you initially. We will look at how to change this later.

You should see that your site is now live and accessible from the Internet!

Setting up Webhook for CI/CD

Finally, we do not want to have to manually tell Netlify to rebuild our Gatsby site everytime we create or modify a blog post. Fortunately, Netlify provide a webhook that we can call to automate this process.

First, go to Site setting > Build & deploy

Scroll down to Build hooks section and click on Add build hook.

Name it whatever you want, then click Save.

This will give you a URL. Select and copy it.

Now, go back to your Ghost admin page and click on the Integrations you set up for Netlify. Then, click on + Add webhook.

Name it however you like.

Set Event to Site changed (rebuild). As the name suggest, this event is triggered everything something change on our Ghost site (create, modify, publish, unpublish, etc.).

Finally, set Target URL to be the URL you obtained from Netlify Build hook in the previous step.

Now, your Ghost CMS will send a POST request to the target URL each time something changed on our site. This POST request will then trigger a rebuild on Netlify, allowing it to pull new contents and update our site automatically!

Note that, this hook only handle the changes made to content on Ghost. It does not handle changes to the gatsby source code itself. Luckily, Netlify already handle that part of the CI/CD for you. Each time you push a new commit to master, Netlify will also pull the new code and trigger a rebuild automatically. Pretty code isn't it!

Lastly, we will look at how to get your own domain name and set that up in Netlify!