Prerequisite:
- AWS account
- GitHub Account
- Static website
- Domain Name
AWS Services used:
- Amazon S3
- Amazon CloudFront
- Amazon Route 53
- AWS Certificate Manager
- AWS CodePipeline
Step 1:
If you don’t already have a registered domain name, such as example.com, register one with Route 53. For more information, see Registering a new domain in the Amazon Route 53 Developer Guide. After you register your domain name, you can create and configure your Amazon S3 buckets for website hosting.
Amazon Route53 Developer guide: https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html
Step 2:
Create an S3 Bucket: First, you need to create an S3 bucket to host your static website. Login to your AWS account and navigate to the S3 console. Click on the “Create Bucket” button to create a new bucket. Choose a unique name for your bucket, and select the region where you want to host your website.
Note: The bucket name must match your domain name exactly
Note: Choose a Region that is geographically close to you to minimize latency and costs, or to address regulatory requirements. The Region that you choose determines your Amazon S3 website endpoint.
Step 3: Go to Properties & under Static website hosting, choose Edit.
In Index document, enter the file name of the index document, typically index.html and then save.
Amazon S3 enables static website hosting for your bucket. At the bottom of the page, under Static website hosting, you see the website endpoint for your bucket.
Step 4:
Upload your website files: Upload your static website files to the newly created S3 bucket. You can use the AWS Management Console or AWS CLI
Step 6:
Create an SSL/TLS certificate: To secure your website with SSL/TLS, you need to create an SSL/TLS certificate. You can use the AWS Certificate Manager (ACM) to request a free SSL/TLS certificate.
Then click Request to request a certificate
Step 7:
Create CloudFront Distribution: Once you have created your SSL certificate, you can create a CloudFront distribution to serve your website content with SSL. Go to the CloudFront console and click on the “Create Distribution” button. Choose the “Web” distribution type and enter your S3 bucket URL as the origin domain name. Select the SSL certificate that you created in the previous step.
Select Legacy access identities and click Create new OAI and select Yes, update the bucket policy
Then click Create Distribution
It will take a long time to deploy or cache our website to all the edge locations. so have patience and wait for at least 10 minutes.
Step 8:
Configure Domain Name: Finally, you need to configure your domain name to point to your CloudFront distribution. Go to the Route 53 console and create a new hosted zone for your domain name. Add a new “Alias” record that points to your CloudFront distribution domain name.
Step 9: Create a CI/CD pipeline using AWS code pipeline. Make sure the pipeline is created in the same region as the S3 bucket
Now Click Next.
Now click connect to your GitHub account and verify your credentials and choose the repository and branch where your code is deployed
Skip build stage as it is only a static website
Click Next and Create pipeline
Now push some changes to your GitHub repo and refresh the page of your website.
You will not see the change because when you have deployed your website on CloudFront you have enabled caching and you have to do cache invalidation to see the change quicky.
Click Create invalidation and now you can see the changes which you have committed recently
In conclusion, deploying a static website on Amazon S3 with SSL/TLS encryption is a straightforward process that offers numerous benefits, including secure communication between your website and your visitors. Additionally, Amazon S3 offers cost-effective and scalable solutions, making it an ideal choice for hosting static websites. By deploying your static website on Amazon S3 with SSL/TLS encryption, you can ensure that your website is secure and reliable for your users while also keeping your hosting costs low.
Check our other articles: https://satyam-arya.click/hosting-wordpress-on-amazon-ec2/