DEV Community

Cover image for ๐Ÿš€ Hosting a Static Website on AWS S3(After EC2)
Oluwaseyi Asowo
Oluwaseyi Asowo

Posted on

๐Ÿš€ Hosting a Static Website on AWS S3(After EC2)

๐Ÿ”ฅ Quick Recap

In my previous article , we spun up an EC2 instance, configured Apache, and hosted a static website the traditional way.

Today, we're taking a lighter, serverless approach, hosting a static website using Amazon S3.

No servers to manage. No SSH logins. Just pure, clean static site hosting. Letโ€™s get into it! ๐Ÿš€


๐Ÿงฐ What Youโ€™ll Need

  • An AWS account
  • A static website (you can build yours or grab a free one from Tooplate.com.
  • Basic familiarity with the AWS Console

๐Ÿ“– Walkthrough: Hosting a Static Website on S3


๐Ÿ›’ Step 1: Create an S3 Bucket

  1. Head over to the AWS S3 Console.
  2. Click on Create Bucket.
  3. Give your bucket a globally unique name in my case "drinkscentral".
  4. Notice that public access is blocked by default, but don't worry, we'll come back to fix that. ๐Ÿ˜‰
  5. Click Create Bucket.

s3 bucket create

s3 bucket public access


๐Ÿ“ค Step 2: Upload Your Website Files

After creating the bucket:

  1. Click into your newly created bucket.
  2. Hit Upload then click Add Files.
  3. Select the files you downloaded from Tooplate.com (or your own static site).
  4. Click Upload.

Upload files

Upload files
Upload files


๐Ÿ”“ Step 3: Set Public Access

Remember earlier when I said public access was blocked? Time to fix that.

  1. Go to the Permissions tab.
  2. Under Block Public Access, click Edit.
  3. Untick the options that block public access.
  4. Save changes.

Allow Public Access


๐Ÿ›ก๏ธ Step 4: Enable ACLs (Access Control Lists)

Why enable ACL?

ACLs let us manually grant permissions to individual objects, like making our uploaded website files publicly readable.

  1. Still in the Permissions tab, scroll to Object Ownership.
  2. Click Edit.
  3. Select ACLs enabled.
  4. Acknowledge and save changes.

ACL


๐ŸŒ Step 5: Make Objects Public

Now that ACLs are enabled:

  1. Go back to the Objects tab.
  2. Select all uploaded files.
  3. Click Actions then Make public using ACL.

Obj Public access

Obj Public access


โš™๏ธ Step 6: Enable Static Website Hosting

Finally, let's tell S3 that this bucket is a website.

  1. Go to the Properties tab.
  2. Scroll down to Static website hosting.
  3. Click Edit then Enable.
  4. Enter:
    • Index document: index.html
    • (Optional) Error document: error.html
  5. Save changes.

Enable website hosting


๐ŸŒ Step 7: Access Your Live Website!

You're done! ๐ŸŽ‰

  1. Still in the Properties tab, scroll down to Static Website Hosting.
  2. Copy the Bucket Website Endpoint link.
  3. Paste it into your browser.

Boom ๐Ÿ’ฅ your static site is live, hosted on AWS S3!

website live

website live


๐Ÿ†š EC2 vs S3 for Static Websites

Feature EC2 Hosting S3 Hosting
Server Management Manual (configure OS, Apache, etc) Serverless (no management)
Cost Higher (pay per uptime) Very low (pay per storage/requests)
Setup Complexity Medium to High Easy
Scalability Manual scaling Auto scales
Suitable For Dynamic + static websites Static websites only

๐Ÿ Final Thoughts

In our previous EC2 approach, we had to spin up servers, configure Apache, and manage everything.

Here on S3, it's simply upload โ†’ tweak permissions โ†’ launch. Easy, scalable, and super cost-effective.

S3 static hosting is good for portfolios, landing pages, and lightweight projects.

Stay tuned as I continue learning, maybe we'll set up CloudFront, SSL, and custom domains next. ๐Ÿ‘€

Thanks for following along!

Until next time,

- Oluwaseyi ๐Ÿ˜โœŒ๏ธ


๐Ÿ“š Useful Resources

Top comments (5)

Collapse
ย 
funmilola profile image
Funmilola โ€ข

S3 is a good call for the static site, it is straightforward and less stress to manage. Thank you for this piece!

Collapse
ย 
shekharrr profile image
Shekhar Rajput โ€ข โ€ข Edited

s3 is my preferred choice.

Collapse
ย 
bluezeus profile image
Oluwaseyi Asowo โ€ข

Yup yup, you're welcome.

Collapse
ย 
nevodavid profile image
Nevo David โ€ข

perfect, stuff like this always gets me wanting to rebuild my sites just to keep things simple - you ever feel like less tech sometimes makes for better focus?

Collapse
ย 
bluezeus profile image
Oluwaseyi Asowo โ€ข

Youโ€™re totally right! Thereโ€™s something refreshing about stripping things back to the basics you know , no unnecessary bloat, just what works. Iโ€™ve definitely fallen into the trap of over engineering things only to realize later that simplicity often is the best feature. Anyways really glad the post resonated ๐Ÿ˜