How to Deploy a Static Website on S3 with Automated CI/CD Using AWS CodePipeline

Introduction

Deploying a static website on AWS S3 and automating updates with AWS CodePipeline ensures seamless and efficient delivery. In this guide, I’ll walk you through the process step by step, from creating an S3 bucket to setting up CI/CD with AWS CodePipeline and GitHub. Screenshots are included at each stage to make the process easier to follow.

Diagram

Step 1: Create an S3 Bucket

1. Log in to the AWS Management Console.
2. Navigate to S3 and click Create bucket.
3. Enter a unique bucket name.
4. Choose the appropriate region.
5. Uncheck Block all public access to allow public access.
6. Click Create bucket.

Step 2: Enable Static Website Hosting

1. Open your S3 bucket.
2. Navigate to the Properties tab.
3. Scroll down to Static website hosting.
4. Select Enable and choose Host a static website.

5. Enter index.html as the index document.

6. Save changes.

Step 3: Configure Bucket Policy for Public Access

1. Go to the Permissions tab of your S3 bucket.
2. Click on Bucket policy.
3. Add the following policy to allow public access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}        

4. Replace your-bucket-name with your actual bucket name.

5. Save the policy.

Step 4: Set Up AWS CodePipeline

1. Navigate to AWS CodePipeline.
2. Click Create pipeline.
3. Enter a pipeline name and select New service role.
4. Click Next.

Step 5: Connect GitHub Repository

1. Choose GitHub as the source provider.
2. Click Connect to GitHub and authorize AWS CodePipeline.
3. Select the repository and branch for deployment.
4. Click Next.

Step 6: Configure the Build Stage (Optional)

If no build process is needed:

1. Select Skip build stage.
2. Click Next.

Step 7: Deploy to S3

1. Select Amazon S3 as the deploy provider.
2. Choose the S3 bucket created earlier.
3. Click Next.

Step 8: Review and Create Pipeline

1. Review all configurations.
2. Click Create pipeline.

Once created, the pipeline will automatically fetch code from GitHub and deploy it to S3.

Step 9: Test the Static Website

1. Copy the S3 static website URL from the Properties tab.
2. Paste it into your browser and verify that the website loads correctly.

Step 10: Automate Updates with CodePipeline

1. Make any changes in the GitHub repository.
2. Push the changes.
3. AWS CodePipeline will automatically detect and deploy the updates.
4. Refresh your website to see the changes.

Conclusion

By following these steps, you’ve successfully set up an automated CI/CD pipeline for a static website on AWS S3 using CodePipeline and GitHub. Now, any updates pushed to GitHub will automatically deploy without manual intervention. This setup ensures a smooth, efficient workflow for continuous deployment.