Sai Ops
Published in

Sai Ops

Part 1: Create Your Own Personal Website on AWS

Photo by John Schnobrich on Unsplash
Note: This tutorial does not go through how to design your website
  • We will walk through the basic website setup using the S3 service (bare minimum)
  • 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.
  • 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/*"
}
]
}

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 websitesStatic (“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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store