Creating your own static website

By: on May 29, 2020

There are basically two types of website—static and dynamic. A static site is one, usually written in plain HTML, with unchanging content, meaning every visitor to the website will see the same thing. A dynamic site is one written using server-side scripting, which allows the user to interact with the page and for the page to be personalized for the user.

Static sites are simple to set up, but creating one yourself can still be difficult without a guide. After I muddled my own way through setting my static website up, I decided to write this blog to help others in my situation. This post is intended to be a guide for complete beginners, which can get anyone from having nothing to having their own static website in just an hour or two!

Disclaimer: Your website will be fully public. You will have to pay ~$10 for your website each year. You may need basic AWS knowledge to follow this post. I have little experience in setting up websites, so this is not a guide for experts; this is a guide for people who have a few hours to kill, and want to set up a website of their own without using pre-existing frameworks (which make this much easier, and is the method I would recommend for setting up any website you want to be used).

The steps we’re going to take are:

1. Buy a domain name. This is where your website will be (e.g. google.com is a domain)
2. Create an AWS account
3. Set up an S3 bucket on AWS. This is where the content of your website will be stored
4. Set up routing. This will link your website content to your domain

So now, more detail on each step:

Step 1—Buy a domain name

This domain name is where your website will live.

You need to own the location that you are displaying to, so you’ll have to buy it. Some websites to buy domain names from are www.gandi.net, AWS and www.namecheap.com. I choose the domain name kristahyer.com and bought that from namecheap.com.

You should be slightly careful where you buy from. A benefit of using namecheap is that it won’t display your personal contact details to people querying your domain. Go ahead and type

whois kristahyer.com

into your terminal—you won’t see my personal info in the result. This protection is pretty common, but you should still confirm that your domain owner will do this.

Step 2—Create an AWS account

Your website content is going to be stored in S3 (AWS’s document store), so you’ll need your own AWS account in order to set that up. Just create a basic personal account at aws.amazon.com/console. Don’t worry—this is free.

Step 3—Set up an S3 bucket on AWS

S3 is AWS’s document store, and it’s where you’re going to store your website content. Before you set this up you should know—you may be billed for S3 usage. It depends how much data you’re storing, and how popular your website is. For my simple example I don’t expect to be billed, but if you are setting up a large and popular website you will have a higher S3 usage than me, so you may be billed. Read some details about S3 billing.

S3 lives here on amazon.com. So, go there and create a bucket in your desired region. (The region you choose can have effects on things like price, so it’s worth considering. I just want to get started, so I just chose a bucket geographically close to me in the UK.) This is easy to do, just click on ‘Create Bucket’ and create a bucket with the same name as your domain. Your bucket name must be the same as your domain! So, I created a bucket called ‘kristahyer.com’, since that’s the domain I bought.

Create endpoint button

Configure bucket for hosting website

Then you need to configure your bucket for static website hosting. AWS makes this easy:

  • In properties, under Static Website Hosting:
    • check the ‘use this bucket to host a website’
    • define the index document to be index.html
  • In permissions, allow all public access

Change bucket access

Change bucket access

You have now enabled public access to your bucket. This means the public could see anything in your bucket. Do not put anything you are not OK with the world seeing in this bucket.

Now you have an S3 bucket to hold your website content, you need to upload that content. Almost all static websites store their content in HTML, so that’s what I’ll describe here. I want my website to be a very simple website called ‘My First Web Page’ which will just display the text ‘Hello World!’. Below you can see the contents of my file, which I uploaded to my bucket. When uploading:

  • I made sure that this file had full public access (under the permissions section) so that it can be viewed publicly
  • I named my file index.html, since that’s what I configured my bucket to expect (described in the above steps)
Hello World!

You just need to write your html, and upload it, following the same naming and permissions steps I followed. You can make your html as simple/complex as you like. This is a good website for checking what your html will look like – webtutorialplus.com/html-code-tester. There’s no need to worry about getting your website perfect at this stage though; you’ll be able to update it at any time by just reuploading a new file to S3.

Once you’re done the above steps, you should be able to access your webpage at your bucket’s endpoint, which is shown in the “Static website hosting” tab under the “Properties” section of your bucket. Your endpoint should be something like http://domain.s3-website-region.amazonaws.com. Below is a screenshot of an old one of mine, you can see the endpoint of that bucket was kristahyer.com.s3-website-ap-southeast-2.amazonaws.com:

Bucket endpoint location 1

If you see a lack of permissions error after clicking on your endpoint address, then confirm that both your bucket and your document inside it (index.html) are publicly accessible, since that’s probably what’s causing this issue.

Step 4—Set up routing

So, your website is set up! But right now it can only be accessed via your bucket endpoint, and you probably don’t want that. I bought the domain kristahyer.com, and I want people to see my website when they go to www.kristahyer.com.

So, now you need to set up routing rules so that searches for your chosen URL end up going to your bucket endpoint and displaying your website content.

This step isn’t one-size-fits-all, since how you set up routing depends on where you bought your domain from. Most online instructions on setting up routing for a static website on S3 will point you at this AWS guide—RoutingToS3Bucket. But as far as I can tell, that will only work if you bought your domain from AWS. Since I bought mine from namecheap.com, I need to set up my DNS differently.

I followed these steps:

  • I recreated my bucket, keeping it identical except for giving it the new name www.kristahyer.com, since that’s the URL where I want my webpage to be displayed.
  • I then logged onto my namecheap account, went to my domain list, and clicked “manage” for my domain kristahyer.com. Going to “Advanced DNS” under “HOST RECORDS” I saw the placeholder routing rules for my page. If you have already set up other routing rules you would see those here instead.
  • I took the bucket endpoint from my new bucket and, using it as a base, created two new rules. I also removed the placeholder.

Bucket endpoint – https://www.kristahyer.com.s3-website-ap-southeast-2.amazonaws.com.

New rules:

Type Host Value TTL
CNAME Record @ kristahyer.com.s3-website-ap-southeast-2.amazonaws.com 5 min
CNAME Record www www.kristahyer.com.s3-website-ap-southeast-2.amazonaws.com 5 min

Screenshot showing where the bucket endpoint was seen:

Bucket endpoint location 2

Screenshot of the rules I set up:
DNS rules for static website

I then waited for my DNS rules to take effect. namecheap warns that this can take up to 48 hours, but for me it took less than half an hour.

And that’s it. Congratulations! Your webpage should now be visible from your desired domain.

Here you can see my Hello World website, visible at kristahyer.com:

Hello World website

Now that you’re all set up, there are more steps you can take to make your webpage more advanced. For example, you could create more buckets and routing rules to redirect more URLs to your website, you could track who was visiting your webpage using AWS logging, or you could set up your website in a more sensible way using pre-existing tools. But this post just involves basic setup, so I’m leaving it here. If you are interested in setting up a dynamic website, see my follow-on blog post, ‘Creating your own dynamic website’, which will be posted next month.

Happy websiting!

Share

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*