Site generating with the great GatsbyJS
Tags: webdev, javascript, react, learning
Published: 2017-10-01 14:37:00

---
title: Site generating with the great GatsbyJS
published: true
description: An article about recreating my portfolio site using GatsbyJS and React
tags: webdev, javascript, react, learning

canonical_url: http://dfjames.com/blog/site-generating-with-the-great-gatsbyjs
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d43apdqyjqid5p19sv9y.jpg
---

When someone mentions static site generation a lot of people think ofÂ [Jekyll](https://jekyllrb.com/). 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](https://www.youtube.com/user/LevelUpTuts) released a video on [GatsbyJS](https://www.youtube.com/watch?v=b2H7fWhQcdE&feature=youtu.be).

[GatsbyJS](https://www.gatsbyjs.org/) is a static site generator, similar to Jekyll, however it is written using [React](https://reactjs.org/) 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](https://reactjs.org/)Â 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](https://wordpress.org/)... 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](https://www.advancedcustomfields.com/)) 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](http://graphql.org/). Gatsby ships with it and through an npm install of a [gatsby-source plugin](https://www.gatsbyjs.org/docs/plugins/) 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](https://www.gatsbyjs.org/tutorial/)Â 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](https://www.styled-components.com/) and ensure the site scores a 90+ overall on [Lighthouse](https://developers.google.com/web/tools/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](https://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