DEV Community

Cover image for Host static website in S3 with NameCheap DNS
Sudha Chandran B C
Sudha Chandran B C

Posted on

6 1

Host static website in S3 with NameCheap DNS

In this tutorial I'll host a static website in an S3 bucket (created in previous tutorial) and buying a domain name from namecheap.com.

What You Need

Amazon S3

  • Have an S3 bucket with the same name as your domain name
  • Upload your website's code
  • Allow public access
  • Add a policy to enable S3 GetObject
  • Enable static website hosting

Domain Name Service provider

  • www.namecheap.com
  • In DNS Zone settings, we need to add www to subdomain and the S3 endpoint in hostname for CNAME records.

Step 1: Create 2 S3 buckets

Create two S3 buckets to host your files for your website

  1. Bucket1: example.com
  2. Bucket2: www.example.com

Step 2: Configuring buckets

Bucket example.com must have public read access.
Edit public access with following options checked.

  • Block public access to bucket and objects granted through new access control lists (ACLs)
  • Block public access to bucket and objects granted through any access control lists (ACLs)

Alt Text

Step 3: Configuring buckets: Bucket Policy

In the Permissions section, choose Bucket Policy. and the following policy.

{
"Version": "2012-10-17",
"Id": "Policy1548223592786",
"Statement": [
{
"Sid": "Stmt1548223591553",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.example.com/*"
}
]
}

Step 4: Static website hosting

  • In the Properties, choose Static website hosting.
  • Choose Use this bucket to host a website.
  • For Index document, type index.html.
  • Hit Save.

Alt Text

Step 5: Redirect bucket traffic. (www.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.
  • In the Properties, choose Static website hosting.
  • Choose Redirect requests.
  • For Target bucket or domain, type host bucket name i.e. example.com.
  • For protocol, type http.
  • Hit Save.

Now we can store content in either bucket.

Step 6: Upload and verify.

  • We will upload out website files to example.com bucket.
  • In the Properties, choose Static website hosting.
  • Click on the link next to Endpoint.
  • you should see your website running in S3.

Step 7: Set advanced DNS in namecheap to navigate

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

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

And you're done! Note that it might take a while for your new settings take effect.

Congratulations! on your new website hosted statically on Amazon S3 bucket.

Thank you for reading! 😊

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay