Building a personal blogsite with Gatsby and Netlify(+CMS) is crazily simple - here's how to do it.
You decide to register a domain in your own name to create a blog, which is an odd feeling, and perhaps on the wrong end of the narcissism spectrum. But what do you do next? Wordpress would be the go-to of old, but it is not even remotely exciting tech to tinker with.
I would like to say I agonised over which tech stack I would build this blog with, but I didn't. It was a straight forward choice - JAMstack is where it's at, and the king is:
Quite fitting that the twenties have come round again, and are roaring fast with static generated websites with five (plus) nines of uptime and near un-DDoS-able resilience.
Time to start building.
So, this is the easy bit
Configure your domain name servers where you created your domain by pointing them to:
You may or may not have noticed, but Netlify built you a website from your forked repo without you doing a thing! It will watch your repo forever more, and build+deploy with each commit. Your starter/template should now live on your domain and be happily forwarding emails in which ever way you configured them.
Time to clone your new GitHub repo locally and crack on with content and styling.
Either start writing Markdown in your your repo by editing one of the existing blog templates or, if like me, you have Medium posts you wish to re-post, try this:
medium-2-md is the key component here (a node app). It will take your exported html articles and give you gatsby compatible markdown. you can copy this straight in to your blogname.md files.
You can go as mad as you like here. Most templates are well structured and easy to modify using SASS. Fill your creative boots!
First up, you need the tools. NPM install both the Gatsby CLI and the Netlify CLI via
npm install gatsby-cli -g
npm install netlify-cli -g
To build it's:
npm run build
to run a local server it's:
There's a tonne more you can do. Further reading here:
Literally commit your changes and watch as Netlify does the work for you. Voila, new website.