Deploying a static website can look overwhelming, especially if you’re new to cloud computing—but it doesn't have to be. Once you understand the steps involved, the process is pretty straightforward.
In this guide, you'll learn how to deploy your static website using AWS S3, covering everything from creating an S3 bucket to testing your live site.
If you're looking for a quicker hosting solution, I recommend checking out this beginner-friendly guide; How to Deploy Your Websites and Apps: User-Friendly Deployment Strategies. It provides an overview of different hosting methods.
Prerequisites
Before you begin reading this article, ensure you have:
An AWS account. If you don't have one, you can sign up here.
A static website ready for deployment.
What is Amazon S3?
AWS S3 (Simple Storage Service) is a scalable and reliable cloud storage solution ideal for hosting static websites. Storing things in the cloud is the most efficient way of storage compared to the traditional way of using hard drives, especially for companies.
To learn more about cloud computing, check out this article: What is Cloud Computing? A Guide for Beginners.
Types of Amazon S3 storage
Amazon S3 offers different storage classes tailored to various use cases, balancing cost, availability, and retrieval speed.
Here are the main types of S3 storage classes:
1. S3 Standard
High durability (99.999999999% or 11 nines) and availability (99.99%).
Ideal for frequently accessed data (for example, websites, applications, and data analytics).
2. S3 Intelligent-Tiering
Automatically moves data between two tiers: frequent access and infrequent access.
Reduces storage costs without impacting performance.
Best for unpredictable access patterns.
3. S3 Standard-Infrequent Access (S3 Standard-IA)
It has a lower cost than the S3 Standard but with a retrieval fee.
Suitable for data that is accessed less frequently but needs fast retrieval (for example, backups, disaster recovery).
4. S3 One Zone-Infrequent Access (S3 One Zone-IA)
Similar to S3 Standard-IA, it is stored in one AWS Availability Zone instead of multiple.
Costs less but has a higher risk of data loss if the zone fails.
5. S3 Glacier
Designed for long-term archiving with lower costs.
Retrieval times range from minutes to hours.
Suitable for compliance records, backups, or archives.
6. S3 Glacier Deep Archive
The cheapest S3 storage option.
Retrieval time ranges from 12 to 48 hours.
Ideal for data that is rarely accessed, like regulatory archives.
Depending on your workload, you may choose any storage class. For this article, we will utilize the standard storage class as an example.
What are the benefits of AWS S3?
AWS S3 offers numerous benefits, making it a popular choice for hosting static websites and storing data.
Here are the key advantages:
It is easy to use; uploading and managing files is straightforward with the AWS S3 Console.
As a user, you pay only for what you use, and small websites can often fit within the free tier.
S3 is built for speed and ensures your website is always accessible.
S3 has built-in encryption and access controls to keep your data safe.
Using S3 improves your website’s loading speed, creating a smoother and more engaging experience for users.
S3 automatically handles increased traffic without additional setup.
What are the key features of S3?
1. Hosting Static Websites
Amazon S3 enables easy hosting of static websites (HTML, CSS, JavaScript) without a traditional web server.
Set up a public endpoint to make your site accessible.
2. Scalability and High Availability
Automatically scales to handle traffic spikes.
Offers 99.99% uptime, ensuring consistent accessibility for users.
3. Redirection & Error Pages
You can configure custom error pages (like a 404.html).
Redirect requests to other pages or external sites.
4. Access Control and Security
Use bucket policies and IAM roles to manage access to your website.
Flexibility to restrict access to certain files or enable public read access.
5. Versioning and Backup
Supports versioning, allowing you to restore previous versions of your website.
Lifecycle policies help manage storage costs by automatically archiving older versions to Glacier.
What are the different ways to interact with AWS?
There are various ways we interact with Amazon in general, whether it's S3 buckets or EC2 service:
- Amazon Graphical User Interface Method.
- The Ubuntu command line (CMD)
- Amazon CloudShell
- Integrated Development Environment (IDE)
- Infrastructure as Code (Iac)
1. The Amazon Graphical User Interface method
The Amazon Graphical User Interface (GUI) provides an intuitive way to manage your resources on AWS, including S3 for website deployment. It is beginner-friendly and serves as the first point of contact for every interaction with AWS.
2. The Ubuntu command line (CMD)
This is a text-based tool you can use to control your computer. It can also be installed on a Windows PC. You type commands to do things like install software or manage files.
To install visit: Ubuntu CMD
3. Amazon CloudShell
This is a built-in terminal on AWS that you can use right from your browser. It lets you run commands and manage your AWS resources without installing anything.
4. Using your terminal in your Integrated Development Environment (IDE)
Most code editors, like VS Code, have a terminal built in. You can use it to run commands without leaving your coding environment.
5. Using an Infrastructure as Code (Iac)
Infrastructure as Code (IaC) can be used instead of manual processes, such as Terraform, to provision AWS resources.
The way you interact with the cloud provider depends on what you're most comfortable with.
How do we upload and host our website on an AWS S3 bucket?
Step 1: Creating the S3 Bucket
For this tutorial, we'll use the Ubuntu command line (CMD)
- Type boto3 s3 on the web search bar to view a list of related documentation.
- Click on the first result.
N.B.: I chose Boto3 because I'm using Python to create the S3 bucket.
- Once the documentation is open, copy the first command you see and paste it into your Ubuntu CMD.
- Go back to the documentation, scroll down, and click on "create_bucket.”
- Once it's open, scroll down to "Request Syntax."
- Copy the bucket name and configuration, then paste them into your terminal. The other variables in the request syntax are optional.
- Save.
- Run the script to create an S3 bucket in your Amazon S3.
Now you can go to the console to check if it has been created.
Step 2: Upload Files
With the bucket created, we can now upload files through the console. I believe there's also a programmatic way to upload files and test, but I haven't explored all the methods in the documentation yet.
- Click on the bucket name to be redirected to the object page.
- Next, click the orange Upload button on the right to move to the next page.
- Click "Add Folder" or "Add Files” to upload.
The uploaded file output
By default, any file uploaded to S3 is private; this is to protect your privacy. If you want to view your work on the browser or share it with others, you'll need to allow public access.
To enable public access:
- Go to the Permissions tab.
- Scroll down to Block Public Access.
- Click Edit and uncheck the box
- Stay on the same Block Public Access (Bucket Settings) page.
- Scroll down to Object Ownership.
- On the right-hand side, click the Edit button.
- This will take you to the Edit Object Ownership page.
- You'll see two options for the Access Control Lists (ACLs).
- Choose ACLs enabled.
- Save changes.
- Go back to the Objects tab.
- Select the file you uploaded.
- Click on Actions.
- In the dropdown menu, select Make Public Using ACL.
- Selecting the "Make Public Using ACL" option from the dropdown makes the file, image, or object publicly accessible.
- Clicking it will redirect you to the Make Public page.
- On that page, click on the Make Public button to confirm.
- Once this is done, clicking on the object will open the file.
- Click on the index.html file to view your website.
- Click on the object file, and you'll see an option to copy the URL at the top.
- Click on the copy URL button then paste it into your browser to view your website.
Alternative Method:
- Select index.html, which will take you to the index page.
- Under the Properties tab, find the Object URL.
- Copy the URL and paste it into your browser to view your website.
Final Output
Conclusion
Deploying a static website with the AWS S3 Console is straightforward. Create an S3 bucket, configure permissions, and make the site public. AWS provides a reliable solution for hosting static websites, eliminating the need for traditional web server management. This guide will help you set up and launch your site quickly.
Feel free to post your progress on your favourite social media platform!.
If you found this article helpful, share it with others.
You can check out the project’s code in the GitHub repository here.
Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.
Resources
★ To learn more about cloud computing, check out this article: What is Cloud Computing? A Guide for Beginners.
★ If you're interested in learning more about managed backend solutions, you might find this article on What is Backend as a Service (BaaS)? A Beginner's Guide.
Please always delete your AWS resources after each trial or project
Thank you for reading.
Top comments (0)