unux admin centre

Running a static website from an AWS S3 Bucket

Hundreds of people have been writing, emailing, tweeting and sending me messages via carrier pigeon asking me when the next blog will be coming out. Yes, I know there’s been a bit if a gap. Truth is that I’ve been suffering from writers block. It can happen to the most gifted of us. What has brought on this calamitous situation you may ask. It’s stress, stress that my blog isn’t professional enough looking. I’ve been looking at other tech blogs (mistake) and noticed that they’re full of lovely informative screen prints. That’s what I should be aiming for, I was thinking. However, it’s really tedious  capturing screen prints, making sure the graphic is suitable for web publication, etc, etc, so I’ve been procrastinating and delaying. Fortunately I’ve some to my senses and remembered why I started this web site in the first place. It was so I had access to useful procedures and information that would help me in my day to day job. I was happy to share this in case other sysadmins found it useful but essentially I did it for me. So apologies for the unprofessional look of this blog but I’m doing it my way 🙂

So to the subject in had (my SEO software tells me I should have mentioned this in the first line but I laugh in the face of SEO – which is why no one reads these blogs) and first off, let me say there’s a perfectly good tutorial from Amazon here . I would humbly suggest that this can be improved on which I’ll cover later. But I’m getting ahead of myself. Until fairly recently I thought S3 was just for storing files. Then I discovered you actually host static web sites in S3. In case you’re not sure, static means that there’s no server side scripting like PHP, etc. Why would you want to host a web site in S3? I’m glad you asked. the main reason is price. You can conceivably run it for free. With AWS free tier you get 5 GB of Amazon S3 standard storage, 20,000 Get Requests, 2,000 Put Requests, and 15GB of data transfer out each month for one year. Websites don’t usually occupy much space and if it isn’t too popular, you can remain in the free tier. Even, if you do exceed that amount, it’s $0.004 per 10,000 requests . This type of website would suit many local businesses. For example, your local window cleaner puts a card through your door. There’s not much space on a card but it can refer to a simple web site that has more details and could clinch your business.

My soul searching into the root of my procrastination left me in a nostalgic mood. Thinking back about the early days of this site made me think that it may be fun to host a 2002 version of this website as an example of a S3 hosted website. Back then I had a consultancy called Intronet Computers and in fact an even earlier version of the website is amazingly still mirrored arizonaed. So using my ancient web site as an example, here’s what you need to do to set up a static website in S3. I already had a domain registered, anthonyjdavis.me that’ll I’ll use in the example (I was going to do one of those self promotional web sites but couldn’t be arsed)

Log in to the AWS console and go to S3. You’ll need to create 3 buckets. For me they’re called anthonyjdavis.me, www.anthonyjdavis.me and logs.anthonyjdavis.me.To do this you just click on the create bucket button and complete the bucket name and region fields.

S3 create bucket
There, I said no screen prints but here’s a screen print!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Next, you need to upload your web pages. NOTE, I have put all my image files into a separate directory, images for reasons I’ll explain later.

S3 upload

 

 

 

 

 

 

 

 

 

 

 

 

Now you need to set the bucket policy so it is publicly accessible, select the bucket > properties >permissions and select Edit bucket policy

setting S3 bucket policy

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The content is now set up, we need to move on to configuring the buckets as a web site. Whilst still in the bucket policies, select Static Website Hosting, select the Enable website hosting button and enter the name of the index document in the box, index.html in my case. An endpoint will be displayed. Putting this in a browser should take you to your website if everything has gone well so far

S3 bucket endpoint
endpoint showing index.html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

For the www,anthonyjdavis,me bucket I also needed to select the Redirect all requests to another host name and enter the endpoint of the first S3 bucket. We’re now approaching the final endpoint, we need to set up AWS DNS, Route 53.So select Route 53 on your AWS console and select Create Hosted Zone

 

Roue 53 set up

 

 

 

 

 

 

 

 

 

As you can see from above, AWS name servers get assigned and the ALIAS type is used to map anthonyjdavis.me to the S3 endpoint. It is important to use the ALIAS type for 2 reasons. One is that only ALIAS can point to the domain top level, the apex as it’s know, i.e. anthonyjdavis.me . Also aliases are free 🙂 From the screen shot above I am creating an ALIAS record for www.anthonyjdavis.me, the Name is www and the S3 endpoint automatically appears in the Alias target drop down.

Once DNS is set up, your finished. However, there is one final (optional) step you can implement if you use a lot of images on your website. You can set up a CloudFront distribution. CloudFront will help accelerate the loading of images by using CDNs distributed all over the globe. The end user will therefore be accessing the images from a local server rather than potentially a distant location. To create a CloudFront distribution, select Create Distribution and on the Web section click Get Started. On the Create Distribution page, select your S3 bucket for the Origin Domain Name, for the Origin Path but images for the images directory, Restrict Bucket Access select yes. The Default Cache Behaviour settings are usually fine, then you can set the Distribution Settings according to your requirements.

And that’s it, your website is up and running.

 

 


Leave a Reply