Building a personal website the *hard* way

In the past year, I've been lucky enough to work with a mix of cloud infrastructure, modern development processes and frameworks and security best practices associated with these technologies. I've been wanting to create a personal website using a combination these skills. My past attempts have always ended with using a platform like Squarespace where I wouldn't feel as satisfied because everything from design, to infrastructure and to security was already done for me.

As with all engineers... why do things the easy way when I can do it the *hard* way?

This post is a high-level breakdown of how I built brianl.me from start to finish.

Requirements

The first step of building something is requirements gathering - what do I actually want out of this?

Basic requirements

• As free as possible :)
• A simple landing page with info "about me" and a list of my projects.
• A page for details of each project, which might include text, images and external links.
• A single-page experience for visitors / no need to reload pages.
• Secure.
• Analytics.

Advanced requirements (for the future)

• Hosting internal services.
• Endpoints that would allow me to talk to internal services.

Design

Next, is to plan the design/architecture details of the website.

Storage

Read: Support up to ~1,000 visitors per month.

• Since I'm looking to serve only static pages, Amazon S3 is the best choice for storage.

Write: There are no features that will support writes (this might change with advanced requirements).

Compute

No computation needs to be performed (this might change with advanced requirements).

Network

I want to keep my network design simple. It's just a personal website. I'm not expecting surges in traffic and no one will miss it while its offline.

My choice is to use Route 53 for registering my domain name and hosting records. Cloudflare to provide me with CDN services.

• 1 x availability zone / region - Sydney, Australia. I expect most of my viewers to come from there and would stick with this region unless data tells me otherwise.
• Load balancing - no.
• Caching - yes. People should expect super fast speeds for such a small website.
• Denial of service protection - yes. Cloudflare provides this for free.
• Web Application Firewall - no. Sadly this isn't a free feature in Cloudflare and since its just a static site with no features, I'm not willing to pay for it.

Security

HTTPS

• An SSL Certificate.
• Re-direct all HTTP requests to HTTPS - so users can't force the site to load under HTTP.
• Turn on HTTP Strict Transport Security (HSTS) - works the same way as re-directing users from HTTP to HTTPS.
• Automatic HTTPS re-writes - re-writes all URL's using HTTP in my website to HTTPS.

AWS hardening.

• Non-root IAM user for managing S3 - least privileges. The user shouldn't have permissions to services that it doesn't need, like making changes to IAM users and roles.
• S3 bucket configuration - public read-only access to my website bucket. Disable public access to all other buckets e.g. logging.
• S3 server access logging - turn on logging for all requests made to my website bucket, so I have an audit trail.
• S3 bucket public read/write compliance - This feature, provided by AWS Config, evaluates all buckets in my account and tells me which have public read/write permissions turned on. It will re-evaluate access each time a configuration change is made to a bucket, allowing me to keep track of buckets which have accidentally been exposed to the public and to close the security hole. This blog post has steps on how to turn on S3 bucket evaluation: https://aws.amazon.com/premiumsupport/knowledge-center/flag-buckets-aws-config/.
• S3 server-side encryption - enable server-side encryption for my private buckets, so even if someone gains access to them, they would need a key to decrypt and read its contents.

Vulnerability scanning

• Web-application security scans - not at the moment because its just a basic static website.
• Static code analysis - not at the moment, since I don't know of any free and lightweight tools which I could integrate into my build pipeline. As an alternative, I could use tools to perform pre-commit checks for security issues such as committing secrets.
• Third-party dependency scans - yes. Npm provides a great tool, npm audit which will check your node modules for security vulnerabilities and even update the module if an issue is detected. It runs automatically on every npm install.
• Infrastructure security scans - no. All my content is hosted on S3. This will change with advanced requirements, where I'll need to have a server to host internal services.

Future security to think about (advanced requirements)

• Authentication - only I should be able to access internal services.
• Zone / URL lockdown to my home IP - internal services will only be accessible via. specific IP addresses.
• Web Application Firewall - I want to block people trying to attack my internal services.

Analytics

Google Analytics. But I might remove this and stick with Cloudflare since I only care about basic metrics.

Developing the User Interface

I'm not a frontend expert, but have been looking forward to building a React app. With the help of Facebook's magic, I can start my own React app with a single command.

To give my website a seamless, single-page app experience, I decide to use React-Router for routing users across the site. This is simple to set up and only requires me to install the package via. npm. This great article goes over how React-Router works and how to use it in a React app.

With React-Router set up, all I need to do is to make a few design and content changes until the site looks somewhat presentable.

This is the code that the site is currently running on: https://gitlab.com/brianlam38/brian-website.

Continuous Integration / Continuous Deployment (CICD)

Being able to magically push code from my terminal, automatically build and deploy to S3 is great. For this to happen, I need to choose a CI/CD solution.

At first, I leaned towards using Atlassian's Bitbucket Pipelines since its what I'm familiar with and what I use for work. But I quickly ran out of "build minutes" which is capped at 50 mins / month (it was kind of my fault though, the deploy script was taking forever to run and I should have timed it out earlier).

Since I had to pay $$$ to continue deploying my project, I decided to find another solution. That solution was Gitlab. Gitlab is great because it provides up to 2000 mins / month (that's 400x more than Bitbucket...). Even if I run out, it only costs an additional $4 per month as opposed to $10 for Bitbucket.

I used this great blog post as a guide on how to automate my deployment process on Gitlab.

D.I.Y approach vs managed service?

So was this project worth it in the end? Lets do a price comparison between my DIY approach with a managed service like Squarespace.

Squarespace

• Subscription: $16 per month (yearly) or $22 month to month

DIY

• Domain name registration: $17 per year / ~$1.42 per month

• AWS Route 53 Hosted Zone: $0.50 forever

• AWS Simple Storage Service: $0.30 to set up my basic site.

• AWS Config Rules: $2 (S3-public-read) + $2 (S3-public-write).

Total cost for Squarespace: $16 to $22 per month.

Total cost for my DIY approach: ~$5.42 per month + one-off cost of $0.50

To be fair, it took me a good ~5 hours to set everything up, which was mostly spent on debugging the React app and tweaking the design and content of the website. All the infrastructure took barely 30 minutes to set up, thanks to AWS. A service-provider like Squarespace would have great themes for you to choose from already, so you wouldn't have to spend hours on Google learning how to bend JSX and CSS to your will.

Feel free to send me a message if you're interested in learning more about what I did :)

FYI I'm not affiliated with Amazon, Cloudflare or Gitlab.