pfy.ch

home / programming / hosting-static-on-aws.md

$0 Static site hosting with Amazon

Nothing beats hosting your website on your own personal server, however, this is not an option for a lot of people due to either complexity or cost.

Part of my current job involves me working with Amazon Web Services infrastructure (basically fancy servers). By taking advantage of Amazons free tiers, it is possible to host your own static webpage entirely for free with very little programming know-how!

This guide will assume you know nothing about Amazon or about HTML. We’ll start by building a simple HTML page, and then we’ll deploy it to Amazon manually. This is all you really need! However, afterwards, I’ll walk you through setting up Budgets in AWS Cost Management to avoid any bills over a dollar (just in case!).

Update 2023/01/05: I’ve release some scripts which automate almost all of this, you can check out the docs specific to those scripts here.

How is it free?

Amazon Web Services (AWS) is behind an extremely large chunk of the internet as a whole and is one of Amazons main methods of revenue production, this allows Amazon to benefit from economies of scale. Basically, they have so many large clients that they are able to offer extremely generous free tiers to smaller users in the hopes that eventually they’ll scale up and start paying, or they’ll recommend AWS to their employer or company.

Since we’re just making a personal website, this generous free tier will let us host whatever we want for very little!

Let’s break down the potential costs really quick:

For storage, you get the following for free every month:

After going over 5 GB, you’re charged $0.023 per GB over. For a simple personal site, you’ll never go over this storage limit.

20,000 requests refers to any files your site uses, if you just have a single HTML page that means 20,000 people can view your page monthly. However, once you exceed 20,000 requests you’re charged $0.0004 per 1000 extra requests (yes, that’s the right amount of zeros!).

We can add caching to lower the amount of requests made, caching basically saves frequently accessed files by users to avoid people “double getting” a file. This makes the site feel faster to them and saves us money!

Amazons Caching service is free up to 1 TB and 10,000,000 requests. Once you exceed 10,000,000 requests, you pay $0.0075 per 10,000 requests after.

Later in this guide, we’ll set up a Budget on Amazon to alert us via email if any of these values are about to go out of the free tier.

Making a basic HTML site

This won’t be a guide on how HTML works, or a guide walking you through designing your own website. HTML can be super fun, and I really recommend using Mozilla’s MDN for explanations on what everything does.

Using any text editor, preferably something like vscode if you’re a beginner. Create a file called index.html inside its own folder on your computer somewhere safe.

Inside this file, paste the following:

<html lang="en-US">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>My Personal Page!</title>
    </head>
    <body>
        <h1>This is a heading!</h1>
        <p>This is a paragraph</p>
    </body>
</html>

There’s some super basic stuff in here, and hopefully you can sort of figure out just by looking at what all of these do (don’t worry about the meta stuff for now!)

If you save this file, and then open your File explorer and double-click on it, it should open a super simple webpage in your browser of choice!

If you want to learn more about HTML, check out Mozilla’s beginners guide, once you’re comfortable with HTML, you can start making it look pretty and custom by using CSS, Mozilla also has a beginner guide for this available!

Creating an AWS account

Creating an AWS account is super quick!

  1. Navigate to the AWS homepage
  2. Click “Create an AWS Account” in the top right of the page
  3. Enter your email address and pick an account name
  4. Click verify email address and enter the code sent through to you
  5. Pick a secure password! I highly recommend making this 16+ characters long with numbers and special characters. Make sure to write this down somewhere!
  6. Once this is done, select “Personal account” and fill out your details
  7. Enter your credit card details
  8. Enter your mobile number again to receive a text confirmation code
  9. Select the Basic Support free tier

You should now be re-prompted to log in.

  1. Select “Root user” and enter your email address.
  2. You’ll then be prompted to enter your password.

Once this is done, you’ll now be on the AWS Console. In the top right to the left of your name you should see a list of regions. Select the region closest to you.

Deploying your website manually

You could use a toolkit like Serverless to automatically build a CloudFormation and manage your website, however that is out of scope for this guide. We’ll be deploying manually for now.

Deploying to S3

Navigate to S3 in the Amazon dashboard and click “Create Bucket”. You can name the bucket whatever you want, but it must unique globally (meaning nobody else is using this name). Make sure the region is the one closest to you.

  1. Uncheck “Block all public access” and then tick that you acknowledge the risks.
  2. Leave everything as is and click “Create bucket”

Next, navigate to your bucket by clicking its name.

  1. Click on Permissions
  2. Scroll down to Bucket Policy
  3. Click edit
  4. Paste the following (and replace “your-bucket-name-here” with your buckets name):
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name-here/*"
        }
    ]
}

Once this is saved:

  1. Navigate to “Objects”
  2. Click upload.
  3. Click add files
  4. Select all your site’s content.
  5. Scroll down and click Upload.

Once the upload is complete, close the upload popup by clicking close in the top right.

  1. Navigate to “Properties”
  2. Scroll to the bottom.
  3. Click “Edit” on static web hosting.
  4. Enable static web hosting.
  5. Inside the index document input type: index.html
    1. Add an error document if you’ve made one, this will be your 404 page!
  6. Click save changes.

If you scroll down to the bottom again, you should now see a URL, this is your site however it is not caching, We’ll set that up now.

Setting up CloudFront

From the Amazon dashboard home, navigate to the service called CloudFront. You may have to search for it using the top search bar.

  1. Click “Create CloudFront distribution”
  2. Select your S3 bucket from the origin domain dropdown.
  3. Scroll down to settings
  4. Set “Default root object” to index.html
  5. Click “Create distribution”

This will take a few minutes to deploy. Once deployed, you can navigate to the CloudFront domain displayed in the distribution to view your site! If you make any changes to the site and want to clear the CloudFront cache, you can optionally do the following:

  1. Navigate to “Invalidation”
  2. Create new Invalidation
  3. Type /*
  4. Click create

CloudFront will automatically invalidate eventually, so this is optional.

Setting up an Amazon budget

To avoid any surprise bills, you can set up an Amazon Budget. Go back to the Amazon Dashboard and Navigate to “AWS Cost Explorer”, you may need to search for this.

  1. In the left sidebar, near the top, click Budgets.
  2. Click “Create a budget”
  3. Select “Use a Template” and then “Monthly Cost Budget”
  4. Give this budget a name
  5. Set the max you ever want to spend (I set this to a dollar).
  6. Under email recipients, put any emails you want to be alerted if you’re about to hit this budget.
  7. Click “Create Budget”.

You’ll now receive an email at 85% of the budget and a 100% of the budget.

Domains

Amazon offers a service called Route 53 which can manage your DNS as well as buy a new or manage an existing domain directly. This service costs $0.50 a month per domain, but makes connecting URLs to Amazon services and managing SSL certificates crazy easy. I will not be going in depth on this since there are plenty of guides online.

In closing

You’re all set up with a static webpage! Do note that this site is static, meaning that all the code and content is pre-written. You cannot use a service like WordPress or Ghost to manage blog posts or pages. If you wish to stay free, I recommend avoiding services like EC2 & Amplify, as they can quickly get out of hand if you’re unsure what you’re doing.

I use a command line tool called Pandoc to convert my posts into HTML, which I write and store as Markdown in Obsidian. I’ll eventually release the scripts I use to automatically convert my Markdown notes to this site.

Eventually I plan on making a guide soon for how to host an API for free using AWS Lambda, I’m aware that using a service like GitHub Pages will also allow you to host a static site for free but by keeping everything under AWS it makes connecting domains, SSL and eventually linking up an API all extremely easy (and extremely cheap).

If you have any questions, please feel free to email me. However, please do some research on your own before reaching out! Mozilla’s MDN is a great resource, and so is Stack Overflow if you have any generic questions.

© 2024 Pfych
✉️ contact@pfy.ch
📡 RSS