Hosting a static website on AWS S3 (AWS part 1)

s3

Excited from my recent AWS certification training. I made the bold decision to move my blog, website and domain from my current hosting provider to Amazon We Services. Doing so will allow me to be my own hosting provider and have complete control.

Like everything this requires proper planning and a process. The first thing I decided to move over was my IOT Mirror project. A static website is when nothing dynamic is happening on the server side. All the server does is host the files. The dynamic stuff happens client side through html, css and javascript. My IOT Mirror web page is a static website. The dynamic weather stuff happens on the client side.

From my training and day to day work I know AWS S3 is the best choice to replace the hosting for the IOT Mirror Project. AWS is very intuitive and user friendly. It took me less than 5 mins to move over my IOT Mirror Website. I am not going to go through how to create a free AWS account as it is super simple. I am just going to go through the steps I took to move the IOT Mirror project.

The first step was getting all my static website files off my old hosting. Use your ftp account associated with your hosting to copy across all the files. In my case I used the free program Filezilla to ftp into my hosting and copy across my IOT Mirror files into a folder on my local pc.

The second more fun step was setting it up on AWS.

Instructions:

  1. Login into AWS management console
  2. Click services
  3. Looked for the category Storage
  4. Click on S3
  5. Click Create Bucket
  6. Enter in a name for you bucket (In my case myiotmirror)
  7. Select your local region (In my case Sydney)
  8. Click Create
  9. Click on your newly created bucket
  10. Click Upload
  11. Upload all your files (In my case I didn’t have any folders, if you have folders you will have to create them)
  12. Wait for you files to copy across
  13. Double check all your files are there and folder structure is the same
  14. Click on the properties tab
  15. Click static website hosting
  16. Tick “Use this bucket to host a website”
  17. For the Index document, type in the name of html file that I your landing page ( In my case Mirror.html
  18. You have the option to type in an error.html page. This is really cool because it allows you to create a super simple 404 page.
  19. The endpoint up the top is how people get to you website ( http://bucketname.s3-website-ap-southeast-2.amazonaws.com)
  20. Click Save
  21. Now if you try to go to the endpoint you will get an access denied message
  22. Go back to your bucket
  23. Click Permissions
  24. Click Bucket Policy
  25. Copy and paste the below policy

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “*”
},
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::bucketname/*”
}
]
}

The above policy is an allow. Principal is * meaning everyone. Action is Get object which allows everyone to read from the bucket. Lastly the resource is simply the bucket this policy applies to. Remember to change bucketname with your bucket name or it will throw an error.

  1. Click Save
  2. Go to that endpoint in your browser

Congratulations you have just host a simple static website on aws.

Now my mirror project is just a website for my mirror to access so I don’t care about the url.

But you can take it a step further and replace the endpoint with your domain name. To do this go to route 53 and purchase the domain name you want (In another tutorial I bought lloydmcallister.io). Important use all the default settings and allow Route 53 to setup all the DNS information.

While you wait 24 hours setup you bucket. Do the same steps as above except when naming you bucket name it exactly the same as your domain. (In my case my bucket was called lloydmcallister.io)

When you receive the notification your domain is ready and you have a bucket with the exact same name setup you can proceed with the next step.

  1. Go to route 53
  2. Click hosted zones
  3. Click on your Domain Name
  4. Click Create Record Set
  5. Select yes for alias option
  6. Click on the alias target box and select the aws S3 bucket you created
  7. Click Create

Congratulations you took it a step further and have you domain as the URL.

 

 

Leave a Reply

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