Long time wish of building a personal website & self hosting with custom domain, all happened over two weekends.
Here you go with steps followed in the making of https://bhuvana.pro after developing the static website.
The entire blog is detailed out with three stages. You can stop at any stage but still have working website with custom domain.
- Stage 1 - Static Website hosted on routed with Route 53
- Stage 2 - Static Website hosted on S3 routed with Route 53 & CloudFront with ACM for SSL
- Stage 3 - Stage 2 + CI CD for deploying static website
Table of Contents
AWS Services Used
- S3
- Route 53
- Amazon Certificate Manager
- CloudFront
- AWS CodeCommit
- AWS CodeDeploy
- AWS CodePipeline
Best Practise
- Ensure to tag all the resources that you create.
- S3 root domain & logging bucket
- CloudFront Distribution
- Route 53 - Hosted Zone
- ACM - public certificate
- I have created two tags (Name: Bhuvana.pro and Usage: website), which will help for resource grouping and cost analysis.
- To standardize example.com and www.example.com is used as root and subdomain throughout this article
Highlevel Steps Involved
Detailed Implementation Instructions
Stage 1
We will be implementing Static Website on S3 routing to Custom domain (example.com) using Route 53 where Custom domain is registered with GoDaddy.com. This will be implemented from Steps 1 to 9.
Step 1:
Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service. You can use Route 53 to perform three main functions in any combination: domain registration, DNS routing, and health checking. In our tutorial, we will be using Route 53 for DNS routing with an external site for domain registration. Read here for more details on Route 53
Register your favorite domain based on availability. I registered with GoDaddy just to integrate the external domain with Route 53; otherwise registering a domain with Route 53 will automatically create a hosted zone for you.
Step 2:
Amazon Simple Storage Service (Amazon S3) is storage for the internet and static website hosting functionality helps you to host a static website on S3 bucket without the need to provision and manage servers to meet the scale. Read here for more details on how to use S3.
Create an S3 bucket for the root domain (say example.com) and upload the content for your static website
Step 3:
Create an S3 bucket for the subdomain and configure that to redirect to the domain bucket
Step 4:
Create a hosted zone in Route 53 for the registered domain name and copy the NS Record server details to update in GoDaddy.com
If you have registered the domain with Route 53, this is handled automatically by AWS.
Step 5:
Add the NameServers in GoDaddy.com.
Remember to exclude the trailing dot while copying the server names.
Step 6:
Now that you have created two S3 buckets for hosting and redirecting, let's check if it's working by copying the endpoints of S3 buckets to the browser. Yes, the Website is up with S3!
Step 7:
It's time to route the domain/subdomain to access the website hosted in S3. You will have to create two recordsets under the hosted zone pointing to the S3 buckets example.com and www.example.com
Step 8:
To watch the website traffic, you can enable logging on the root domain s3 bucket and store that logs in logs.example.com under prefix logs/
Step 9:
Test the websites with root domain and subdomain as follows
Stage 2:
We have the website up & running, but how secured it is? Good to have SSL integration. But S3 does not support SSL Integration, hence let's use Amazon CloudFront to deliver the static website from S3 secured with a public certificate created from Amazon Certificate Manager (ACM).
Step 10:
Amazon Certificate Manager helps you to easily provision, manage & deploy public and private SSL certificates. Read here for more details.
Important note: You should create the SSL only in N.Virginia region for usage with ACM.
Step 11:
Amazon CloudFront is a web service that speeds up the distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance. Read here for more details on CloudFront.
Let's create a Web distribution in Amazon CloudFront to act as a CDN for our static website hosting
Step 12:
In Step 7, we routed the domain / sub domain to access the website hosted in S3. delete those record sets and create two new record sets to point to the CloudFront domain.
If ipv6 is turned on for the CloudFront web distribution, create two more recordsets.
Step 13:
Your website is up & running with SSL Integration
Step 14:
Well, now your website can be browsed via S3 endpoint without SSL & via root domain & subdomains with SSL.
That isn't enough. Further, why should users access S3 content directly when we have SSL integration for your domain in place?
Let's go in for Origin Access Identity to restrict access to content that you serve from Amazon S3 buckets and here are the steps:
Create a special CloudFront user called an origin access identity (OAI) within the CloudFront console and associate it with your distribution.
Configure your S3 bucket permissions so that CloudFront can use the OAI to access the files in your bucket and serve them to your users. Make sure that users can’t use a direct URL to the S3 bucket to access a file there.
After you take these steps, users can only access your files through CloudFront, not directly from the S3 bucket.
Click here to read more about OAI and follow the below instructions to setup
Step 15:
Try accessing the content via S3 endpoint.. Hope you are getting 403 Forbidden ?
First time you can be happy about getting Access Denied Error. Hurray!!
Now your website should be only accessible via your root domain and subdomain delivered through CloudFront distribution.
Hearty Congratulations for successfully setting up your secured static website along with me.
Stage 3:
As a DevOps person, implementation is incomplete without a source control repository for versioning to the website changes and seamlessly integrating the changes to the S3 bucket through a DevOps pipeline, and here is the architecture.
Pricing
If you wanted to explore how much is your expenditure on the monthly basis, go to My Billing Dashboard to Activate Cost Allocation Tags for Name & Usage that we have created for all resources. Activating tags for cost allocation tells AWS that the associated cost data for these tags should be made available throughout the billing data pipeline. Once activated, cost allocation tags can be used as a filtering and grouping dimension in AWS Cost Explorer, as a filtering dimension in AWS Budgets, and as a dedicated column in the AWS Cost & Usage Report.
Reference Links
Static Website hosting with Custom Domain
Configuring SSL Certificate to CloudFront Distribution
Routing to CloudFrond Distribution
Restricting Access to S3 Content via Origin Access Identity
Top comments (10)
Had no idea about OAI. Thanks for pointing it out. For the CDK fans, I was playing with creating a CloudFront CDN with CDK - you can see the code over at
github.com/SathyaBhat/cdk-cdn
Now I need to add OAI support. PRs welcome, of course :)
Thank you so much, Sathya.
Will checkout your CDK code for CDN
Good one.
Suggestion - In Stage #3 - CI/CD, its worth mentioning that just pushing the updated web content to S3 will not help. The cache in CloudFront needs to be invalidated as well for CloudFront to reach to origin to pick the updated version again. Or wait for the objects to be expired as per time to live configured in CloudFront. Thanks.
Thanks a lot :)
Will check and add details as needed.
Awesome article for what kind of infrastructure is needed when AWS Amplify Console is not enough( limited log access, no access to metrics)!
Thank you :)
Hello, I have also done this using Azure DevOps as CI/CD for the react application and AWS S3, Cloudfront and my article is linkedin.com/pulse/deploy-your-rea...
Indeed a very nice article Ma'm
Thanks for the post
That was a great read, so thanks for posting this.
I was curious to know which tool you used to build these flow diagrams for this blog.
Great Article. Very helpful for beginners. Thanks a lot for posting. Looking forward to many more of such helpful articles from you.