AWS S3 Static Hosting Doesnt load some files such as Styles.css

hi Ryan,

This is tricky, however, the verbose curl shows lines:- "server: AmazonS3 < x-cache: Miss from cloudfront < via: 1.1 a46f7dcdfa7630ab92712a32ece3853c.cloudfront.net (CloudFront)" This output shows the site is behind CloudFront.

Please verify your CF distribution setting.

so, even CF is involve, still the issue is one file, styles.css?

curl -v https://thecertjourney.com/assets/css/style.css

shows it is accessible.

it might have resolved by now, Let me know if the TTL fixed it!

Best,

Hi,

sorry, I was not very clear in my answer. Please ignore my *html *ambiguous response. :-)

can you confirm this for me?

in your S3 bucket name thecertjourney.com under Objects this is the file structure:->

indext.html

error.html (optional)

image.png

script.js

styles.css

also I noticed the access denied returns XML not HTML?

can you check this also for me?

as you mentioned A record is pointing to CF that is good.

can you share the screen shot for you distribution general tab, like i gave you here.

my understanding is you might be missing this alternate domain names.

Best,

Hello Thanks again for continuing to help.

Above is the bucket format. This is the default format that happens when you upload all the config files from Publii application to the bucket.

I think the XML error was given when I was testing other possibilities. It shouldnt give that anymore.

Here is the screenshot of the CF Distribution tab.

Hi Ryan,

files were generated and uploaded by Publii, the internal relative paths within the HTML certainly correct for a static website hosted from the root of a bucket.

However, when I checked HTML using browser DevTools, your html is still pointing to s3 website link instead of CloudFront distribution.

 <link rel="canonical" href="https://thecertjourney.com.s3-website.eu-west-2.amazonaws.com/">

need to replace s3 link to CF distribution link.

Core fix is replace S3 website endpoint → with CloudFront distribution endpoint.

I would suggest download these files index.html

about-me.html

aws-ccp.html

or any html file from s3 to local

and use editor and replace "https://thecertjourney.com.s3-website.eu-west-2.amazonaws.com/" TO https://d2dtgpocbwlxst.cloudfront.net/ save changes and upload again on S3 bucket. than invalidates CF with those files** or** all files /* to clear the cache. wait few minutes and check your website.

Note: (Before making changes, keep a backup of the old HTML files so you can restore them if needed.)

Let me know if it works.

Best,

Based on your description, there are several potential reasons why your CSS files aren't loading properly on your S3 static website:

1. Content-Type Metadata: Ensure that the Content-Type metadata for your CSS files is correctly set to "text/css". S3 doesn't always automatically assign the correct content type, which can cause browsers to misinterpret the files.

2. File Permissions: While you mentioned your bucket is public and has a policy allowing public read access, double-check that the individual CSS files themselves don't have conflicting permissions or ACLs that might override the bucket policy.

3. Case Sensitivity: S3 is case-sensitive with file names and paths. Verify that the references to your CSS files in your HTML exactly match the actual file names in your bucket, including capitalization.

4. Bucket Policy Configuration: Confirm your bucket policy includes the correct syntax to allow public read access. It should look similar to:

{
"Version": "2012-10-17",
"Statement": [{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": ["s3:GetObject"],
"Resource": ["arn:aws:s3:::your-bucket-name/*"]
}]
}

5. Block Public Access Settings: Verify that "Block Public Access" settings are disabled at both the account and bucket level.

6. Static Website Hosting Configuration: Make sure static website hosting is properly enabled in your bucket properties.

7. Browser Caching: Try clearing your browser cache or accessing the site in an incognito/private browsing window to ensure you're not seeing cached versions of your files.

8. Connection Reset Errors: The "ERR_CONNECTION_RESET" errors you're seeing could indicate network issues or server-side problems. This might be related to how your domain is configured to point to the S3 bucket.

Since you're getting connection reset errors rather than 403 or 404 errors, there might be an issue with how your domain is configured to connect to the S3 bucket. Double-check your DNS settings and make sure they're pointing to the correct S3 website endpoint for your region.
Sources
AWS S3 Bucket having issue with a CSS file updates | AWS re:Post
Rendering problem of the static website hosting | AWS re:Post
Images not loading on static website hosted on S3 | AWS re:Post
Use Amazon S3 website hosting to host without a single web server - Hosting Static Websites on AWS
Higgsfield AI Mod APK Premium Unlocked - S3 static site returning 403 Forbidden? | AWS re:Post