Part 1: Create Your Own Personal Website on AWS

Photo by John Schnobrich on Unsplash

Yes, you can also create your website with Wix, Squarespace, WordPress, and other website hosting companies but if you want to learn how services work in AWS, and understand what is needed technically to build a website, this will be a great learning project for you.

Note: This tutorial does not go through how to design your website

This tutorial is divided into two parts.

Part 1

• We will walk through the basic website setup using the S3 service (bare minimum)

Part 2

• We will go into more bells and whistles if you want to set up your own domain, install an SSL certificate, and have your website be reached globally with low latency.

Pre-requisites

• You must have an AWS account already, if not please follow this documentation to help you get started.

S3 (Simple Storage Service)

Background - We will be using S3 to store our website code and use it as a static website hosting service.
Why are we using S3?
- Think of this service as a cost-effective storage system in cloud that has incredible performance, scalability, availability and durability
- You can story any amount of data and any kind of data
- Typical use-cases include static website hosting, storing data, data archival, analytics, and may more.

Creating your bucket

• Head to S3 service on your AWS console, click on create a bucket

Note: Think of each "bucket" as its own container to store a group of objects

• Bucket Name: Type in an S3 bucket name with the same name as your domain(if it is available) or if you are planning on getting one in future. For example — the domain I would like to get is saidilipponnaganti.com, I named my s3 bucket saidilipponnaganti
• AWS Region: You can pick whichever region you like, “us-east-1” is preferred.
• Block Public Access: We need this bucket to be publicly accessible along with the objects inside. Make sure “Block all public access” is unhighlighted like below. Just click on “I acknowledge” at the bottom.

• Leave the rest of the settings default for now and click on “Create bucket”

Upload your website code inside the bucket

• Inside your s3 bucket, we will be storing your code for the website. Like HTML, and CSS. Feel free to implement your own files or use a template provided by HTML5 UP

• Click on “Upload”
• Drag and drop your files
• Click on “Upload”
• Wait for files to be uploaded
• Close the status page once it’s successfully uploaded

S3 Properties

• Look for “State website hosting” inside S3 properties and click on edit.
• Select “Enable” for Static website hosting.

• Make sure “Host a static website” is selected.
• In the Index document — name your main (default) HTML file [Required]
• In the Error document — name the error file that you want your users to be redirected in case any error occurs [Optional]

• Save your changes
• If you head to the bottom under the properties tab, you should see a link that is hosting your website.

• If you click on this link, it should give you back a 403 Forbidden error meaning access is denied. Please don’t worry we will cover this in the next step.

S3 Permissions

• Head to the permissions tab, make sure you enable public access if you haven’t done so yet from the first step. It may give you a warning that some of your objects are becoming public, please proceed and type “confirm” in the dialog box.

• Next, apply the bucket policy displayed below in the bucket policy section of the permissions tab.

Why do we need to add a bucket policy?
- “To make objects in you’re bucket publicly readable, you must write a bucket policy that grants everyone s3:GetObject 
permission” ~ AWS.
So not only you have to disable “Block all public access” we have to add this policy as an extra step.

• Click on Edit and paste the following to the S3 console.
• Replace “BucketName” in the policy with the name of your S3 bucket.

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

• Save your changes
• Now if you go back to your link (formatted as “http://<yourbucketname>.s3-website.us-east-2.amazonaws.com) under the Static Website Hosting section in the properties tab, your website should pop up.

Cool right? Now you can share your web link with your friends.

If you run into any problems, please comment below and I will try to assist in every way.

Summary

• We used the AWS S3 service to host our static website
• We created a bucket (storage container) to store your content (code) that displays your website
• We enabled public access to our bucket and objects inside the bucket and created a bucket policy to allow read permissions
• We were able to access the website given the link from the s3 properties tab

You may be wondering the difference between static vs dynamic websites
Static (“means stationary or fixed”)
- "Generally created using HTML and CSS"
- “Fixed content that is displayed the same for every user”
- "Used for informational purposes"
- Loads fast
- Cheaper development costs
- Not generated on the server
- Code already exists within
Dynamic (“means capable of action or change”)
- "Used for functional purposes"
- “One that can display different content and provider user interaction” 
- Server side uses PHP, Node.js

Sources

Amelia - static vs dynamic
Geeksforgeeks  —  Static vs dynamic
AWS - for documentation

Optional settings you could enable (best practices) but may incur costs

• Enable Bucket Versioning — if you want to be able to recover from any accidental deletions of your files in S3, enabling this setting will help you create multiple versions of that object.
• Encryption of new objects — if you want your data at rest to be secured, and protect sensitive data from unauthorized access

Next Step

• Part 2: Add a Cloudfront Distribution, Buy a Domain and Request an SSL Certificate