Why I used GatsbyJS

Like anything, there are always multiple routes you can take to achieve your Goal / Objective. My goal was simple, I wanted a new personal site to showcase current and past projects. While I could have built it from scratch or used an online platform, GatsbyJS stood out.

What is Gatsby?

Gatsby is a free and open source developer framework based on React for building blazing fast websites and apps

In a nutshell, GatsbyJS builds static sites using modern web technologies. You still get to use React, CSS modules, GraphQL etc. The only difference is that they are used before deployment.

The word ‘static’ might put some people off. It’s important to understand that you can still apply JS to the page to enrich it, add lazy loading etc. But the core logic to build that page can be separated out. For example, you could execute some JavaScript to fetch data to render the page. But this effort is now taken away from the clients browser.

Why I used it?

1. I wanted to hit the ground running. Setting up a development environment, getting the build ready for production etc all take time.
2. Try something new and learn from it.
3. Keep using modern development tools — React, GraphQL, Webpack, Storybook etc.
4. Generate a site that loads Fast! Having content server-rendered helps with faster load times and better SEO. If you can avoid having JavaScript run client-side then why not?

So what went well with GatsbyJS…

Development Environment

Setting up a new site and running it locally can be done in a few lines:

npx gatsby new gatsby-site
cd gatsby-site
npm run develop

This will give you a local development environment at http://localhost:8000 with live reloading. Now your ready to start coding and focus on the build. Once your ready to deploy, you can build the production version with npm run build.

GraphQL

GraphQL enables you to keep your content separate from the build, and ultimately generate the site based of this. For example, I load in a JSON file with the sites content, then loop over it to generate the actual site. This allows me to build reusable components and inject the content at runtime based of the JSON site structure.

Using the the GraphQL IDE (http://localhost:8000/___graphql ) will helps understand the data your loading in and how to query / process it.

Gatsby-Image

It’s worth mentioning Gatsby-Image, which in their own words describe as “Speedy, optimized images without the work”. This plugin is awesome! You provide the image details using GraphQL, and it does the rest.

gatsby-image automatically sets up the “blur-up” effect as well as lazy loading of images further down the screen.

Page load is a key aspect of how a user perceives the performance of your page. By loading lower resolution files to start, you can increase your first meaningful paint.

Deployment to AWS

Although you are not limited to using AWS, it was my preferred choice. Once you have AWS setup, GatsbyJS enables you to upload the build with little effort.

1. Within AWS make an IAM account with administration permissions and create a access id and secret for it.
2. Install the AWS CLI and run aws configure. You’ll need the details from step 1 to complete this step.
3. Install the required node module npm i gatsby-plugin-s3
4. Update your gatsby-config.js to use the plugin and point to your bucket. E.g:

plugins: [{
  resolve: `gatsby-plugin-s3`,
  options: {
    bucketName: 'my-bucket-name.com'
  },
}]

4. Finally, runnpm run build && npm run deploy . This will Build a production friendly version and deploy it. Its very satisfying deploying your latest changes like this.

Wrap up

Overall I was really pleased with using GatsbyJS, it did not disappoint! The documentation, examples and actual usage are great. I personally love the concept of using React, GraphQL and other tools to build a static site. I could have used JavaScript at the client-side to render my page, but why do this when I can load the page faster if its generated pre-deployment?

It won’t be a perfect solution for every project, but it fitted my needs really well and would be definitely considered for future projects.