In this post I will share a few tools and technologies that I am using to run a couple of blazing fast websites using latest modern tools and technologies. The caveat here is that I don’t pay any infrastructure/hosting costs for any of these websites and they can scale infinitely in terms of supported users because they are static websites created from dynamic content hosted on a CDN. The websites that I am going to talk about are:
Let’s talk about the first one, this is my personal website showcasing my skills, resume and training offerings. The technologies used here are:
Few names listed above are obvious but I am sure you must have been surprised to see Github in the list because Github is like a fundamental tool which is de-facto for version control. Here I am not using Github for version control per-se (although it is an added benefit). I use Github to store JSON documents for the website. Yes all the content on this website is dynamic thanks to Github. The way it works is simple: I have a react application that get’s compiled by WebPack, I dump it in an AWS S3 bucket which has static website hosting enabled. This S3 bucket is linked to an AWS CloudFront CDN distribution which gives me a url like xxxx.cloudfront.net which I have added as a CNAME to www in my DNS settings on GoDaddy. I have also setup a forwarding rule on my domain to redirect all traffic to HTTPS (thanks to free SSL certificate that Amazon provides for each cloud front CDN – you can request an SSL certificate for your custom domain as well!).
On every update to the code I need to build the static website, dump it in AWS S3 bucket and invalidate the AWS CloudFront Edge Cache. Doing these steps can be quite boring so I have written a simple script to clean, build and publish the artifacts to a local folder, then another script takes over the control, downloads the current version from AWS S3 bucket using AWS CLI and dumps in a versioned folder in the code repository (I know you would say that I should have used Git tags but if you see the stuff downloaded is not code but currently deployed artifacts from S3 so in order for me to rollback I just need to redeploy these rather than checking out the tag and building it again). Now the next step is to deploy the current build artifacts and again I use AWS CLI to push file to S3 Bucket. Once the upload is done the script then uses the AWS CLI to invalidate the AWS CloudFront cache. In the end the script just bumps the version of the application in a local JSON file in root of the repository. This might sound like a lot but this as simple as doing ‘yarn deploy:production‘. Checkout my website here.
The second website is a bit complex, it’s a full featured blog. The tools used with this one are:
- React and React Router
- GatsbyJs
- Ghost Headless CMS
- MySQL
- NGINX
- LetsEncrypt
- AWS Lightsail Ubuntu 18.04 LTS VM
- AWS S3
- AWS CloudFront
- AWS Certificate Manager
I will describe the setup of this one in the next post. Let me know what I could have done better while using these tools, remember to keep in mind my objective – build great websites with paying a single penny for infrastructure.
* Cover Photo by Lachlan Donald on Unsplash*
Leave a Reply