This is the 2nd in series of blog posts about this website and technologies I used to build and host it.
In the previous post, I described what I used to create this site and theme. This one will describe the hosting.
I wanted a minimal maintenance solution, but with maximum performance. VPS is out of the question because I don’t want to manage the server and think about scaling. Also, CDN is mandatory.
Possible solutions:
- Github pages
- Heroku
- S3
After some searching, I noticed that people are very happy with their static sites deployed at Amazon S3 with CloudFront CDN, so I decided to go with that one. Also, I’m thinking to integrate some dynamic functionalities like contact form and a list of the most popular posts, and I would like to use Amazon Lambda for that.
I avoided AWS because it seems very confusing. With a large list of services (there are like five of them just for file hosting), most of them using an abbreviation, and a long description made me wanna go back to DigitalOcean because of the simplicity and excellent configuration articles.
It looks like they know why I’m there. I landed at Quick Start Page, which helped me a lot, but still had to do some searching because CloudFront didn’t serve my index.html file from subdirectories. This response helped me resolve the issue.
I used a great plugin for Hexo deployment - hexo-deployer-s3-cloudfront. Note that you would have to set aws_key and aws_secret in the .yml file. I tried with environment variables, but after checking the plugin code, I noticed that those values have to be set in configuration file.
That’s it - I got my website deployed to S3 with CloudFront.
But wait! It’s not looking good. My TTFB is more than 200 ms which is not acceptable when you use CDN.
I noticed X-Cache: RefreshHit from cloudfront meaning that it had to contact S3 to check if files are changed. X-Cache: Hit from cloudfront means it’s working as it should.
The problem was that TTL (Time to live) times were not set. My Cache-Control header was not used by CloudFront, only by the browser. This can be changed in CloudFront Distributions “Behaviors” tab.
Testing it on my 3-year-old laptop, I got around 200 ms for the first frame which is a great result, without browser cache, all files getting from CDN.
With regular 3g network throttling, the result is around 700 ms. If the browser cache is used, it gets down to 200 ms.
Throttling the CPU to 10x slower with browser cache used it’s around 350 ms, 20x slower it gets to 400 ms.
Isn’t that fast? And my files are not even minimized and gzipped.
Stay tuned to read more about performance and serverless architecture of this blog.
There will be more posts about Web application design, performance, and best practices.
Note that the post title about this blog site will always start with “Commit:”.