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