DEV Community

Setting Up a Static Website on AWS S3 for Newbies

Hiroko Nishimura on February 25, 2019

Originally published at AWS Newbies. Here, we’ll set up a static website (think HTML and CSS and no moving parts) hosted on Amazon Web Servic...
Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

Redirect with a second S3 bucket instead of second CloudFront distribution

May I suggest instead of creating two CloudFront distributions to create an S3 bucket for the naked domain and then apply redirect to www. I have not noticed at scale any performance difference taking the two bucket approach instead of having two distributions in regards to users from other continent accessing our website. I had suspected that CloudFront Distribution on naked domain would be faster but was surprised to find no difference.

Wildcard your domain

Amazon Certification Manager (ACM) supports wildcards domains. As websites grow you'll want more subdomains under SSL and you can save yourself some labour by creating a wildcard to begin with eg. eg. *.exampro instead of exampro.co

Force Traffic through CloudFront

When you have static website host AWS gives you a url to access that website directly to that bucket without the need of CloudFront. I recommend you do not allow access through these urls and force access only through CloudFront. The reason is you have better control over traffic and visibility on what people are accessing and the power in CloudFront to deny access to things you don't want people to have such as restricting based on GeoLocation.

To restrict access you need to create an Origin in CloudFront.

Collapse
 
arswaw profile image
Arswaw

Great article!

Collapse
 
hiro profile image
Hiroko Nishimura

Thank you, Arswaw! :)

Collapse
 
kaushik853 profile image
kaushik pal

my html page is not displaying the image. what can be the issue, do you have a sample template of html to display images?

Collapse
 
hiro profile image
Hiroko Nishimura

Hey Kaushik, Do you mean a sample code to put in an image?
You can try <img src="image.jpg(use full URL)"> !