A Step-by-Step Guide to Hosting a Static Website on Amazon S3 and CloudFront.
You can easily and inexpensively use Amazon Web Services (AWS) to host a website using client-side technologies only (such as HTML, CSS, and JavaScript). This type of site is called a static website and is used to display content that does not change frequently.
In this article,I will show you how to host your static website using the Amazon Simple Storage Service (S3) so that it is secure, fast, protected against data loss, and can scale to support enterprise-level traffic. To do that, you’ll store your website files on Amazon S3 and also use S3 to deliver your content to visitors to your website.
After setting up the static website on S3, I will show you how to use Amazon CloudFront to create a content delivery network (CDN). A CDN makes your website content available from data centers around the world, called edge locations. Using edge locations improves the speed of your website by reducing latency. Doing so is especially important if your website displays large media files such as high-resolution images, audio, or video.
Prerequisites:
Before we delve into the hosting process, make sure you have the following prerequisites in place:
- An Amazon Web Services (AWS) account.
- A static website (HTML, CSS, and JavaScript) . In this article I will demonstrate using a template from html5up
Step 1: Create an Amazon S3 Bucket:
In the AWS Management Console create a new Amazon S3 bucket with ACL disabled.
a. Create a bucket with a globally unique name
Note: A bucket name must also be DNS compliant. Here are some of the bucket rules it must adhere to:
- They must be at least 3 and no more than 63 characters long.
- They may contain lowercase letters, numbers, periods, and/or hyphens.
- Each label must start and end with a lowercase letter or a number.
- They cannot be formatted as an IP address (for example, 192.168.1.1).
b. Leave public access to the bucket Bucket blocked since we intend to serve the content only through CloudFront.
c. Enable static website hosting under bucket properties and Configure index(index.html) and error documents . The index document is the default page that loads when users access your site, and the error document is displayed when an error occurs.
e. Add your static web content into your bucket (drag and drop works nicely)
Step 2: Set Up Amazon CloudFront:
Navigate to CloudFront: In the AWS Management Console, go to the CloudFront service.
a. Create a new distribution: Click on the “Create Distribution” button. Choose the “Web” distribution type and configure the settings. Under Origin Settings set the S3 bucket endpoint as the origin domain name. This ensures CloudFront knows where to fetch your static website content.
b. Default Cache Behavior Setting — adjust caching settings based on your website’s needs. The default values will work well for this demonstration.
c. Distribution Settings — Set the default root object to index.html and configure any additional settings based on your preferences.
note: Amazon CloudFront doesn’t always transparently relay requests to the origin. If there is no default root object set on the distribution you will receive an AccessDenied error when you try to access the CloudFront distribution’s domain
Step 3: Modify bucket policy and Test your website:
a. After creating your CloudFront distribution you will get a reminder to modify your bucket policy.
Copy policy then return to the bucket you created, click the Permissions tab, scroll down to the Bucket policy section, click Edit, paste the policy you copied, and click Save changes:
Your new S3 bucket policy should look like this.
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{YOUR-BUCKET-NAME}/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::{}:distribution/{CLOUDFRONT-ID}"
}
}
}
]
}b. You can now Access your website using your CloudFront distribution domain name.
c. success. 🎉🎉🎉.
By following these three steps, you’ve successfully taken your static website to the cloud, ensuring a reliable and robust user experience.
Hosting a static website on Amazon S3 and CloudFront offers a scalable and cost-effective solution. With AWS’s services such as S3 and CloudFront (CDN), your website benefits from high availability, low latency, and easy scalability.
