Creating a website with Gatsby
Update 25/06/2023: This site has since been rewritten in Next.js, see this blog post for details.
You're reading this on the new and updated version of my website. I'm using Gatsby built and hosted for free by Netlify.
I love starting personal projects. Unfortunately much more than finishing them. The motivation behind this website is to have somewhere to build a portfolio and force myself to put the final polish on projects to get them into a state to show off.
Previously, this site used Github pages and Jekyll. I'm a fan of the idea of using Markdown to statically generate blog like pages, but unfortunately not really a fan of any of the default themes. Of course, the themes are completely customisable/overridable but making seemingly small tweaks always seems to be more painful than it should be.
After seeing friends making websites with Gatsby and Netlify I thought I'd give it a go. I'm much more comfortable with React compared to Ruby so it seemed like a sensible choice.
By default Netlify created a gatsby-blog-starter repo for me but I scrapped this after I ran through the Gatsby tutorial. In this you start from scratch (well, the hello world template) and build a "Pandas Eating Lots" blog. This was straightforward enough that I thought this seemed a lot more fun than trying to customise the existing blog template.
Starting from the hello world starter I:
- Added typescript by following a couple of medium articles. I figured it'd be easier to add it early on, and if I want to do anything more complex with this site in the future type safety will be useful!
- Added Typography.js to make everything look pretty without having to do too much CSS.
- Created a page header using the best recent photo that I'd taken (on a COVID-19 daily quarantine exercise walk to the Clifton Suspension Bridge).
- Followed the example of the Gatsby tutorial to generate pages from Markdown.
And that's it!
All that's left to do is for me to keep updating with content!