How I created my blog with Gatsby, Contentful and Netlify

Hello friends, in this article, I will discuss how I created my blog www.herdingcoders.com and hosted it in the cloud. I have long wanted to have my own personal blog, and this year I went ahead and committed to getting this done. With a little technical expertise and some patience, you can stand up your own blog in no time. In this article, I will detail the options I selected to stand up my blog, with that said, let us get started.

Background

As I stated earlier, I have eyed off having a blog for a while now, and this year was the year to start one. Before I purchased any domains or hosting options, I took a look at the tech stacks around for having a blog. There are many, many options with the most popular being WordPress, Wix and Squarespace, amongst many others. These require no coding and are very easy to get started with. But to be honest, where is the fun in this if you can't get your hands a little dirty with some code and cloud fun.? 

Domain

I choose Godaddy to grab my domain. Now you can go anywhere to get a domain, so this isn't really a big deal. I chose GoDaddy because I have purchased domains with them in the past. Also with a GoDaddy domain, you can setup a Microsoft 365 email address which uses your new domain. This is a real nifty addition and for some reason only works with domains purchased from Godaddy. I actually had a personal 365 subscription setup previously, mainly to get the office suite for my home use, so the custom domain thing was a pleasant surprise.

Code repository

Github is the default choice for code repro's now a day, and they make it a smooth and easy experience to get up and running. Hosting your website's code in a tool like GitHub is critical because we will be using it to deploy directly to our hosting provider when we make code changes or changes to our content.  

Framework for building site

For a while now, I have been researching Gatsby.js. Gatsby is a React-based framework for building websites. Gatsby is a JAMStack framework, with the JAM standing for Javascript, API and HTMLMarkup. The front and back end's of JAMStack sites are decoupled from each other. The front end of a JAMStack website consists of HTML, CSS and Javascript which Gatsby generates at compile time. The back end is a content API which serves up JSON or XML. For more information, check out www.gatsbyjs.org. 

Gatsby is based on React, and given that I wanted the flexibility to do a little more with the site down the track, I took the plunge and created a website with Gatsby. Gatsby has a wide selection of starter projects which you can download and use as the basis for your web project to give you a head start, this is the path I took to get up and running.

Gatsby provides a lot of plugins that do a lot of heavy lifting for you in creating websites. Stuff like image optimisation, SEO, google analytics, graphql, cms integration are all provided for via plugins. This cuts down the effort you need to get a site up and running quickly. 

Development environment

Now to get a Gatsby local development environment up and running, you need to know your way around a terminal. The one that ships with your computer will be fine, I use ZSH shell on my terminal. After using the git commands in terminal to clone (download) the repo (code project) you need, there are a couple of basic commands to setup (depending on your starter project) and get running. My starter used:

yarn run setup
yarn run dev

These commands configure, grab your dependencies and build the site to localhost for development purposes. You typically test, and code / configure your site locally before deploying to your hosting provider. I spend a fair while getting things set up locally before deploying to a hosting provider.

For code editing, I use Visual Studio Code. It is a very slick editor and has excellent integration with GIT to make it easier to manage this workflow. 

Content Management

The next important decision was to choose a CMS for my website. Now Gatsby can create sites from a CMS or static files, but I wanted to have a CMS I could enter my content into, and was also keen not to spend too many dollars on getting this all up and running. I selected the Contentful headless CMS. Contentful is a cloud-based headless CMS. A headless CMS is a platform that stores content and uses API to deliver this content to the front end sites or apps or anything that wants to use that data. A headless CMS doesn't do any presentation itself unlike a Kentico or Umbraco. 

As I mentioned earlier in the article, Gatsby has many starter projects you can use to get up and running with a simple git clone command. I selected the Gatsby Contentful starter project and hit the clone button. This provided me with a basic blog template Gatsby project and Contentful backend CMS with all the content types required to host blog entries and things like hero images etc. 

I changed the look and feel of the website myself mostly by changing data in Contentful and adding some images and my articles. The actual changes I made in Gatsby (react) were limited. Contentful has a very generous free tier that I am currently using. 

Hosting

Netlify is a cloud hosting provider that enables the developer to push their code straight from GIT and into production with the click of a button. This is one of the key reasons why I hosted the code in GIT in the first place (especially when you are a single developer). Once you have configured your site details (git repo, site name etc.), along with repointing to your domain details you are almost set to go. Deployments, they can be triggered on changes to code or content (straight from contentful), or if you are old school, you can trigger these manually. 

Netlify has a generous free tier which will keep my personal site going for quite some time. 

Writing

For writing, I have been using Scrivener for a little while now and find it a great tool to organise and complete my writing. I find Scrivener a great tool to punch out a few words, although it is more suited to screenwriters or folks that write novels because it has a lot of features to make these tasks easier. I really like its ability to have your research content and document notes etc. easily accessible when your writing. I have all my blog content in Scrivener so I can keep track of what I have written about and I start to plan out the next few articles here also. 

Because my writing still sucks, I use Grammarly to do a quick check before I post the content. My writing is getting better, one of my goals in writing a blog is to improve the quality of my writing, and doing something regularly is a great way to achieve this.

Images

My main website image was sourced from iStock. While the hero images in the posts are from unsplash. Unsplash is a great free resource for getting high-quality images. One of my to-do items is to add the attribution of the images to the posts unsplash provide the HTML link for this purpose, making it easy. 

Conclusion

I took a different path to setting up my personal blog than most people just choosing a basic WordPress site to get up and going. Being a tech nerd, I couldn't help but take a more involved path to stand things up, and I'm glad I did. I enjoy playing with Gatsby/React and plan to keep learning these tools to expand the site in future. The use of the cloud platforms Contentful and Netlify to host my content and website respectively has been super quick and easy to get results from, proves the value of adding cloud services into your toolbox.