The live version is available at rushan.pelagicworld.com.
The static files for the live version are all stored on Amazon S3. I'm caching these files close to end-users by using Cloudflare as a CDN.
This speeds up load times dramatically since the Amazon S3 bucket is in the AWS Region Asia Pacific (Tokyo) but most readers of this website are based far away in either Singapore or New York City.
Access to your object store should be limited to your CDN, and for read operations only.
AWS has a guide for this in their S3 documentation. This will involve adding the full list of Cloudflare IP addresses to the S3 Bucket Policy section.
Make sure your origin server sends an informative Cache-Control header over to your CDN in HTTP responses.
Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
If you plan to evict the CDN cache manually, you can get away with setting a long max-age.
In your Cloudflare dashboard, click on your website, go to its Rules section, and create a new Page Rule.
- Set Cache Level to Cache Everything
- Set Edge Cache TTL to a month
In theory, setting a large Edge Cache TTL should prevent Cloudflare from evicting the static files from its edge caches even for websites with low traffic.
Make sure that your origin server returns the correct Content-Type headers, especially for HTML files.
If the header is absent, client browsers might not render the HTML file,
and instead treat it as a file download if it lacks a .html file extension.
Content-Type: text/html
It appears that content download times are under 50 ms for most pages, and they are not a significant component of overall load times. The predominant components of the load times involve connection setup, roundtrips to the CDN, and roundtrips to the origin server on cache misses.
Google Chrome has removed support for HTTP/2 Server Push, so it's not quite worth the implementation complexity.
There isn't a linear user journey through the website so it's not viable to determine how and when to prefetch resources other than CSS and fonts.
Clone the repository and navigate into the project directory. Next, install Jekyll.
brew install ruby
gem install --user-install bundler jekyll
gem install --user-install webrick
Jekyll comes with a local development server that supports auto reloading.
jekyll serve
View the website at localhost:4000 in your browser.
- Open
_data/links.yml. - Add a new
titleline. - Add a new
urlline.
- Create a
_projectsfolder if it does not already exist. - Create a folder within it with the same name as the year of your new post.
- For instance,
2021.
- For instance,
- Add a new Markdown file for your Project post.
- Markdown files have
.mdas their file extension. - This file should be named with
kebab-case. - The filename will also be the URL endpoint of the post, sans the
.mdfile extension.
- Markdown files have
- Use the following template and add your content in Markdown below the header block.
---
layout: skeleton
title: Digital spaces
subtitle: 09 August 2020
thumbnail: "/assets/images/rectangular-tiles.png"
---
# Contents of your post
Write the contents of your post in Markdown.
- Create a
_blogfolder if it does not already exist. - Create a folder within it with the same name as the year of your new post.
- For instance,
2021.
- For instance,
- Add a new Markdown file for your Blog post.
- Markdown files have
.mdas their file extension. - This file should be named with
kebab-case. - The filename will also be the URL endpoint of the post, sans the
.mdfile extension.
- Markdown files have
- Use the following template and add your content in Markdown below the header block.
---
layout: skeleton
title: Digital spaces
subtitle: 09 August 2020
---
# Contents of your post
Write the contents of your post in Markdown.
