Lingquan | Blog

Host a website by AWS S3 with Namecheap domin

Word count: 773Reading time: 4 min
2019/02/17 Share

5 Steps to host a static website in AWS

Step 1: Register a Domain in Namecheap

If we don’t already have a registered domain name, such as example.com, register one with Namecheap. If we are student, we can apply for a discount. When we have a registered domain name, our next tasks are to create and configure Amazon S3 buckets for website hosting and to upload our website content.

Step 2: Create and Configure Buckets

To support requests from both the root domain such as example.com and subdomain such as www.example.com, we create two buckets. One bucket contains the content. we configure the other bucket to redirect requests.

The bucket names must match the names of the website that we are hosting. For example, to host our example.com website on Amazon S3, we would create a bucket named example.com. To host a website under www.example.com, we would name the bucket www.example.com. In this example, our website supports requests from both example.com and www.example.com.

In this step, we sign in to the Amazon S3 console with our AWS account credentials and create the following two buckets.

  1. Bucket1: example.com

  2. Bucket2: www.example.com

Sign in to the AWS Management Console and open the Amazon S3 console.

Step 3: Upload Data to Buckets

Upload our website data to the example.com bucket.

we will host our content out of the root domain bucket (example.com), and we will redirect requests for www.example.com to the root domain bucket. we can store content in either bucket. For this example, we host content in the example.com bucket. The content can be text files, family photos, videos—whatever we want.

For step-by-step instructions, please seeHow Do I Upload an Object to an S3 Bucket?

To host a website, our bucket must have public read access. It is intentional that everyone in the world will have read access to this bucket. To grant public read access, attach the following bucket policy to the example.com bucket, substituting the name of our bucket for example.com. See [Add an S3 Bucket Policy step-by-step instruction] to know more(https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-bucket-policy.html)

1
2
3
4
5
6
7
8
9
10
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::example.com/*"]
}]
}

Step 4: Configure Buckets for Website Hosting

we now have two buckets, example.com and www.example.com, and we have uploaded our website content to the example.com bucket. Now, we configure www.example.com to redirect requests to our example.com bucket. By redirecting requests, we can maintain only one copy of our website content. Visitors who type www in their browsers and those who specify only the root domain are routed to the same website content in our example.com bucket.

When we configure a bucket for website hosting, we can access the website using the Amazon S3 assigned bucket website endpoint.

4.1 First - configure both buckets for website hosting

First, we configure example.com as a website and then we configure www.example.com to redirect all requests to the example.com bucket.

  • To configure our buckets for website hosting
    • Sign in to the AWS Management Console and open the Amazon S3 console.
    • in the Bucket name list, choose the name of the bucket that we want to enable static website hosting for.
    • Choose Properties.
    • Choose Static website hosting.
    • Configure the example.com bucket for website hosting. In the Index Document box, type the name that we gave our index page.
    • Choose Save.

4.2 Then: Configure our Website Redirect

Now that we have configured our bucket for website hosting, configure the www.example.com bucket to redirect all requests for www.example.com to example.com.

To redirect requests from www.example.com to example.com

  • In the Amazon S3 console, in the Buckets list, choose our bucket ( www.example.com, in this example).

  • Choose Properties.

  • Choose Static website hosting.

  • Choose Redirect requests. In the Target bucket or domain box, type example.com.

  • Choose Save.

4.3 Finally: Test our Endpoint and Redirect

To test the website, type the URL of the endpoint in our browser. our request is redirected, and the browser displays the index document for example.com.

Step 5: Set advanced DNS in namecheap to navigate

In the namecheap advanced DNS configuration, we need to add the following settings:

1
2
CNAME Record    @    example.com.s3-our-endpoint-in-aws.
CNAME Record www www.example.com.s3-domain.com.s3-our-endpoint-in-aws.

Reference:

AWS User-guide

CATALOG
  1. 1. 5 Steps to host a static website in AWS
    1. 1.1. Step 1: Register a Domain in Namecheap
    2. 1.2. Step 2: Create and Configure Buckets
    3. 1.3. Step 3: Upload Data to Buckets
    4. 1.4. Step 4: Configure Buckets for Website Hosting
      1. 1.4.1. 4.1 First - configure both buckets for website hosting
      2. 1.4.2. 4.2 Then: Configure our Website Redirect
      3. 1.4.3. 4.3 Finally: Test our Endpoint and Redirect
    5. 1.5. Step 5: Set advanced DNS in namecheap to navigate
    6. 1.6. Reference: