While trying to share some posts to some colleagues, I noticed earlier today that the sites tag page was displaying a garbled version of the homepage. Oddly enough, this error does not happen directly from S3, nor even from the Cloudfront domain. I chased down several rabbit holes on Stack Overflow (as you do).
Interestingly, the page rendered fine if I requested index.html directly, but not if I just requested the path and left index.html implicit. But again, it worked fine on S3 and the CloudFront domain. While I initially wondered if this was a CloudFront config issue, it dawned on me that the page is supposed to be rendered by some Chirpy javascript that interprets the path, and the only apparent difference (especially when using the CF domain) is in fact the domain name in the request.
This line in the Jekyll config for Chirpy defines the site’s URL and I had this set to https://j.eremy.nl as you might expect. I changed it to be an empty string and now the site works as intended.
Additionally, I had to configure CloudFront’s origin to be the website URL of the S3 bucket instead of the S3 content URL. It’s a subtle difference, but mattered in the end.
Here’s the cloudfront.tf diff:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
diff --git a/terraform/cloudfront.tf b/terraform/cloudfront.tf
index 4a36293..1ca7b41 100644
--- a/terraform/cloudfront.tf
+++ b/terraform/cloudfront.tf
@@ -1,7 +1,19 @@
resource "aws_cloudfront_distribution" "prod_distribution" {
origin {
- domain_name = "${var.host_name}.${var.domain_name}.s3.amazonaws.com"
+ domain_name = "${var.host_name}.${var.domain_name}.s3-website-us-east-1.amazonaws.com"
origin_id = "S3-${var.host_name}.${var.domain_name}"
+ custom_origin_config {
+ http_port = 80
+ https_port = 443
+ origin_keepalive_timeout = 5
+ origin_protocol_policy = "http-only"
+ origin_read_timeout = 30
+ origin_ssl_protocols = [
+ "TLSv1",
+ "TLSv1.1",
+ "TLSv1.2",
+ ]
+ }
}
aliases = ["${var.host_name}.${var.domain_name}"]
# By default, show index.html file