Step-by-Step Guide to Hosting a Static Website on AWS with CI/CD Pipeline

In this blog post, we will explore how to host a static website on Amazon Web Services (AWS) using S3 and CloudFront. Additionally, we will implement a Continuous Integration and Continuous Deployment (CI/CD) pipeline to automate the deployment process. This guide is designed for both beginners and those familiar with cloud services, providing a detailed walkthrough of each step.

Overview of the Process

The process involves several key components:

1. DNS Setup: Configuring a DNS service to point to your CloudFront distribution.
2. S3 Bucket Creation: Setting up an S3 bucket to store your static website files.
3. CloudFront Distribution: Using CloudFront as a Content Delivery Network (CDN) to serve your website securely.
4. SSL Certificate: Enabling HTTPS for secure connections.
5. CI/CD Pipeline: Automating the deployment of your website using AWS CodePipeline.

Step 1: DNS Setup

To begin, you need a DNS service. In this example, we will use Namecheap. Here’s how to set it up:

• Create a CNAME record in your DNS service that points to your CloudFront distribution.
• This will allow users to access your website using a custom domain.

Step 2: Create an S3 Bucket

1. Log into your AWS console and navigate to S3.
2. Click on Create Bucket.
3. Name your bucket the same as your static website domain (e.g., www.nettutorialswithpiyush.com).
4. Keep the default settings and ensure that Block all public access is enabled.
5. After creating the bucket, go to the Properties tab and enable Static website hosting. Set the index document to index.html and the error document to error.html.
6. Upload your static website files (e.g., index.html, style.css) to the bucket.

Step 3: Create a CloudFront Distribution

1. In the AWS console, search for CloudFront and create a new distribution.
2. For the origin domain, select your S3 bucket.
3. Create a new Origin Access Identity (OAI) to restrict access to the S3 bucket.
4. Enable Redirect HTTP to HTTPS and select the appropriate caching settings.
5. Add your custom domain name under Alternate Domain Names (CNAMEs).
6. Request a new SSL certificate through AWS Certificate Manager (ACM) for your domain. Ensure the certificate is provisioned in the US East (N. Virginia) region.
7. Validate the certificate using DNS validation by adding the provided CNAME record to your DNS settings.
8. Once validated, go back to CloudFront and select your SSL certificate.
9. Set the default root object to index.html and create the distribution. This process may take several minutes.

Step 4: Configure Bucket Policy

After creating the CloudFront distribution, a bucket policy will be automatically generated to allow access from the OAI. This ensures that your S3 bucket is not publicly accessible, enhancing security.

Step 5: Redirect to Custom Domain

To make your website accessible via your custom domain:

1. Create additional CNAME records in your DNS settings for both www and your root domain pointing to the CloudFront distribution.
2. After a few minutes, your website should be accessible at your custom domain.

Step 6: Set Up CI/CD Pipeline

To automate the deployment process:

1. In the AWS console, navigate to CodePipeline and create a new pipeline.
2. Name your pipeline (e.g., S3 Deploy) and create a new service role.
3. Set the source provider to GitHub and connect your repository.
4. Skip the build stage since we are dealing with static files.
5. For the deploy provider, select S3 and specify your bucket.
6. Review and create the pipeline. This will trigger the pipeline and deploy your files to the S3 bucket.

Step 7: Testing the CI/CD Pipeline

To test the CI/CD pipeline:

1. Make a change in your GitHub repository (e.g., edit index.html).
2. Commit the changes. This should automatically trigger the pipeline.
3. Check the pipeline status in AWS to ensure the deployment was successful.

Step 8: Cache Invalidation

Since CloudFront caches content, you may not see immediate changes on your website. To refresh the content:

1. Go to CloudFront and create an invalidation for your files (e.g., /*).
2. This will clear the cache and allow the updated content to be served.

Conclusion

By following these steps, you have successfully hosted a static website on AWS with a CI/CD pipeline for automated deployments. This setup not only enhances security through HTTPS but also streamlines the deployment process, making it easier to manage updates to your website. If you have any questions or need further assistance, feel free to join our community for support.