When someone mentions static site generation a lot of people think of Jekyll. I had heard some good things about it and noticed it would allow me to build a blog quite easily. I was eager to learn something new and get something up and running that was more than just my usual WordPress theme. I was on the verge of rebuilding my portfolio site until a certain Scott Tolinski released a video on GatsbyJS.
GatsbyJS is a static site generator, similar to Jekyll, however it is written using React and allows you to write your pages as React components! It is somewhat similar to create-react-app where almost all the scary Webpack config has been abstracted away from you and is setup ready to go, so you can get to the important stuff like...building the site! (If you are a fan of React and not convinced, the React website/docs were just released using Gatsby!)
This caught my attention for multiple reasons. I wanted to:
- Be able to build a new site with a blog relatively quickly
- Have a site that loads quickly/is performant
- Learn some more React and JavaScript
Another reason I ended up going with Gatsby was the promise that your project could be connected to various APIs or even a CMS of your choice.
The magic of GraphQL and Gatsby Plugins
Originally, following Scott's and the official Gatsby tutorial, I had it pulling my content from good ol' Markdown files. Then I saw it... too good to be true, the mention of connecting it to WordPress... I have been writing WordPress themes for almost 2 years now, so this got me super excited. To have my back-end as WordPress (including ACF) and the front-end in React, I had found the perfect place to test my front-end abilities.
I was skeptical at first: would I have to parse large amounts of JSON to get the data I needed? I have never even interacted with the WordPress REST API, how will I query it?
The answer... GraphQL. Gatsby ships with it and through an npm install of a gatsby-source plugin of your choice and a tiny bit of a config, you can start querying in no time. I was amazed with how simple queries using GraphQL. You look at them and you go "Huh, that's it? Really?". Gatsby even ships with a in-browser query tester so you can see exactly what data you are getting from your GraphQL queries. Wanna sort those blog posts by date? No problem, just add a flag.
Wrap up and future
In just a few weekends I managed to rebuild my portfolio site with the blog I wanted. I'd highly recommend Gatsby for anyone who has started getting acquainted with React. Before I started this project I didn't know a lot about:
- Static site generation
- Creating a Progressive Web App (PWA) and what qualifies as one
- React Router
- GraphQL
- Wordpress REST API
Moving forward I'd like to extend the project to include pagination within the blog, use Styled Components and ensure the site scores a 90+ overall on Lighthouse (Google performance auditing tool)
tl;dr - Side projects are great and you can learn a lot from them. Stay in the loop and listen to others whether that be watching tutorials, listening to podcasts, following devs on twitter, reading articles on dev.to, blogs etc. #neverstoplearning
If you are like me, learn something, build something, even if it's small, then write about it, then you'll have a first blog post, just like this one :D
Top comments (4)
Good article. I recently moved my personal site (bilalbudhani.com) to GatsbyJS & thinking of writing a blog post explaining my experience of the same.
Some of the pitfalls I found in the platform are:
1) GatsbyJS doesn't have a first-class support for tags in routes.
2) GraphQL seems to be a over-engineered technology to be included in a static site generator (I would be happy to be proven wrong if someone can explain the use of this).
3) In case of something goes out of GatsbyJS standards in development mode –– It doesn't throw any errors whatsoever. Just stops rendering the page, you have to manually do the diligence and find what went wrong.
I feel it is still far from being stable & needs to fill a lot of gaps.
Cheers,
Awesome, would love to hear more about your experience!
Do agree with some of your pain points but I feel pretty good that some of these will be ironed out in the future as it is a fairly new project.
As for the GraphQl being an "over-engineered" technology, Im not sure about it because for me I felt it made querying an external API so much simpler than just requesting hunks of JSON from an endpoint. Perhaps it has a lot more to it than I required but its not like it made a massive difference to my bundle size at the end of the day and I got to learn something new.
Hey Bilal,
I see you're using the Gatsby Ghost Starter, am I right?
Is it possible to use just powered by Markdown files instead of the ghost cms?
Hi Louis,
I switched to Ghost (self-hosted) version after finding Gatsby not fit for my use case. If you want to just power your site with markdown files then check out 11ty.io. It is quite easy & straight forward to get started with. I'm playing around with it myself & thinking of switch to it from Ghost.