Importance of cloud platform for static site hosting
When we host our static website in traditional manner such as individually on a server and running database in the same or a different server. This sort of static website hosting costs more because it requires capital for purchasing, infrastructure, a technician for configuring and maintening the system and also supporting infrastructure to ensure uptime. This makes it difficult for small organisations to get higher performance with their own hardware. AWS S3 – an object storage service on AWS Cloud is a fair solution to this.
In cloud hosting storage like AWS S3, we do not require any server explicitly to store and serve files. AWS, as a cloud platform, manages and maintains the storage to be reliant and available all the time. The major benefit of it comes in the form of cost optimisation. AWS charges you only for the amount of storage you utilise and the amount of data exchange that takes place. This ensures that your are being billed very less amount for a low traffic site. This makes it an ideal solution for startups.
In this article, we take you through the process of deploying an actual static website on AWS S3 and connecting it to a custom domain name like
abc.com. Before we jump into the deployment aspect, let us briefly understood some facts about S3.
Introduction to AWS Simple Storage Service (S3)
S3 stands for Simple Storage Service. It is a type of bucket for storing content/data. AWS S3 is a simple web service that we can use to store and retrieve any amount of data, at any time, from anywhere in the world. AWS S3 is a scalable, high-speed, web-based cloud storage service designed for online backup of data and application on Amazon Web Services(AWS).
Importance of AWS S3 for static website hosting
Although there are many cloud storage services are there like Google Cloud, IBM Watson, Microsoft Azure, AWS S3. But why we are using AWS S3 for hosting our website it having following advantages over other cloud storage services. They are:
- By hosting a website on S3 the biggest advantage is about cost(money). It charges very low cost for hosting a website.
- Its charges are directly dependent on its usage.
- Another advantage is about pay for demand request. It means how much user visits or how many request from your website for data retrieval it depends on that also.
- You can also avail certain amount of free usage for S3 for a year
- It is nearly a zero-maintenance storage – AWS takes care of all that is needed
- S3 is highly availabile service with 99.999999% reliability gurantee.
Prerequisites for static website hosting on AWS S3
- An authorised AWS account which has full access to S3 service
- A purchased domain name if you wish to test out connection with a domain
- HTML template or static site to be uploaded to S3
- Basic knowledge about DNS records
Steps to host a website on AWS S3:
To begin your first static website hosting on AWS S3, login into your AWS console. From the navigation menu, navigate to storage services and select S3.
Create an S3 bucket
An S3 bucket is a container that is uniquely identifiable across AWS. It is a way of organizing your data into small groups. Provide the desired domain name to the bucket. For instance, if you wish to host a site for
www.uza.com then name the bucket with the same name too.
Configure S3 bucket for website hosting
For static web hosting of a website on AWS S3 we have to follow some steps
- Click the on bucket name.
- Redirect to another page, Click on properties tab
- Click on static web hosting option.
- Select Use this bucket to host a website.
- Enter a file name which is said to be start or intialization file.
- Enter error file if any error encounters.
As we can see after enter filename we will able to see bucket is configured for static website hosting. As this is our static website, so we need to give public access of our bucket so that anyone can access our website.
Public access for our bucket
- Click into bucket name “www.uza.com” .
- Select the “Permissions” tab at the top.
- Under “Public Access Settings”, click “Edit”.
- Turn off all block public access , unchecked the checkbox.
Above steps has to be followed for serving for changing bucket policy to give public access to anyone in the world who can access our static website.
Change bucket policy
- Click into our bucket “www.uza.com” .
- Click the “Permissions” section.
- Select “Bucket Policy”.
- Add the following Bucket Policy and then Save
"Resource": "arn:aws:s3:::www.uza.com/*" //your bucket-resource name.
"Principal": "*" section of the bucket policy. This part of the policy opens up our bucket to anyone in the world. Any object in this bucket is available to the public via the S3 website url. Don’t put anything in this bucket that you’re not willing to share with the world.
Upload files on S3 bucket
- Navigate to S3 in the AWS Console.
- Click into bucket “www.uza.com” .
- Click the “Upload” button.
- Drag and drop or select “Add files”, and add the entire static website directory.
- Click “Next”.
- Click “Upload”.
Validating the website is functional
Using static web hosting
After uploading our website files with its directory structure now lets check, by navigate to
Properties of our bucket and click on
Static website hosting. There will be an url for our bucket content. Click on that it will redirect to homepage of our website.
Connecting domain with a CNAME record
After uploading our files on S3 bucket now to load our website as “www.uza.com or uza.com” we have to do mapping from our domain name www.uza.com to our S3 website url http://www.uza.com.s3-website.us-east-2.amazonaws.com. This mapping is often referred to as a CNAME record inside of our Domain Name Servers (DNS) records. As it does not provides any types of security certificates we have to pay some charges for including that secure certificates into our website.
AWS Cloudfront is an AWS service to cache the static website content in multiple locations around the world. This ensures that the content is delivered to the users at faster speeds. It can also act as a CDN for your websites if you host the static content on an S3 bucket. Additionally, Cloudfront also helps in terminating the connection with an SSL encryption. This means you can hit an HTTPS URL to access your site easily.
Follow the below steps to connect the bucket with Cloudfront:
- Navigate to AWS Services, goto Networking and Content Delivery and select Cloudfront.
- Click on
Create Distribution, Select the delivery model as
Why Web distribution?A web distribution is used for static and dynamic content while the RTMP distribution is optimal for streaming media files using Adobe Flash Media Server’s RTMP protocol. We are having static website so we are going to use Web delivery model.
Origin Domain Name dropdown list will be there which consist a list of S3 bucket url’s.
4. Then we can keep rest of the properties of
Create Distribution unchanged.
Click on Create Distribution it will take 10-15 minutes to deploy Cloudfront distributions.
6. After deployment it will have a domain name associated with it.
7. Copy that domain name and paste into url of browser and access it with our index.html
Your static HTML site should now load up with Cloudfront URL as well. To connect your domain to cloudfront, all you need to do is modify the CNAME record and point it to the Cloudfront URL.
AWS S3 is an elegant way for static website hosting over the cloud. It is not only fast but also scalable to serve growing list of visitors. It helps you get rid of any sort of server maintenance issues, infrastructure costs or downtime tensions. It is billed per GB of data and traffic which makes it an excellent service for the beginners. So what are you waiting for? – Host your static sites on S3 now!