Amazon Simple Storage Service (S3) is a web service offered by Amazon Web Services (AWS) for storing and access to objects via the internet. S3 offers websites, web services, and mobile applications the ability to upload data and store it on its servers in the United States. It operates over HTTP/S using TCP-based protocols. The use of S3 is free for both put operations (storage) and GET requests (retrieval).
Opening a bucket to receive or store objects requires not only a special encryption key but also a shared key which is provided by Amazon after the account has been created. Users can sign up for an account at no charge that provides 5GB of storage space each month with no limit on how much can be stored in buckets.
Amazon S3 provides 99.999999999% durability with data being stored across multiple facilities for redundancy. Amazon S3 uses the same replication technology that Amazon uses to ensure data availability of its own site. The service aims to optimize throughput and costs based on the application used and the amount of data stored while providing protection from loss of data.
There are also features that allow users to view analytics on how much data is being uploaded or downloaded via S3, control how much bandwidth is being used, or take advantage of mobile-enabled solutions. Amazon S3 is available over the Internet at no charge to the users. The data transfer rates are unlimited. Data can be retrieved from anywhere in less than 1 second with low latency, which allows for near real-time access of resources. It also eliminates hosting fees and capacity planning by providing an alternative cloud storage option that does not require constant capital investment to host resources.
Amazon S3 supports objects of any type, size, and format. Objects can be stored in any bucket but must be accessible via the name of the object. Users can upload files and folders from in-house systems and public ones via HTTP or HTTPS to buckets that support the integration of NFS (Network File System) or POSIX file system features. Users have direct control over who accesses their buckets by sharing up to 70 GB of storage space with another user (created through AWS) who has an account on Amazon S3.
Creating a website can be a daunting task. There are so many options and choices to make that it’s easy to become overwhelmed. But what if you could create a website without having to worry about hosting, domain names, or setting up a server? With Amazon S3, you can easily create a static website using nothing but your computer and an internet connection. In this blog post, we’ll show you how to set up your own static website using Amazon S3. We’ll also discuss some of the benefits of using Amazon S3 for your website. So let’s get started!
Prerequisites
In order to create a static website using Amazon S3, you will need:
- An Amazon AWS account to configure your website on Amazon S3. This demo uses the Free tiered Amazon account, which is free and only has the huge benefits when combined with an Amazon S3 static website.
What Will We Do?
In this guide, we will create and configure a simple static website using Amazon S3. We’ll also go through configuring that static website with a custom error page. This guide will show you how to create an HTML, CSS, JavaScript website that’s easy to maintain and very cost-effective.
A static website is a website that only consists of static pages. It does not contain any server-side scripting language like php, asp or nodejs. It only consists of one html file where all the webpages are stored. Static website hosting is not new, it has been around for a long time.
By using a static site, you don’t have any kind of hackers to worry about and you only need the ability to serve webpages. When combined with Amazon S3, the cost is minuscule, like one or two dollars per site. You then can scale your web pages to meet the needs of your audience with millions of readers from there.
To host a static website, you create an Amazon S3 bucket.
And then upload your content to that bucket.
Public read access of your S3 bucket must be intentional. It’s important that everyone everywhere can read the bucket. And we’ll discuss this later in this guide, where we look at the bucket policy.
The website will then be available at the AWS S3 endpoint, which will look something like the URL below.
We have a link to the GitHub repository where you will download and use for all files necessary to complete this step-by-step guide. Are you ready? Good. You can go ahead and log in to your AWS Console.
Creating an S3 Bucket
Before you can create your static website, you need to first create and configure an S3 bucket. When you create your static website using Amazon S3, your site will be stored inside that bucket.
1. On your AWS Console, navigate to S3 dashboard —> Create bucket.
2. Provide a unique Bucket name(my-howtoforge-bucket-7Vftzchzw). Ensure that your bucket name is unique. Bucket names can contain lowercase letters, numbers, and hyphens only. S3 Bucket Name must be unique across all of Amazon S3 to prevent someone else from creating a bucket with the same name and overwriting your website. Also your path needs to be DNS compliant, as no two domains can have the same name.
3. Unselect the Block all public access checkbox. If you want to keep your website private, select this checkbox. If it’s selected, only authenticated AWS accounts will be able to access your website. In this case, we will unselect this checkbox to make our example public. So anyone can retrieve our html files from the S3 bucket, and see our web page. Select the I acknowledge that the current settings… checkbox.
4. Click on Create bucket at the bottom of the page.
5. You will get a green message that reads “Successfully created bucket” with the details of your new S3 Bucket. Click on your bucket name —> Copy ARN. Amazon Resource Name (ARN) is a unique identifier for an AWS resource. When you create an S3 bucket, Amazon generates a unique ARN for the new bucket. To make sure your AWS resources are secure, Amazon requires you to use either your own unique identifiers or Amazon-generated ones when creating or modifying resources. You will use this ARN to keep track of your bucket and create your static website.
6. Click on Upload —> Add files —> Select the files you dowloaded earlier —> Upload.
Uploading your website is the easiest part of setting up a static site using Amazon S3. The upload process might take a few minutes to complete. Once it’s finished, you can see the green Succeeded message.
Enabling Your Static Website Hosting
Now that your website is uploaded to Amazon S3, you need to enable your website so it can be viewed. Static Website Hosting allows you to serve static HTML, CSS and JavaScript pages from a web server that is designed for static content. It’s more cost-efficient that dynamic web pages (e.g PHP or ASP).
Static website hosting can be used to serve different kinds of files like images, CSS, JS and other static files. These files do not change very frequently and are easy to be served at a really low cost.
1. Click on Properties —> Static website hosting —> Edit —> Enable.
2. Click on Enable —>Choose Hosting type as Host a static website. Fill in the Index document as index.html, Error document as error.html. Scroll down, and click Save changes.
When you enable website hosting, you must upload an index document. The index document is the first file that users see when they access your website by using the root domain name, for example, http://my-bucket.s3.amazonaws.com/.
If you don’t create an index document, or if you delete it later, Amazon S3 returns either a 404 error page or a default index file. The default index file might display the bucket name, date of last access, and other generic information. The index document name is case sensitive and must exactly match the name of the index document that you upload to the site root, so make sure that your index document name is spelled correctly.
The Error document is the page that users see if an error occurs while attempting to access your website. This file is optional but recommended. When you don’t upload your own custom error document, Amazon S3 returns either a default 404 error page or the index document, if it exists. The error document name is also case sensitive, so make sure that the name of the error document you upload is spelled correctly.
3. You will get a green Successfully edited static website hosting in the AWS S3 panel when you enable static website hosting for your bucket successfully. You also see the bucket endpoint of your site. It’s your bucket name, followed by s3.website.yourregion.amazonaws.com.
4. Open that URL in your favorite browser, you will get a 403 Forbidden message. That’s because the proper policy is not assigned. We will set an appropriate policy to access your bucket in the next step.
Setting Up Proper Bucket Policy
Now that you have enabled your website hosting on Amazon S3, you need to set a bucket policy to access it. A Bucket Policy is a set of permissions for accessing an Amazon S3 bucket. In order to access your website from the public, you will need to add a Bucket Policy to allow public access to your bucket.
1. In your S3 dashboard, click the Permissions tab —> Edit.
2. Copy and paste the lines from this JSON file into the JSON editor. Replace with the actual ARN you saved earlier.
- Version: 2012-10-17 is the version of the bucket policy.
- Statement: PublicReadGetObject is the action that is to be performed on all objects in the specified bucket.
- Principal: The Principal element specifies the AWS account, IAM user, or group that is allowed to perform the specified action on the object. If there are multiple principals identified in the statement, then you should specify which one can ‘Take Action’ by setting the Action element to Allow or Deny.
- Action: The Action element specifies the type of access allowed.
- Resource: The Resource element specifies the object to which the permissions are applied.
- In this case, we set up a PublicReadGetObject rule which allows everyone to access your bucket and pick up any object(s3:GetObject) in the bucket. Hence the asterisk * in the Principal line. The asterisk * in the Resource specify that the S3 Bucket Policy applies to all objects in the bucket. Ensure that after you edit the policy, the asterisk must be at the end as shown.
3. Click on Save Changes when you are done.
Now your bucket is publicly accessible, as shown below. You can see that your policy takes effect immediately.
Testing Your Static Webpage
Now that you have set up your Bucket Policy, you can access your static web pages by opening the Endpoint URL in your browser.
1. Navigate back to your browser where you opened the S3 Bucket Endpoint URL earlier. Reload the S3 bucket endpoint URL, and this time you should see the 404 Error is gone. If you see the 404 error it means something is wrong with your bucket policy. Your static web pages will be shown up in the browser, as shown below. You should see a nicely formatted HTML version of your page now.
2. You can also test the error web page by going to a non-existed URL, the error web page you uploaded previously should be displayed, as shown below.
Conclusion
In this guide, we covered how to host your static websites on Amazon S3 for free. This guide also covered the entire process of uploading the website, setting up the proper bucket policy and enabling static website hosting. This guide is a simple way to host a website for free at a low cost. The cost charged by Amazon S3 is very less as compared to other services.
Did this article help you? Was it easy to understand? You can share your opinion by leaving a comment below. With this newfound knowledge under your belt, you can now automate static website deployment to Amazon S3.
