Posted on

How to host a static website on Amazon

Amazon Web Services offer for developers hundreds different solutions, among them affordable storage for static web pages. Prices are really low and with good reliability this is great option for small websites owners who want to display static pages. In today’s tutorial I will show you how you can quickly use Amazon S3 storage to host your website. If you have a dynamic website that use a database and CMS it is also possible to use AWS however this tutorial is for hosting a static page.

If you want to host WordPress website on Amazon, please check my new tutorial: How to host WordPress website on Amazon EC2.

Before you start you need to open an account, you can quickly do it here: Amazon Web Services. Also, if you want to have a specific website address you need to register domain name. It is possible not to have a domain name registered but the website address will not look great. It could be for instance mywebsite.s3-website.eu-west-2.amazonaws.com, I think you will agree that is is not perfect. So if you prefer to have www.mywebsite.com register it somewhere.

OK, once you have done these two or one thing, log into your AWS and and click on the S3 link under the “Storage area”. You should see something like this:

S3 storage bucket

You will have to create a bucket which is a folder for your data, in this case the website. I will use S3 for hosting my website www.pasywnydochod.pl , a domain name that I bought some time ago and do not use at the moment and that could be used as an example. Click on the Create bucket button and put your domain name with www as the Bucket name (in my case it is “www.pasywnydochod.pl”). You can also select a specific Region of the bucket (the prices vary depending on the location and you can check S3 Region pricing first). Since I live in the UK, I have chosen EU (London).

Create bucket

Then click on Next button a few times ignoring all the information. The bucket should be created, click on it and you should see this page:

Inside bucket

Now choose the Permissions tab and choose Bucket policy. we need to change permissions of this bucket so the website will be visible to outside users. Copy and paste this code:

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

Of course, you need to replace example-bucket with the name of your bucket which is you domain name together with www. Once you have done so, save the change. A warning “A bucket has public access” should appear:

Change bucket access

In S3 you can store many different data types and we need to change settings and change the data type. In the menu at the top, click on the Properties and then on Static website hosting. Mark that you will be hosting your website and type the name of the index document. The standard one is index.html and I used this one (you still need to type it there). You can also type the file name of the error page but this is optional and I have not done so.

Change data type to Static website hosting

One more thing, at the top you will get the information of your website address. I have copied it, opened a incognito tab in my web browser, pasted it there and hit Enter. We have the bucket but it is empty therefore at the moment my website looks like that:

Empty website

Everything is prepared for uploading websites files. Since this is just the example I have created in Notepad a simple html index file with Hello world heading. Of course you can upload something more sophisticated with CSS files and images. Remember that the main file needs to have the name you have chosen and also use relative URL addresses withing the file structure.

To upload from your computer to the bucket, go to Overview tab and click Upload bucket. Point to the files in you computer and upload them. Your uploaded files should be visible in the bucket. If needed you can delete, change them or upload new ones in the future.

I think it is good idea to refresh your page from the incognito tab. If everything went well, the browser should display index page of your website. In my case it is not very impressive but it works:

Hello world

We are almost there, the only change we need to to is to display the proper website address. Head to the company you bought your domain from, log on and go to the DNS setting area of the domain. You need to add CNAME record to link alias www of your domain to the website hosted at S3.

For this purpose I use called After Market but when you log on it should be pretty much the same with your company. Once you click on add CNAME Record you should see three things: Host, Type (or Entry type) and Address (or data, it is sometimes Points to). In the host area you put: www, in the type: CNAME and in the Address: the whole website address on the Amazon server but without http:// . In my case it is: www.pasywnydochod.pl.s3-website.eu-west-2.amazonaws.com . You can copy it from the tab you should have it opened in incognito window. If you closed it, you can also access it by going back to the bucket, clicking on the bucket name, properties and Static website hosting (bucket/bucket name/properties/Static website hosting). It should be displayed at the top, copy it but as I said you should not put http:// at the beginning.

Add CNAME record

Save the record. It is not going to work straight away, you need to wait a couple of hours before this change will come into effect. After a few hours, type your proper website address into the browser and you website should be displayed. In my case it worked one hour later and my website now looks like (see the website address):

Look of final website

That is all this time, I hope you have found this interesting. I personally think that S3 is a nice, affordable solutions for websites owners and I will probably use it for some of my websites soon. However most sites on the net are dynamic nowadays so I need to figure out how to host a dynamic content. I will let you know about it in one of future tutorials. Stay tuned 🙂

2 thoughts on “How to host a static website on Amazon

  1. Thanks for sharing. Just enjoy reading your tips!

  2. Thank you Avian, I am happy you found something useful here 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen + 16 =