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
- AWS Services Used
- Best Practise
- Highlevel Steps Involved
- Reference Links
- Route 53
- Amazon Certificate Manager
- AWS CodeCommit
- AWS CodeDeploy
- AWS CodePipeline
- 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 create two tags as (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 through out this article
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 external site for domain registration. Read here for more details on Route 53
Register your favourite domain based on availability. I registered with GoDaddy just to integrate external domain with Route 53; otherwise registering a domain with Route 53 will automatically create a hosted zone for you.
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 need to provision and manage servers to meet the scale. Read here for more details on how to use S3.
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 domain with Route 53, this is handled automatically by AWS.
Its time to route the domain / subdomain to access the website hosted in S3. You will have to create two record sets under the hosted zone pointing to the S3 buckets example.com and www.example.com
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).
Amazon Certificate Manager helps you to easily provision, manage & deploy public and private SSL certificates. Read here for more details.
Amazon CloudFront is a web service that speeds up 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.
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 CloudFront domain.
If ipv6 is turned on for the CloudFront web distribution, create two more record sets.
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 user 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 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
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.
As a DevOps person, an implementation is incomplete without a source control repository for versioning to the website changes and seamlessly integrating the changes to S3 bucket through a DevOps pipeline and here is the architecture..
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.