Think - with -Tech: Amazon S3 Static Website Hosting

Monday, June 16, 2025

Amazon S3 Static Website Hosting | Overview & Hands-On.

Amazon S3 Static Website Hosting - Overview & Hands-On.

Scope:

Concept: Amazon S3 – Static Website Hosting,
Architecture of Static website Hosting with S3,
Key Features,
Setup (Step-by-Step)
(Optional) Configure Custom Domain,
Benefits,
Limitations,
Use Cases,
Project: Hands-on.
twtech- Use case: How twtech builts an hmtl file from its blog, uploads to S3 bucket for its Static host Hosted website.

Concept: Amazon S3 – Static Website Hosting

Amazon S3 (Simple object Storage Service) allows twtech to host static websites.
The hosted web site composes of only HTML, CSS, JavaScript, images, and other static assets — no server-side code (like PHP, Python, or Node.js).
twtech accesses its files directly from a s3 bucket, with a public endpoint via a browser.

Architecture of Static website Hosting with S3.

Key Features

Simple Static Hosting: Serve HTML/CSS/JS files directly from an S3 bucket.
Custom Domain Support: Integrate with Route 53 or another DNS provider to use a custom domain.
Error and Index Document Support: Define default documents like index.html and custom 404.html.
Scalable and Durable: Built on S3’s architecture, it offers 99.999999999% durability.
Global Reach: Combine with Amazon CloudFront for CDN delivery.
HTTPS via CloudFront: Add SSL/TLS by integrating with CloudFront.
Low Cost: Pay only for storage and data transfer.

Setup: Step-by-Step

Create an S3 Bucket

Name it the same as twtech domain (e.g., www.twtechapp.com).

Upload Website Files

Upload all static files (e.g., index.html, style.css, etc.).

Enable Static Website Hosting

Go to the Properties tab of the bucket.
Enable Static Website Hosting and set the index and error documents.

Set Bucket Policy for Public Access

Modify the bucket permissions to allow public read access:

# json

{

"Version":"2012-10-17",

"Statement":[{

"Effect":"Allow",

"Principal": "*",

"Action":["s3:GetObject"],

"Resource":["arn:aws:s3:::twtechs3/*"]

}]

}

(Optional) Configure Custom Domain

Use Route 53 or another DNS provider to point twtech domain to the S3 static website endpoint.
For HTTPS, set up CloudFront in front of the S3 bucket.

Benefits

Highly Available and Scalable
Cost-Effective for low-traffic and static content
Secure Access Control using IAM, Bucket Policies, and CloudFront
Integrated with AWS Ecosystem
Custom Domain & CDN Integration

Limitations

No Dynamic Content (e.g., server-side logic or database queries)
No Native HTTPS on S3 website endpoints (must use CloudFront for HTTPS)
Complex HTTPS Setup with custom domains
Limited Logging and Monitoring without enabling CloudFront or S3 logging
No built-in versioning for website unless versioning is explicitly enabled

twtech Use Cases

Personal Blogs (Think-with-tech) or Portfolios
Documentation Sites
Landing Pages or Marketing Pages
Single Page Applications (SPA) with frontend frameworks (React, Angular, Vue)
Frontend Prototypes or Demos
Error Pages or Maintenance Pages for larger systems.

Project: Hands-on

How twtech creates and host static websites on s3 bucket.

Step-1:

Search for AWS Service: S3

Select the s3 bucket to host the static website:twtechs3

Click open the bucket and navigate to: properties.

Step-2:

Scroll down Static website hosting to: Edit
Select the hosting type: Host a Static website.

Enable static website hosting

Select the hosting type: Host a Static website.

Index document:

Step-3:

twtech Specifies the home or default page of the website: index.html
Then save changes

Step-4:

Go back to objects on the menu: To upload the index.html file

Add file(s):index.html

link to Sample html file:

https://github.com/Devopspat35/Package-management/blob/master/index.html

twtech selects the index.html file and: upload

Upload the file: index.html

Step-5:

twtech accesses the index.html file with the url:
Click on the uploaded file: index.html
twtech Copes the object url to access the file on the browser:

https://twtechs3.s3.us-east-2.amazonaws.com/index+(3).html

Step-6:

twtech Uploads entire folders with html file and associated scripts for a website:
Link to the zip file:

https://github.com/Devopspat35/Package-management/blob/master/html-magazine-template.zip

How to Download the file the zip file:

Step-7:

twtech needs to Unzip the file : make sure winrar or unzip manager is installed and accessible in the environment.

twtech verifies the: Unzipped folder with html for website.

Step-8:

twtech needs to Upload the entire folder with index.html file to the s3 bucket:twtechs3

From:

To:

Click on the file : indext.html

Step-9:

twtech Copies the object url in s3 to access the on the browser:

https://twtechs3.s3.us-east-2.amazonaws.com/html-magazine-template/html-magazine-template/index.html

twtech-use case.

Project-2: Hans-On.

How twtech builts an hmtm zip file from its blog, unzip and upload to s3 bucket for its Static host Hosted website

Project Overview:

To “zip a blog into HTML,” twtech is essentially exporting the blog as static HTML files and then compressing them into a .zip
How twtech doesthis depends on where the blog lives.

Scope:

Option 1: If the blog is already a website (fastest)

Here are the common approaches, from simplest to most technical.

Option 1: If the blog is already a website (fastest)
Option 2: WordPress blog → HTML,
Option 3: Convert blog content to HTML using a static site generator,
Option 4: Markdown or files → HTML,
What twtech ends up with,
Uploading the blog html folder or compressed zip file to S3 Bucket in aws,
Access the static website on the internet.

Options

If twtech blog is publicly accessible via a URL:

Steps

Download the site as static HTML with gitbash.

Use a tool like: install wget on gitbash (research documentry on youtube)
- wget
- HTTrack
- SiteSucker (macOS)

twte

ch Example with wget:wget --mirror --convert-links --adjust-extension \

--page-requisites --no-parent https://<myblog.com>

NB:

The above command downs the entire blog into a folder on the desktop on user folder (check user folder created on when computer windows was initially been installed)

Click open to access the downloaded html file.

what twtech get inside the html folder looks like this:
twtech uploads the folder directly to s3 for its Host website.
twtech goes to AWS s3 service, select the bucket or create one.

twtech uploads the entire html to selected or created S3

twtech copies the file to from desktop location to a more secured location.
twtech selects the upload folder option.

twtech uploads the files in the folder.

Entire files in the folder uploading.

NB:
Depending on the number of files, uploading can take a while.
twtech Give the upload preccess to successully upload all files in the folder

twtech accesses it hosted website using the html url
twtech selects the file and click open.

twtech access the html internally

twtechUsers can also access its hosted webside browser from the public is the need permissions is granted to the bucket or file or user via the: object url

twtech copies the object (html) url , enter on the browser and hit enter on keyboard:
Successful

NB:

twtech can subsequently download the folder from s3 bucket and access the html online or offline as well.
twtech can also Zip (compress) the downloaded folder and push to githut with the following command with VSCode: CLI
navigate to the location of the folder.

select the file to be pushed to gitHub repo already created.

twtech Confirms that it trusts the author:

open a new terminal
twtech select the kind of terminal to user: Ubuntu (WSL)

twtech Addendum

How to zip (compress) the file before upload to s3:

zip -r blog-html.zip yourblog.com/

✅ Result: A ZIP containing .html, .css, .js, and images.

Option 2: WordPress blog → HTML

If twtech blog is WordPress-based:

Easy (no coding)

Use a plugin:
- Simply Static
- WP2Static
Configure:
- Output format: Static HTML
- Destination: ZIP archive
Generate → download ZIP

Manual (CLI)

Export content:
```
wp export
```
Convert to HTML using a static site generator (see Option 3).

Option 3: Convert blog content to HTML using a static site generator

Best if twtech want clean, portable HTML.

Common tools

Hugo
Jekyll
Gatsby
Eleventy

Example (Hugo)


hugo

Output goes to:


/public

Zip it:


zip -r blog-html.zip public/

Option 4: Markdown or files → HTML

If twtech blog posts are in Markdown:


pandoc post.md -o post.html

For a folder:


pandoc *.md -o index.html

Then zip:


zip -r blog-html.zip *.html assets/

What twtech ends up with

Inside the ZIP:


index.html
posts/
about.html
css/
js/
images/

twtech Uploads the blog html folder or compressed zip file to S3 Bucket in aws

This ZIP can be:

Uploaded to S3 / static hosting
Access the static website on the internet
Shared offline
Archived or emailed

Think - with -Tech