This guide provides a comprehensive, step-by-step process for hosting a static website on AWS. By following these steps, you'll have a secure and automated static website deployment pipeline using AWS. The key components include creating an S3 bucket, setting up AWS CodeCommit, configuring CodePipeline, requesting an SSL Certificate, creating a CloudFront Distribution, and updating DNS Settings for your domain.
This guide was created by our Summer Intern, Serene Aryal, who successfully completed this website project for a customer. The customer was very happy with the results.
Step 1: Create an S3 Bucket
Creating the Bucket
- Sign in to the AWS Management Console and open the S3 console.
- Choose "Create Bucket."
- Enter the bucket name (e.g., mybucket.com).
- Select a region.
Configuring the S3 Bucket
- Under Permissions, uncheck "Block all public access."
- To grant public read access, add the following bucket policy in the Bucket policy editor:
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::[YOUR BUCKET NAME]/*" } ] }
- Under Properties, enable Static website hosting and enter your index document (e.g., index.html).
Step 2: Set Up AWS CodeCommit Repository
Create an IAM User for Accessing CodeCommit
- Navigate to the IAM console.
- Select Users and choose "Create User."
- Attach the AWSCodeCommitPowerUser policy.
Generate Security Credentials
- Generate HTTPS Git credentials for AWS CodeCommit.
Configure AWS CLI and Git
- Install AWS CLI and Git.
- Initialize Git in your local folder and push your code to the repository.
Step 3: Set Up CodePipeline
- Navigate to the CodePipeline console and create a new pipeline.
- Add Source Stage from AWS CodeCommit.
- Skip the Build Stage.
- Deploy Stage: Choose Amazon S3 and select your S3 bucket.
Step 4: Get SSL Certificate
- Request a certificate from AWS Certificate Manager.
- Add CNAME records for domain verification.
Step 5: Create a CloudFront Distribution
- Navigate to the CloudFront console and create a distribution.
- Configure your S3 bucket as the origin and set Viewer protocol policy to redirect HTTP to HTTPS.
Step 6: Update DNS Settings to Point to CloudFront
- Update your DNS settings with CNAME and A records pointing to your CloudFront domain.
Step 7: Test Your Domain
- Wait for DNS propagation.
- Visit your domain to ensure it loads securely with HTTPS.
Conclusion
By following this guide, you've successfully deployed a static website on AWS with a secure and automated pipeline. Explore additional AWS services to further enhance your website's capabilities.