Using Gatsby for this website

For some time now, I have been wanting to set up my personal site so that I can do some TIL blogging and set up a profile. 2 years ago, I had a simple site made with jekyll, which creates static html pages that you can easily and cheaply host. Since then, I have been using lots of React at work, so when I wanted to do this website, I looked for static site generators and found Gatsby which is an open source project with free/paid tooling around it.

The strength of vanilla React is the component paradigm which allows you to better manage and reuse structures in your code. A vanilla React app could become bloated as components are programmatically created through a few giant javascript files linked from index.html. For example, if you visited this website, it would include all the data for both the blog and profile. Gatsby, on the other hand, is built on top of React, but introduces mechanisms to build out static pages from the React code, so only what is required to be seen is prebuilt into individual files.

That being said, I just wanted to try something cool and interesting. Together with Gatsby, I am also using tailwindcss for styling, which I am liking so far.

My files are currently hosted in S3 with CloudFront in front of it. Currently I am using the free tier from Gatsby Cloud for deployment. One issue I faced was that Gatsby would build files into folder/index.html files, and to retrieve the file, an ugly /index.html would need to be in your browser's URL. To deal with that, I added a Lambda@Edge to check the request paths before trying to find the file in S3, like so:

exports.handler = (event, context, callback) => {
  var request = event.Records[0].cf.request
  var olduri = request.uri
  if (olduri !== '/') {
    if (olduri[olduri.length - 1] !== '/') {
      olduri += '/'
    }
    var pathArr = olduri.split('/')
    var lastPath = pathArr[pathArr.length - 2]
    if (!lastPath.includes('.')) {
      var newuri = olduri.replace(/\/$/, '/index.html')
      request.uri = newuri
    }
  }
  return callback(null, request)
}

Basically what it is doing is looking for nicer paths such as /blog and changing it to /blog/index.html for searching S3 so that it targets the correct S3 object. To note that Lambda@Edge must be created in us-east-1 region, as you won't see the option in other regions.

I will be iterating on this project and writing a blog post once in a while.

Stay tuned!

Jerome