Setting Up a Static Website Using AWS

Exordium
In this post, we’ll go through the steps of setting up a static website using AWS. There are a lot of different services within this platform, but we will be focusing on Amazon Route 53 and Amazon S3. You can create an AWS account by heading over to their portal: https://portal.aws.amazon.com/billing/signup#/start.
As mentioned, we will be using Amazon Route 53 and Amazon S3. Route 53 is what you’ll use to purchase and register domain names, as well as where you’ll establish where you want to route internet traffic for your domain. In my case, the domain I registered was rnsftwre.com.
Amazon S3 is used for web hosting. This is where you’ll create ‘buckets.’ Buckets are where you will upload the files for the website. In this example, we will be uploading the classic index.html file as a basic webpage.
First Off, Register a Domain Name
The first thing that you’re going to want to do is register a domain name with Route 53.
1 — To do this, you can access the Route 53 console here: https://console.aws.amazon.com/route53/.
2 — If you’re brand new two Route 53, as I was, look for ‘Domain Registration’ and click ‘Get Started Now.’
3 — Here, you’ll enter the domain name that you want to register. You can click the ‘Check’ box to make sure that this name isn’t already taken. If it’s not already in use, you can then add the domain to your cart. Most domains are listed for $12.

4 — After you add it to your cart, click ‘Continue’ and follow the rest of the registration process. You can view Amazon’s official doc for Route 53 domain registration here: https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html.
Now, Create Two Buckets
Amazon recommends setting up two buckets in order to support requests from both the root domain as well as the subdomain. This is done through their S3 service — not Route 53. In this example, the root domain is rnsftwre.com, and the subdomain is www.rnsftwre.com. Configuring the subdomain is optional, but it is advantageous as it ensures visitors are routed to your main website if they typed in the subdomain and hit ‘enter.’
To create S3 buckets and configure them for hosting, follow the below instructions.
1 — Sign in to the Amazon S3 console: https://console.aws.amazon.com/s3/
2 — Create a bucket by clicking ‘Create Bucket.’

3 — Enter the bucket name (use the root domain for the first bucket), and go through the configuration set up. During this setup, you can leave everything ‘as is’ unless there’s a specific configuration you need for the bucket.
NOTE: If you want the content of the bucket to be public — i.e., if you want the website to be seen by the public — then during Step 3 of the Create Bucket process, you will want to uncheck ‘Block all public access.’ Amazon makes this looks scary, which it could be under certain circumstances, but it’s generally okay to do this. Again, without doing this — the contents of your website will note be public; therefore, the website itself will not be public.

4 — Repeat this, but use the subdomain as the name for the bucket.
Now that we’ve created the buckets, the next step is to configure the root domain for website hosting.
Configure the Root
1 — Within the Amazon S3 console, select the bucket that you want to use for your static site.
2 — Choose ‘Properties’ -> ‘Static website hosting’ and then ‘Use this bucket to host a website.’
3 — Enter the name of your index document — this is usually index.html.

4 — Under ‘Static website hosting,’ note the endpoint. Don’t worry, you’ll be able to access this if needed in the future.
5 — Select ‘Save.’
The next thing you’ll want to do is configure your subdomain bucket, so it redirects website traffic to your root domain.
Configure the Sub
1 — Within the Amazon S3 console, select the bucket that you intend to use for the subdomain. In this case, it’s the bucket named www.rnsftwre.com.

2 — Choose ‘Properties’ -> ‘Static website hosting’ and then select ‘Redirect requests’.
3 — In the ‘Target bucket or domain’ box, enter your root domain name (rnsftwre.com).
4 — In the protocol box, enter http and then select ‘Save.’
The next step is to upload your index document and website content to the root domain bucket.
Upload Index & Site Content
In order to display a public site, you must upload the code and content of that site. Remember — we are aiming to host a static website, so you’ll need to upload an HTML file as the index document in the bucket. The HTML file must match the ‘Index document’ name that you entered in ‘Static website hosting’ for the bucket.
1 — Create an index.html file.
2 — Save the index file locally and make sure it matches ‘Index document’ name that you entered in the ‘Static website hosting’ option of the bucket.
3 — If you’re not already signed in to AWS, do so and head over to the S3 console.
4 — Select the bucket that you want to use to host the static website.
5 — To upload content your bucket, you can drag and drop the index file into the bucket, or you can select ‘Upload’ and follow the prompts to upload files.
For step-by-step instructions on uploading website content in S3, see Amazon’s documentation: .
Though you’ve set ‘Block all public access’ to Off — you will need to add a bucket policy to grant public read access to the bucket.
Attach a Policy
1 — Select the bucket of the root domain.
2 — Select ‘Permissions’ -> ‘Bucket Policy.’
3 — To grant public read access for your site, you can copy and paste the following bucket policy in the ‘Bucket policy editor.’

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::example.com/"
]
}
]
}
4 — Update example.com to include your bucket name. My example would be changing it to rnsftwre.com.
5 — Select ‘Save.’
Next, you’ll want to test your domain endpoint.
Test Domain Endpoint
You can obtain the website endpoint in the ‘Static website hosting’ property in the bucket’s properties.
1 — In the bucket list, select the bucket that you’re using to host the static website.
2 — Select ‘Properties’ -> ‘Static website hosting.’
3 — To test the endpoint, click the link next to ‘Endpoint.’
You’ll know that the website was successfully deployed if you see the index.html page in your browser. The next thing you’ll do is use Route 53 to enable users to use both URLs to navigate to your site.
Add Alias’ for Domain and Subdomain
Adding an alias will ensure that your website is accessible from your domain name instead of an IP address.
1 — Head to the Route 53 console: https://console.aws.amazon.com/route53/
2 — Select ‘Hosted Zones.’
3 — Select the name of the hosted zone that matches the root domain name.
4 — Select ‘Create Record Set.’
5 — Specify the values requested.
Name: Accept the default value — which will be the name of your hosted zone and domain.
Type: Choose ‘A — IPv4 Address.’
Alias: Choose ‘Yes’
Alias Target: (Taken right from the AWS docs) In the S3 website endpoints section of the list, choose your bucket name.
The bucket name should match the name that appears in the Name box. In the Alias Target listing, the bucket name is followed by the Amazon S3 website endpoint for the region where the bucket was created, for example, example.com (s3-website-us-west-2). Alias Target lists a bucket if:
You configured the bucket as a static website.
The bucket name is the same as the name of the record that you’re creating.
The current AWS account created the bucket.
If your bucket does not appear in the Alias Target listing, enter the Amazon S3 website endpoint for the region where the bucket was created, for example, s3-website-us-west-2.
Routing Policy: Accept the default value — ‘Simple.’
Evaluate Target Health: Accept the default value — ‘No.’
6 — Select ‘Create.’
To create an alias for the subdomain, follow the below instructions.
1 — Within the hosted zones for your root domain, select ‘Create Record Set.’
2 — Specify the values requested.
Name: enter www in the box.
Type: Choose ‘A — IPv4 Address.’
Alias: Choose ‘Yes’
Alias Target: (Taken right from the AWS docs) In the S3 website endpoints section of the list, choose the same bucket name that appears in the Name field — for example, www.example.com (s3-website-us-west-2).
Routing Policy: Accept the default value — ‘Simple.’
Evaluate Target Health: Accept the default value — ‘No.’
3 — Select ‘Create.’
Finally, you’ll want to test your new static website!
Test the Site
You can check to see if the main site and the redirect are set up correctly by entering each URL into your browsers. In this case, both rnsftwre.com and www.rnsftwre.com will display the same website content.
So there ya go! If you want a more in-depth guide, you can view Amazon’s AWS documentation on Configuring a Static Website Using a Custom Domain.
Thank you for reading the Rusty Nail Software Dev Blog! AWS can be very intimidating when getting started, but it seems like it’s a very powerful service that provides a lot of micro-services. I’ll be using it for all my web service needs from here on out.