GatsbyJS and WordPress Gives Website a Lease of Life
After over three years of having the same WordPress theme, it was time for a change!
This came about for a few reasons. There was nothing overwhelmingly wrong with the theme, but the font wasn’t the best on mobile. It’s nice to read an article on a mobile phone and not have to squint.
I also want a blog that is fast. There is nothing worse than wanting to read an article, and it takes ages to load due to all the bloat. This blog is not for profit (but you can tip me if you use the Brave browser…) so I do not need to load Google Ads. I think the slowest thing to load is Google Fonts (something I need to investigate).
There seems to be only one option when needing a fast website – having a static site. I have been a massive advocate of static sites in principle for a very long time. The benefits are easy to see. Reduced pressure on the server. Better user experience in page loading speed, consumes less of the users data. And by being headless I can use any backend I want (I wanted to stick with WordPress).
I spoke about static sites in my article on “The Rise of the Content Mesh”. The fact that now more than ever, it is possible to make a website out of many different micro services. These services are built to do one thing and do it right. The same way that a static site is built to do one thing right – make super-fast sites.
All the hard work is done by Gatsby, running on Netlify. These two work so well together, deploying a site is so unbelievably simple. Just connect Netlify to the git repository, and it will build an up to date site each time a new version is pushed. They have a free plan which is brilliant to get started on. I really recommend it! Once I outgrow them, I will probably move to an AWS plan or similar, but for now it is perfect!
Due to wanting to stick with WordPress, my biggest concern was how to get hold of the articles I had written easily. I did not want to re-invent the wheel if someone else had already taken the challenge. It was smart not to. Gatsby Source WordPress is the incredible Gatsby plugin that makes the WordPress REST API accessible. The plugin means that almost everything can be accessed using GraphQL queries. These are selective queries, that pass only what you need at the time. Massively reducing overheads. I have access to all pages, posts, settings, taxonomies etc. If I need to extend it, I can! A few simple queries pull out data for components all across the site, and being components – they are completely interchangeable!
The site is an on-going project. I am slowly adding new features such as easy integration with Google Analytics, full compatibility with WordPress Yoast SEO. The aim is to create a fully functioning template to start future projects from. If you are interested, the github repository is: https://github.com/justlikethisdesign/gatsby-tns
As I am sticking with WordPress. I am still using a standard admin panel, with this theme on top to handle the front end: https://github.com/justlikethisdesign/WordPress-REST-API-Theme
It is tiny theme. In-fact all it does is re-direct the user to another site (when updated, my site – or your site if you want to use this). This theme will be the backbone to my headless WordPress sites as I move into building more of these.
I have had to use a few plugins to make sure all the REST APIs are there for my consumption:
These plugins open up a little more functionality for Gatsby to hook into. This makes the whole development experience so much smoother.
This is just the beginning of the process, but I have already seen a massive improvement in performance, and the build process is so much more enjoyable!
And I removed comments. Because who needs spam 😉
