How I built a website from scratch using GatsbyJS and AWS

Motivation

The Purpose

In this article, I will be sharing:

  1. Why I decided to write a website from scratch when there are many tools to do this (Wordpress, Wix, etc.)
  2. Architectural options and why I decided on static site generation
  3. The technology stack I used to accomplish this
  4. Potential improvements and future steps

Unlike other articles, I will not be sharing the exact source code I am using. Theoretically, I should be able to share my source code without any security concerns. However, I am not a security expert and certainly could have introduced some bug or flaw that a more experienced eye would find/exploit. Consequently, the point of this article is not for you to clone my website, but to have a starting point for designing your own using my architectural choices.

Why Build a Website from Scratch?

In today's digital-centric world, there are numerous tools for building and hosting custom websites. These are designed to be no-code, providing a low-barrier of entry for anyone who wants to get a website up and running for their personal blog, shop, etc. They are also affordable, with many plans starting around $4 per month with support for CDNs and other performance features.

So why bother coding a website from scratch? Building it myself gives me full control over the application code, which is important for uncommon use-cases. No-code platforms are designed for popular website formats such as blogs and e-commerce. (Yes, I know what you are thinking... this website is a blog! Hold on, let me explain.) While website builders often provide support for custom elements / plugins, they may not provide enough flexibility to achieve what I am looking for. Running a lightweight neural network in the browser using ONNX runtime? Might be possible, but probably not.

Additionally, I wanted to learn more about web technologies (React, Gatsby) and how to provision AWS cloud services. What is the best way to design a website? How should I go about hosting it? How can I increase performance (availability, low latency, etc.) while keeping hosting costs low? What goes into SEO and how can I track performance metrics to understand web traffic?

Static Site Generation

Earlier I mentioned that I decided upon static site generation to power my website. What is it and why did I make this choice? Static site generation (SSG) means that the website code is built once, then uploaded to the hosting platform. Each request to one of your website's URLs returns the same content regardless of who is requesting it. The requests are not modified or processed by a "server", which determines the response dynamically.

On the other hand, server side rendering uses a dedicated server to handle incoming requests and build the appropriate content. This allows you to use dynamic personalization, authenticated zones, and run proprietary code/models without exposing them to the user.

The major drawback of server side rendering is that it requires a server (obviously). Practically, this means that a single linux machine on your cloud provider's platform will be responsible for handling requests, running logic, and returning an HTTP response. If your website starts receiving requests faster than your server can process them, you will experience a performance degradation. This can be mitigated by rolling out multiple copies of the server and using a load balancer to distribute requests evenly across each instance. However, you will soon run into a few issues:

  • Synchronization across server instances. It is not guaranteed that all requests by the same user session will be routed to the same server. If your server treats user sessions as stateful, you will need to share that information across all instances. (Using a caching solution such as AWS ElastiCache).
  • Resource Management. As the size of your cloud cluster grows, it will become increasingly difficult to manage your servers, deploying software updates to them, and controlling networking to prevent security leaks.
  • Cost. Lastly, using many servers and a load balancer will start to rack up the bill. Before settling on my current architecture, I tried out AWS Elastic Beanstalk to host my website using ASP.NET Core as the backend. I quickly discovered that my bill could easily reach >$30/month - chunk change for a business but not so much for a hobbyist.

By using static site generation, I can host my website as static assets that are served to users by a system specifically designed for this purpose. This approach is "serverless" because I am not provisioning a Linux instance and installing software on it. Let's dig more into the cloud architecture on the next page.