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.
Why I used it?
- I wanted to hit the ground running. Setting up a development environment, getting the build ready for production etc all take time.
- Try something new and learn from it.
- Keep using modern development tools — React, GraphQL, Webpack, Storybook etc.
So what went well with GatsbyJS…
Setting up a new site and running it locally can be done in a few lines:
npx gatsby new 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 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.
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.
- Within AWS make an IAM account with administration permissions and create a access id and secret for it.
- Install the AWS CLI and run
aws configure. You’ll need the details from step 1 to complete this step.
- Install the required node module
npm i gatsby-plugin-s3
- Update your
gatsby-config.jsto use the plugin and point to your bucket. E.g:
4. Finally, run
npm run build && npm run deploy . This will Build a production friendly version and deploy it. Its very satisfying deploying your latest changes like this.
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.