Close

How To Host Your Website For A Low Cost on S3

There are many ways to host a website. While services like Wix and Squarespace are common solutions, they're not the most cost effective..

To give you an idea, Millennial Moderator costs around USD $0.60/month, with a $12/year domain registration fee. Comparatively, Squarespace and Wix can cost anywhere from $12 to $40/month plus the $12/year domain registration fee. That could be a massively detrimental amount of money if your business is not yet profitable. So how exactly are we doing it?

We host our website using Amazon Web Services. They offer various cloud computing tools including EC2, S3, Route 53 and many more. Today, I’m going to show you how you can host your website using just the S3 service.

1. Setting Up Your AWS Account

First, you need to have an AWS account. If you already have one, you can skip to step 2. AWS accounts are free to open, and you're only charged for on-demand usage of services. Each service is different but to give you a general idea, the EC2 service charges as low as $0.02 per hour (we won't be using this). To open a new account, follow the registration steps here. You will have to enter some personal information including your phone number and a valid payment method.

  • Disclaimer: When you open a new account, you will see a $1.00 holding charge on your card. Don’t worry, this is just a temporary hold to validate your card, and will be removed from your statement within a few days.

2. Register Your Domain

Log into your AWS account and navigate to the Route 53 service. You can search for it by selecting “services” in the top left corner of the dashboard. This is where you will go through the process of registering a domain. Start by searching for the domain you wish to have and, if it comes up as available, proceed through the purchasing details and complete the purchase. This domain is registered on a yearly basis, so the $12.00 you spend today will be good for the next year.

3. Set Up Your S3 Bucket

Now that you have your domain, we will need to set up the S3 bucket where the actual website information will live. Navigate to the S3 service console by clicking "services" at the top left corner of your AWS dashboard. Once the S3 console loads, click the “create bucket” button and name it after the full domain of your website. For example if my domain is "millennialmoderator.com", I would name my bucket exactly that same thing: "millennialmoderator.com". Continue through the other options and finish by clicking the “create bucket” button at the end.

4. Upload Website Directory

Now that you have a domain and a place to store your website data, the next step is to fill your site with content! If you’ve never written HTML or CSS, this will be a learning opportunity for you. You can download HTML website templates from various websites like this one. The important thing is that your directory needs to look something like the image below. All a website really is, is a collection of files in folders.

Select your S3 bucket and upload your website directory (all the folders/html files) right into the bucket. AWS will show you a pop-up of all the files you're uploading. Choose “upload”. Now you should see all of your files within the S3 bucket of your domain name like so.

5. Update Bucket Permissions

In your S3 bucket, select the permissions tab near the top. Once there, click the “bucket policy” box and copy paste the following code. This code allows the bucket to be read by anybody- we want people to be able to view the website.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::yourdomainname.com/*" } ] }

Note: change the “yourdomainname.com” to fit the exact name of your bucket, which should also be your domain as we set in step 3. You will get a warning that your bucket is public- this is expected. See final result image below.

6. Configure Bucket for Static Hosting

Now select the properties tab near the top of your S3 bucket settings. Select the box that reads “static web hosting” and input the name of the index file that you uploaded in step 4. This file is the HTML of your website and will most commonly be your home page. Most people call this page “index”, but you can call it whatever you like. Click save. Now when you click on the static webhosting box again, you will see an Endpoint link. Click on it. You should now see what your website looks like!

  • Note: if you get any sort of error, double check that the index document has no typos in it, as this is where the bucket will begin loading your webpage. Also if the layout of your website is not how you intended, you will need to go into the html/css documents using a code editor (or just notepad works) and make necessary adjustments.
  •  

  • Extra: I suggest also opening a second bucket and naming it “www.yourdomainname.com”, so that if someone searches for your website with the www portion, it will get redirected to the correct place. Go to this new bucket, select the properties tab > static web hosting > redirect requests and write the name of the first bucket: youdomainname.com.

7. Update Your DNS

Now we have to point your domain to the bucket, so that when people do a Google search for the domain, it goes to the right place. Navigate back to the Route 53 console (top left of dashboard - services) and select “hosted zones” from the left side panel. Click on your domain name and select the button “create record set” at the top, which will open a right side panel to configure DNS settings. This is where you will configure your domain to point to the bucket where your website content lives.

  • Leave the “name” section blank
  • Leave the type the same- A-IPV4
  • Alias, choose YES.
  • In the Alias target, select the name of your s3 bucket endpoint, it should be something like this: s3-website-us-east-1.amazonaws.com.
  • Leave the rest of the options as they are, and select “save record set”.

8. That's it!

Now it may take a few minutes for the DNS to populate up, but you should very soon be able to type in your domain name into a web browser and voila- your website appears!

Note: to monitor your AWS billing information, you will want to use the billing console, which you can find my selecting your name at the top right of your AWS dashboard and selecting “billing dashboard”.

If you found this guide informative and helpful, please consider sharing it using the social media icons below. Also, check out our latest Millennial Moderator articles on our home page!

Tagged in : TechWebsite

Aleksey Weyman

Aleksey Weyman is a web designer, artist and creator of Millennial Moderator