Setting Up AWS S3, GitHub, ACM, and CloudFront for Static Website Hosting
1. Create S3 Bucket for Static Website Hosting đī¸ đ
-
Create an S3 bucket named “abc.com”
-
Set the bucket as a static website page:
-
Open the S3 bucket and go to “Properties.”
-
In the last option, enable static website hosting.
2. Configure Bucket Policy for Public Access
-
In the S3 bucket, navigate to “Permissions.”
-
Edit the bucket policy and add the following policy, replacing the S3 bucket ARN:
Bucket policy
{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: “”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::abc.com/”
}
]
}
3. Configure GitHub Repository
Open link https://github.com/yahyagulshan/yahyagulshan.com Change the “config.toml” file:
- Update the S3 URL and static website URL at line #8 and line #23.
4. Add Secrets to GitHub Repository đ
-
In GitHub repository settings, go to “Secrets and variables” > “Actions.”
-
Add the following security secrets:
-
AWS access key
-
Secret access key
5. Run the GitHub Actions Pipeline đđģââī¸
- Trigger the GitHub Actions pipeline to send necessary materials to AWS S3.
6. Create AWS ACM SSL Certificate đđ
-
Open AWS ACM page and click on “Request a Public Certificate.”
-
Provide the domain name (e.g., “abc.com”) and select DNS validation.
7. Add values in Cloudflare
- Add the “CNAME name” and “CNAME value” to your domain registrar (e.g., Cloudflare) for DNS validation.
8. Create CloudFront Distribution
-
Go to CloudFront and click on “Create Distribution.”
-
Choose the S3 bucket as the origin domain.
-
Click on “Create Distribution” and wait for verification.
9. Configure CloudFront Origin Domain
-
Go to CloudFront > Origins > Edit.
-
Change the origin domain value by copying the S3 static website hosting URL (without http/).
-
Save the changes.
10. Redirect Domain to CloudFront âŠī¸
-
Copy the URL of the CloudFront distribution.
-
Create a CNAME record on Cloudflare or your domain registrar with the CloudFront URL as the value.
-
After populating the value, your website will display the CloudFront content.
-
Now, your static website is hosted on AWS S3, served through CloudFront, and secured with an ACM SSL certificate. The entire deployment process is automated through GitHub Actions.