Skip to main content

Hosting a Static Website on AWS S3 with Custom Domain and HTTPS

Introduction

In this article, I will guide you through the process of hosting a static website on Amazon Web Services (AWS) S3 bucket, mapping it to a custom domain, and enabling HTTPS. I recently went through this process and found it to be a bit complex, so I wanted to share my experience to help others.

Prerequisites

  • An AWS account
  • A static website built and ready for deployment
  • A registered domain name with a third-party registrar (e.g., GoDaddy)

Step 1: Create an S3 Bucket and Upload Static Website

  1. Sign in to the AWS Management Console and navigate to the Amazon S3 service.
  2. Click “Create bucket” and provide a unique DNS-compliant name for your bucket.
  3. Choose a region for your bucket and click “Create”.
  4. Upload your static website files to the bucket and make the bucket public.

Step 2: Enable Static Website Hosting and Set Index Document

  1. Go to the Properties tab of your bucket.
  2. Scroll down to the “Static website hosting” box and click “Edit”.
  3. Select “Enable” and enter “index.html” as the Index Document.
  4. Click “Save changes”.

Step 3: Register a Domain Name with Route 53

  1. Navigate to the Route 53 service in the AWS Management Console.
  2. Click “Domain Registration” and then “Register Domain”.
  3. Enter your desired domain name and follow the prompts to complete the registration process.

Step 4: Create A Records in Route 53

  1. In the Route 53 dashboard, click “Hosted zones” and then click on your domain name.
  2. Click “Create Record Set”.
  3. In the Name field, leave it empty for the root domain (e.g., example.com) or enter “www” for the www subdomain.
  4. Select “A - IPv4 address” for the Record Type.
  5. In the Value field, enter the IP address of your S3 bucket (you can find this in the S3 bucket properties).
  6. Click “Create” to create the A record.

Step 5: Update Nameservers in Your Domain Registrar

  1. Go to your domain registrar’s website and navigate to the DNS settings for your domain.
  2. Update the nameservers with the ones provided by Route 53.

Step 6: Request an SSL Certificate from AWS Certificate Manager

  1. Navigate to the AWS Certificate Manager service in the AWS Management Console.
  2. Click “Request a certificate” and follow the prompts to request a certificate for your domain name.

Step 7: Create a CloudFront Distribution

  1. Navigate to the CloudFront service in the AWS Management Console.
  2. Click “Create Distribution” and follow the prompts to create a distribution for your S3 bucket.
  3. When prompted, select the SSL certificate you created in Step 6.
  4. In the “Alternate Domain Names (CNAMEs)” field, enter your domain name.
  5. In the “Default Cache Behavior Settings”, set “Viewer Protocol Policy” to “Redirect HTTP to HTTPS”.
  6. Click “Create Distribution”.

Step 8: Update Route 53 to Use CloudFront Distribution

  1. Go back to the Route 53 service and navigate to the Hosted Zone for your domain.
  2. Create two new A records, one for the root domain (e.g., example.com) and one for the www subdomain.
  3. Select “Alias” and choose the CloudFront distribution you created in Step 7.
  4. Click “Create” to create the A records.

Step 9: Test Your Website

  1. Open a web browser and go to your website using the domain name you registered.
  2. Verify that your website loads correctly and that the URL shows HTTPS.

Conclusion

By following these steps, you can host your static website on AWS S3 bucket, map it to a custom domain, and enable HTTPS. This setup provides a scalable and cost-effective way to host your website with the added benefits of security and reliability.

Comments

Post a Comment

Popular posts from this blog

Unlock protected blocks in Siemens SIMATIC Step 7

Recently I'd been called by Hindalco's Fabrication Plant division to unlock the protected blocks in Siemens SIMATIC Step 7. They were in need to unlock those blocks since an year because of 1 million Rupees of loss per month. They want to re-program those blocks but it was locked by the man who'd done the setup. From the people working in that department, I came to know that they were trying to call that man (someone from Italy) right here but he's not coming. Actually, what he'd done was that he'd locked some of the blocks and deleted the source file. And Siemens didn't provide any feature to unlock. Department people also told me that even the people working in Siemens don't know how to do it. Being a software engineer I know that any thing can be reverse engineered. So I took up the challenge. How did I unlocked the blocks? The first thing I'd done was searched about this software at Google and read about what is this software all about. Aft
49 comments
Read more

App: Calculate your job experience or age in years

Usually, all of those who works have to put years of experience on their resume or curriculum vitae. But 90% people put it wrong when they convert their experience in years only. Although they know the exact number of months and years but the conversion, they do is wrong. This happens because there are 12 months while the digit after decimal would be 0-9, i.e., 10 digits. Which means that we have to represent the number of months in terms of year. So here I have provided a small gadget to calculate it. Just put the date when you had started working in the From Date field and put current date in the To Date field. You can also calculate your age as well with this tool by putting your date of birth in the From Date field and put current date in the To Date field. As an alternative, you can use the hassle-free and simple to use  Date Differentiator  micro webapp. Bookmark it so you may easily access it later.
Post a Comment
Read more

How to convert JIRA story into sub-task or defect?

Many times we entangled in the situation where we have made a  story  in JIRA but later on realised that it should have to be  defect  or in other case,  sub-task  of another  story . Story → Sub-task So the workaround for converting the story into defect is given below: Open your  story Click on  more  option Click on the  Convert to sub-task  option in the dropdown You would be asked to choose  Parent  story, so chose relevant story After submit, your  story  gets converted into  sub-task Story → Defect Now if you want the story to be converted into defect, then you should first convert it into sub-task. Thereafter, you can convert that sub-task into defect as given below: Open the  sub-task Click on  more  option Click on the  Convert to issue  option in the dropdown You would be asked to fill up relevant fields required for raising a  defect , fill them up as required After submit, your  sub-task  gets converted into  defect .
Post a Comment
Read more