How To Host a Static Website on AWS using S3

A static website is a type of website that consists of fixed content and doesn’t change dynamically based on user interactions. In other words, the content remains the same for all users and typically includes HTML, CSS, JavaScript files, images, and other media files. Static websites are generally easier to create and maintain compared to dynamic websites, as they don’t require complex server-side processing or a database to manage content.

Advantages of Static Websites

1. Simplicity: Static websites are straightforward to create and deploy. They don’t require server-side scripting or databases, making them easier to manage.
2. Speed: Since static websites are pre-rendered and served directly to users, they load faster, reducing latency and improving the user experience.
3. Cost-Effective: Static websites can be hosted using simple web hosting services or cloud storage solutions, often at a lower cost than dynamic websites.
4. Security: Static websites have fewer vulnerabilities because they don’t involve server-side scripting or database interactions, reducing the risk of attacks.
5. Scalability: Static websites can handle high traffic easily because they are distributed via Content Delivery Networks (CDNs), like CloudFront, which replicate content across multiple servers worldwide.
6. Reliability: As static websites don’t rely on server-side processing, there is less chance of downtime due to server issues.
7. SEO-Friendly: Static websites can be optimized for search engines effectively due to their simplicity and faster load times.

Examples of Static Websites:

1. Personal Blogs: Many personal blogs are built as static websites since they primarily consist of articles, images, and a few interactive elements.
2. Brochure Websites: Small business websites that provide essential information about a company, its services, and contact details are often static.
3. Documentation and Help Pages: Technical documentation and help pages are usually static, as they are information-oriented and don’t require dynamic content.
4. Landing Pages: Landing pages used for marketing purposes are often static, showcasing a product or service with a clear call-to-action.

What is Amazon S3?

Amazon S3 (Simple Storage Service) is a highly scalable, secure, and durable object storage service provided by Amazon Web Services (AWS). It allows you to store and retrieve any amount of data at any time from anywhere on the web. S3 is widely used for a variety of purposes, including hosting static websites, storing and distributing large files, backing up data, and serving as a content repository for web applications.

Now lets host a static website using S3

You need to have an AWS account to use all AWS services including the S3 service which we will be using to host the static website, create an AWS account here.

After creating and activating your AWS account, login and on the search bar of the AWS console, search for S3.

S3 search on AWS console

On the S3 dashboard, click “create bucket”

Enter a unique name for your bucket, this is important because S3 bucket names are globally unique, then select the region you want the bucket to be hosted in.

Scroll down and click on ACLs (Access Control Lists) enabled, this will allow you to specify access to the bucket using Access Control Lists.

Now, uncheck “Block all Public access”. This allows your bucket contents to be publicly accessible.

It is worth noting that making the bucket publicly accessible is not a good security practice so we will make the bucket and our website secure in another article, here.

Leave all other contents as default and click on “create bucket”

create bucket

Now, click on the bucket name from the list of buckets and click upload.

Next, click add files or add folders to add the html, css and javascript files of your website. When you are done adding your website files and folders, click on upload.

upload website files and folders

upload

Next, click on properties tab, scroll down to static hosting and click on it, by default it is disabled, click on “Enable” to activate static website hosting. Under index document, type the index document of your website (index.html). If your website has an error page (e.g 404 error page), you can optionally type the error page under “Error document — optional”.

Finally, Click on Objects tab and select all the uploaded website files, then click on actions, scroll down and click on “Make public using ACL”.

Viola, You have successfully hosted your static website on Amazon S3. You can see the website endpoint under “Bucket Website Endpoint” in the Properties tab. Copy the endpoint and paste on your browser to access your website.

Thank you for reading, I hope you have learnt how to host a static website using Amazon S3. We will make the website secure and use a custom domain in another article, here.