By: GevDev | February 13th, 2021
I wish I did this when I first setup the blog and the website, but I didn't. So now, here I am trying to recall things from cold storage memory instead of it being fresh in my mind. The point of this article is two-fold, to share with others how I set everything up but more importantly to document things for myself for the next time I forget how I did things and need a reference.
The different parts
- Gatsby.js This website is built using Gatsby.js. Gatsby.js was a super interesting concept for me, because it allows you to have a somewhat dynamic website which is served as a static website. Confusing right? Gatsby essentially compiles all dynamic content such as this article and builds everything into a static website. Each time you make a change to your dynamic content, the entire site is rebuilt and distributed. Static sites are great because they can be cached, which makes the entire thing much more responsive. The Gatsby.js framework is free to use as long as you are building everything yourself. They have some plans to use a cloud version to build your website for those that are interested. When working with Gatsby.js, it's very similar to React, where everything is a component but there are slight differences here and there. Once everything is built and ready to go, you can deploy your website to Netlify.
- Netlify While Netlify isn't a neccessity to host my website, it makes things easy. Eventually, I'd like to move off of Netlify, but right now it's good enough. What Netlify does for me is provide a CDN that distributes my static website globally. Once my Gatsby website is built, the Azure DevOps pipeline grabs the build and deploys it onto Netlify.
- Azure DevOps Pipeline To automate the build and the deployment of my website, I am using the Azure DevOps pipeline. For a build agent, Azure provides a free agent with 1,800 free build minutes per month, however I was worried I might exceed that, so I spun up a self-hosted agent which I can use with unlimited minutes. Whenever the agent gets a trigger, it pulls the latest code from github, pulls dynamic content from Contentful, builds it and deploys it to Netlify. There are two ways to trigger the build process. First is, anytime code is pushed to Github, a build is triggered. The second way is when there is an update to Contentful, a REST API call is made to Azure that triggers the build.
- Contentful Contentful is a cloud based headless CMS. Gatsby.js provides a plugin for easy integration with Contentful. All the data from Contentful is pulled into the Gatsby.js build using GraphQL. I am currently writing this article on Contentful, and when I press the publish button, the flow will look something like this:
Contentful Update -> Webhook to Azure DevOps -> Agent Gatsby Build -> Agent Netlify Deploy -> Refresh Website
There are a lot of technical details that I didn't mention, and maybe I will come back and add those details in a future update. Some things I would still like to do is potentially decouple from Netlify. I would like to self-host things as much as possible, because all of these SaaS providers can be a bit of a pain to keep up with and may change pricing at any point. As things stand, my website is hosted using free services except for the domain (three letter .dev domain was expensive!). I would like to continue hosting for free, but I realize that there is always a catch when something is free.