Technical Tutorial: Hosting a Static Website using S3 Part 1 of 2

Technical Tutorial: Hosting a Static Website using S3 Part 1 of 2

Every day in our lives, we are dependent on the world wide web for a various number of reasons. We might want to scroll through the daily news, find information for research, or even binge watch a TV series on Netflix. But did you ever want to add your own static website to this vast database for a cheap price? If so, keep on reading this article.

Introduction:

Hosting a static website for either a small business or for a personal portfolio and claiming an online presence can be very expensive. For example, wix.com premium subscription plans(subscribing removes ads and wix watermark) start from $13 a month and other website builders charge about the same, too. But now, this is the time AWS Micro-services such as S3 come to the rescue.

S3, Wait What?

S3, or Simple Storage Service, is an AWS-offered object storage service that offers industry-leading scalability, data availability, security, and performance(Courtesy to AWS for definition). Think of it as Google Drive or iCloud, where you can store files such as photos or documents(objects), but without the easy to use user interface. In fact, Dropbox uses S3 as the backbone for its storage provider. But there are a few key differences between this AWS micro-service and the more customary cloud storage providers. First, S3 not only charges you for its storage, it also charges you for requests such as website requests(don’t worry, though. S3 charges about 2 cents per gigabyte of storage and barely a hundredth of a cent for outbound requests. Click here to learn more about S3 pricing). Also, unlike your customary storage provider, S3’s storage capacity is pretty much unlimited. Lastly, S3 follows AWS cloud principles and is 99.999999999% durable and 99.99% available, so anything you store on S3 is very accessible and very unlikely that you will lose any data. So not only is S3 perfect for storing enterprise data around the world, it is a perfect place to host your simple, static website.

Prerequisites:

So now that you have a basic understanding of how S3 works, we can now start building and hosting a static website. But before we get our hands dirty, be sure that you have these resources and skills at hand:

  • An AWS Account. (If you don’t have one yet, click here to learn how to make a free tier account and operate the AWS Console)
  • A basic knowledge in HTML and CSS to build the website

Part 1: Creating and Designing the Website

For this part of the article, I won’t be providing specific instructions on how to make your HTML page. The best way to approach making a website is choosing a theme. Colorlib and Themeforest have many HTML themes, free and paid, that would be suitable for a wide variety of use cases. But do not rush searching for a website theme. Try out a couple of demos, see if the overall look and feel of the theme is appealing to you and fits the use case, save a few themes, and finally, download your best theme HTML file. Also, for additional built-in responsiveness, I would recommend bootstrap themes. Lastly, know how much money you need to spend or if you even need to spend any money at all for your theme. For example, if you really like a free theme, just download the free theme and don’t even think about paying for a theme until the necessity arises. The next step in the website brewing process is to edit the HTML code to fit your vision. Most of the web designing will be content writing and inserting media, but you sometimes have to leverage the CSS and JavaScript to craft the perfect UI. But for those of you who do not have prior experience in HTML/CSS or would just rather use a visual editor for your website, there is an alternative way to design your website for free: you can just download the WordPress CMS on your computer’s Apache XAMPP server and install WordPress plugin called PageBuilder to easily build your website. Then, you can use a WordPress plugin called Simply Static to export your WordPress Site as a HTML. Once you have your website HTML file customized like you want it, feel free to move on to the next part of this article.

Part 2: Hosting the Website using S3

Image Credit to dev.to

In this part of the article, I will be covering how to upload your website files to an S3 bucket, enable static website hosting, and allow public access to your bucket so the whole world can see your website. The first step is to login to the AWS console. Tip: The most secure way to sign in to your console is by using an IAM user. If you haven’t already, click here to learn how to make an IAM(Identity Access Management) user using your root account. Once you have logged in to the console, click or search up “S3” to pull up the Simple Storage Service. The S3 landing page should look like this:

Note: I have created a few buckets for other applications, so if you have never used S3, you will start off with no buckets.

Then, click on “Create bucket”. Here are some steps on how to create it.

  1. If you are creating the bucket for testing purposes or do not want to use it with a domain, type any unique name for your bucket that fits your intended use. But if you want to integrate your bucket with a DNS provider, preferably Route53, the name of your S3 bucket should be your domain name, with the domain ending, but without the www. For example, your bucket name could be “myawesomewebsite.com”. Note: You cannot change the name of your S3 bucket once your create it
  2. Set the region according to your nearest location. For example, if you live in India, set your region to Mumbai Asia Pacific; if you live in eastern U.S., set your region to U.S East North Virginia. 
  3. For the bucket ACL(Access Control List), be sure to uncheck the box that says “Block all public access”. This gives your bucket potential for objects to be public.
  4. Click “Create bucket”

Now that you have created your bucket, you can upload your website files into it. But your website isn’t fully deployed yet. Just unblocking all outside traffic doesn’t make your bucket public; it just gives objects in your bucket the POTENTIAL to be public. The second step in configuring your S3 bucket is to enable static web hosting. To do this, click on your bucket, then click on properties, and enable static web hosting. This generates a unique subdomain for your bucket and makes it function more like a website.  For reference, you can see how I configured my bucket down below:

Note: if your website’s index page or error page isn’t named index.html or error.html respectively, be sure to specify those names so S3 knows where to land when you enter the web address.

The last step in making your static website public is editing the bucket permissions to allow all web traffic. To do so, go to the “Permissions” tab and click on “Bucket Policy”. Right now, there should be no code in this text box. Copy the code below into the text box.

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
        }
    ]
}

What this JSON does is it tells AWS IAM, the service that determines user access to corresponding AWS micro-services, to allow the whole world to access this bucket. Be sure to replace the <YOUR_BUCKET_NAME> with your actual bucket name and hit save once done. Now, you can access your bucket using any device. Try accessing it using another web browser, your phone, or another device.

So there you have it. You created a static website using HTML/CSS and hosted it using S3. In the next technical tutorial, I will explain how to route a domain to your bucket and add an SSL certificate to your website. The possibilities of the online world are endless, and developing an online presence for yourself or your business can have limitless benefits.

To continue paving the path for a more accessible website, click here for the second part, where we will register a domain name, set up a DNS distribution, and secure an SSL certificate

Ravi Tej Guntuku

Ravi Tej Guntuku

My name is Ravi Tej Guntuku, and I am currently an 8th Grader at Bee Cave Middle School. My favorite subject in school is Math. Solving for x and y and finding the relationships between geometrical figures jump-starts my brain. Apart from school, my other hobbies include writing, playing tennis, and programming. That's all for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: