Host a static website on Amazon s3 using CDN + Implementing a CICD Pipeline

Hola. My name is Lasya. I am an AWS Cloud Enthusiast and am writing this blog as a part of the #10weeksofcloudops challenge, created by Piyush Sachdeva, which I recently came across. There are weekly hands-on challenges, with 24x7 guidance and help in the discord channel, if you are stuck at any point. This is the #week1 challenge, which is to host a static website in the cloud, using the CICD Pipeline.

Services/ Tools I have used

Version Control: GitHub

CICD Pipeline: AWS Code Pipeline

Static Website hosting: Amazon S3, Amazon Route53, Amazon CloudFront, AWS Certificate Manager

Architecture Diagram:

All you need to start building this project:

AWS Account
GitHub Account
A Domain( from Route53, GoDaddy, Hostinger etc)
Basic Website/HTML Template

There are mainly 2 ways to build this project, you can either build the code pipeline first or the static website path. Here we will be building the static website first.

Step 1: Create an S3 Bucket from which the static files will be hosted on our personal domain using Cloudfront and Route53.As we will be building a CICD pipeline later, here we will create an empty bucket.

Step 1.1: Log into AWS Management Console. Search for Amazon S3 in the search box. Click on create bucket.

Step 1.2: The bucket name will be www.<domainname>. Here it is lasyaaws.click.Choose any region. I will be going for us-east-2.

Step 1.3: Leave the other settings to Default, scroll down and click on create bucket.

Step 1.4: Click on the bucket name. Go to the Properties tab and scroll down. Click on the edit button for Static Web Hosting.

Step 1.5: Now change it to enable. Place the name of the index document, which we will upload in s3 for static web hosting later. Usually, it is index .html.

Step 1.6: Scroll down and save changes.

Step 2: Like mentioned earlier, we will need a domain name. In this step, we will be securing our domain name by using an SSL certificate generated by ACM( AWS certificate manager).

Step 2.1: Go to AWS Certificate Manager—> Request Certificate.[Ensure that the region selected is N.Virginia].

Step 2.2: Under fully qualified domain names, mention your domain name in the below format.

*.<domain_name>

<domain_name>

Let the validation method be DNS Validation.

Step 2.3: While the Status for the certificate changes to Issued, create the records for Certificate Manager in Route53.

Step 2.4: Once you refresh, the status for the certificate will change to Issued.

Step 3: Building a Content Delivery Network using CloudFront. This will connect to the s3 bucket we created earlier, and provide a distribution domain name that will be accessible from multiple edge locations.

Step 3.1:Goto Amazon Cloudfront→ Create a CloudFront Distribution. Under Origin Domain, select the s3 static website URL.

Step 3.2: Under Origin Access—> Origin access control settings—>Origin Access Control.

Select your Bucket URL.

Step 3.3- Scroll down to the viewer Protocol policy and choose” Redirect HTTP over HTTPS”

Step 3.4: Enable Security Protection under WAF. Scroll down to settings. Add the alternate domain nama as “lasyaaws.click.”

Add the SSL Certificate from the Dropdown.

Step 3.5: For Default root Object→ index.html.Scroll down and click on Create Distribution.

A bucket policy will be in ready-to-copy format. We will have to copy this and paste it into our bucket’s policy. ( Got to s3→ our Bucket→permissions tab→ edit bucket Policy and paste, and save)

Step 4: Connect Cloudfront distribution Domain name to domainname., This will help us access our domain securely from any edge location, through our domain name.

Instead, you can also use the distribution domain name to access the static website.

Step 4.1: Go to Route53→Hosted Zones→Your Domain→Create record.

Step 4.2: Choose Record Name→www. Record Type→A. Select Alias. Route traffic to→ CloudFront Distribution. Select the CloudFront distribution and create the record.

Step 5: Now your static website has been successfully created, but the bucket is empty. To send files to s3, we will be creating a CI/CD Pipeline using AWS CodePipeline.

Step 5.1: Go to the Search bar in AWS Management Console --> CodePipeline-->Pipelines--> Create Pipeline.

Step 5.2: Ensure that the pipeline is being created in the same region as your s3 bucket[Since i created s3 bucket in us-east-2, will be creating the pipeline in the same region].

Step 5.3: For the Source provider, I have chosen GitHub Version 2. ( as this was recommended over version 1), Click on connect to Git Hub and create the connection.

Once the connection has been established, Choose your code repository and branch.

Step 5.4:We are in the Build stage. This stage is used to install software necessary for the application or to run tests. Here, we are going to attach a simple build spec file that you can access from my GitHub repository.

Choose the build provider as AWS CodeBuild, and click on create project.

(P.S- I have changed the Region to US East 2 Ohio later)

Step 5.5: Give the Project a name, and choose the OS as Amazon Linux 2.

Step 5.6: Choose the Runtime as Standard. Image→ standard 5.0.Image version-> Latest Image version. Environment type→ Linux.

Step 5.6: Once you create this project, you will be navigated back to the code pipeline. Click on Next.

Step 5.7: We are in the deployment stage. Under Deploy Provider–Choose Amazon S3, and choose your bucket name under the bucket. Select the checkbox for extract files before Deploy.