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.
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!
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.
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.
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:
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.
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
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.
Adding a custom domain
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.
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.
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.
Adding your free TLS HTTPS certificate.
Got a custom domain? Cool just hit the button and it’s all yours.
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…