Avelyne Flatiron Blog

Hosting a blog on Netlify with Gatsby

May 23, 2019

10 minute read time, 45 minute project time

Okay team, let’s do some actual “work”.

So, while I was looking at how to start off with this whole blogging thing I remembered an article that a friend sent me a month ago (thanks, Stu!)

Basically, a tl;dr is, it’s good to have your own website because then you have complete ownership of the website (as in you’re not beholden to someone else’s limitations), and it’s a real learning experience. I mean, I definitely felt proud when I got this… limited website off the ground and has been live for what seems like 10 minutes with only one and a half blog entries on it.

So let’s get the free stuff sorted, purchasing a domain is super easy to hook up, even at the end.

Web Hosting with Netlify

Go to https://www.netlify.com/ and sign up an account, it’s gonna take like 10 minutes, and you don’t have to pay anything. In fact, if you just sign up with your git account (which you should honestly just do seeing as we need git integration later anyway) it’s probably even quicker.

File Structure

So I’m using Netlify because I’ve previously used Heroku for hosting apps and I wanted to see the difference. I’m yet to really use Heroku for web hosting but I’ll be sure to make a further blog post about the pros and cons!

File Structure

This is just a super straight forward, no holds barred, hosting service on easy mode… and it has one thing that I absolutely love that involves NO work whatsoever. Continuous integration with Git.

I’m gonna be flicking between Gitlab and Github here, as I don’t want to make any dummy accounts! But the process is exactly the same.

File Structure

Signed up?

Cool.

Gatsby Framework

Now you need to head to https://github.com/gatsbyjs/gatsby-starter-blog fork and clone the repo and have a little look at the README.

File Structure

We’re using Gatsby as it’s really good for building static sites that are Progressive Web Apps and it’s really optimised for high performance. It makes use of the latest and popular technologies that I expect to be using after finishing at Flatiron including ReactJS and GraphQL.

Once you’ve finished reading through that (or let’s be honest, the first three steps because your eyes glazed over) we can add some content, even if just to play around with it.

When you’ve got that cloned, cd into the gatsby-starter-blog and use the following command:

gatsby develop

This spins up a local server for you to monitor your changes.

now you can just play around with blog entries inside ./gatsby-starter-blog/content/blog/hello-world to change some of the content and it will update in real time on http://localhost:8000 whenever you save (just don’t try to break it cause you’ll look silly) head to ./gatsby-starter-blog/gatsby-config.js to add your name, twitter, add your website name, add more fields like links to your GitHub account, LinkedIn etc etc, just don’t forget to also update them in the bio component.

File Structure

When you’re done just save, commit and push back to your forked repo.

Linking your repo with your newly created site.

As we’ve paired up Netlify with our Github/lab account we can just find the repo that we’re linking up

File Structure

And then make sure that it’s automatically detected that it’s a Gatsby project and that the build command and publish directory are as they appear here.

File Structure

File Structure

Adding a custom domain

File Structure

I’ll mostly leave this bit to you as there are so many providers to choose from but I’ll just outline what I had to do.

File Structure

Changing your DNS settings (GoDaddy)

So I ran into a problem here as I stupidly purchased my domain name on GoDaddy.com, if I were doing this again I’d probably choose a provider that was less interested in trying to run everything for me, had a user interface that didn’t make me feel sick and didn’t try to ram cPanel down my throat.

File Structure

All I needed to do was go to my DNS settings for the custom domain, change my nameserver addresses to the ones below hit the button and then walk the hell away. Seriously, don’t use GoDaddy. It’s not even cheap.

File Structure

Adding your free TLS HTTPS certificate.

Got a custom domain? Cool just hit the button and it’s all yours.

File Structure

And that’s it,

push to deploy, go to your domain and have a look at your own sexy looking blog. Just try to actually add to it so it looks like you’ve at least tried…


Sam Barrie

Written by Sam Barrie who lives and works in London and studies at Birkbeck University and Flatiron School. Feel free to check him out on Linkedin or GitHub.