Hosting a Website on AWS S3 with a Custom Domain
With all the different website hosting technologies, it has become non-trivial to choose which to use, especially for simple projects like marketing or “coming soon” page. As a software developer (not necessarily web developer), I found myself always using big, heavy frameworks such as rails and angular to build simple static content websites.
Usually, my goal is to do the following:
- Find a free bootstrap template I like online
- Replace pictures and content with relevant content
- Deploy my website on my domain
Recently, I discovered a streamlined way to achieve this goal without involving clunky frameworks. It turns out that the S3 service on AWS has a super simple website hosting feature. It is just one click, and it turns your bucket (file system) into a web server. The best part is that it is incredibly cheap. Check out the pricing details for S3 here.
This post will guide you through how to get a bootstrap template hosted on AWS S3 with a custom domain. After deploying the project, you can then edit the content and watch your changes appear on your website.
Prerequisites:
- AWS Account
- Domain (I bought mine on GoDaddy)
Walkthrough:
The first step is to download the example template from here and unzip it.
Open the index.html file in the browser. This page is going to be what gets hosted on AWS. Notice the file path in the URL bar is pointing to a local file.
Next, Create an S3 bucket on AWS. It is critical that the name of the bucket is the same as your custom domain. For example, if my custom domain is avaiso.com, I must name my bucket www.avaiso.com. I will use seans-greyscale-example as my bucket for this part of the post. I will revisit the avaiso example later in the custom domain section.
Click the upload button and upload the template to the bucket.
Now that the template is in the bucket, you have to enable the web serving feature. In the properties tab of the bucket, click the Static webpage hosting link. Select Use this bucket to host a website and provide index.html as the index document. Take note of the endpoint, which is the URL S3 creates for the site.
Click the endpoint or go to that URL the template should now be accessible.
For the custom domain part, I will switch to a website I built using this method. The domain is avaiso.com, and the bucket is named www.avaiso.com. The S3 endpoint is http://www.avaiso.com.s3-website-us-west-2.amazonaws.com.
I purchased this domain through GoDaddy, but the domain provider shouldn’t matter. I typically buy domains from GoDaddy solely because I have used GoDaddy for previous projects, and I haven’t had any issues. No matter where you buy it from, all you need to do is make your domain point to the bucket.
Once that is complete, I should see my website at www.avaiso.com. It is possible for this to take some time. It usually seems to work within an hour, but if it isn’t working after 24 hours, I would try and figure out what is going wrong.
Once the website is up and everything is connected, now it is time to personalize. Edit the index.html file and upload it to the bucket. Make sure to make read access public on index.html every time you upload it. One thing to note is that S3 charges for “putting” files into the S3 bucket so try and only upload files that have changed and not the entire template over and over.
In conclusion, AWS S3 makes it affordable and simple to host websites, especially if the site doesn’t need a backend. Hopefully, this guide helps get your website up and running!
