How to Host a Static Website on AWS S3

Rajkumar

Oct 17, 2024 • 3 min read

Amazon S3 (Simple Storage Service) is a popular cloud storage service from Amazon Web Services (AWS). Also, it’s perfect for hosting static websites, which consist of HTML, CSS, JavaScript, and other static assets. Hosting a static site on S3 provides benefits like high availability, durability, and cost-efficiency.

Prerequisites

Before you begin, make sure you have the following:

An AWS Account: You’ll need access to the AWS Console. If you don’t already have an AWS account, you can sign up here.
Basic Static Website: Ensure that your website consists of static files, including HTML, CSS, JavaScript, and other assets (e.g., images, fonts). If you have React or Angular application, we can take the built file for Next application it is slightly different we'll see it in the later part of the blog
AWS CLI (Optional): If you prefer to use the command line to interact with S3 instead of the web console, you can install the AWS CLI and configure it with your credentials.

Step 1: Create an S3 Bucket

The first step is to create an S3 bucket to store your website files.

Log in to AWS Console: Go to the AWS S3 Console.
Create a New Bucket:

Click on the Create bucket button.
Give your bucket a globally unique name (e.g., my-static-website).
Select a region close to your target audience.
Disable Block all public access (since you’ll be making this bucket public for website hosting). AWS will give you a warning; proceed only if you intend to make the content public.
Click Create bucket to complete the process.

Step 2: Enable Static Website Hosting

Next, you need to enable static website hosting for the S3 bucket.

Navigate to the Properties tab in your bucket.
Scroll down to Static website hosting.
Click Edit and select Use this bucket to host a website.
Set the Index Document to index.html (the main file that will be served when someone visits your website).
Optionally, set the Error Document to error.html for custom 404 pages.
Save the changes.

Step 3: Upload Your Website Files

Now that the bucket is configured for hosting, you can upload your website files.

Go to the Objects tab in the S3 bucket.
Click Upload and add your website files (HTML, CSS, JavaScript, images, etc.).
After selecting your files, click Upload.

Note: upload the content not the folder itself

Step 4: Make Your Files Public

To allow users to access your website, you need to set the permissions to make the files publicly accessible.

Go to the Permissions tab in your bucket.
Scroll down to the Bucket Policy section and click Edit.
Add the following bucket policy to allow public read access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Replace your-bucket-name with the name of your S3 bucket.

4. Save the bucket policy.

Step 5: Access Your Static Website

Go back to the Properties tab.
Scroll down to the Static website hosting section.
You’ll see the Bucket website endpoint. This is your website’s URL, which will look something like: http://your-bucket-name.s3-website-region.amazonaws.com

Optional: Setting Up a Custom Domain

If you want to use a custom domain for your website instead of the default S3 URL, follow these steps:

Create a new CNAME record that points your domain (e.g., www.example.com) to your S3 bucket's website endpoint. http://your-bucket-name.s3-website-region.amazonaws.com

Name	Value	Type
sub domain	S3 bucket's website endpoint	CName

2. (Optional) Use AWS CloudFront to add HTTPS and speed up content delivery.

Hosting a Next.js Static Site on S3

If you're using Next.js and want to host a statically exported version of your app on S3, it's easier than ever with the new output: 'export' feature in Next.js 13.2+. Here's how to do it:

Step 1: Update Your `next.config.mjs`

In your Next.js project, you need to enable static exports by modifying your next.config.mjs file.

// next.config.mjs
export default {
  output: 'export',  // Enable static export
  reactStrictMode: false,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "img.freepik.com",
      },
      {
        protocol: "https",
        hostname: "th.bing.com",
      }
    ],
  },
};

This configuration tells Next.js to generate a fully static site when building.

Step 2: Build the Application

Now that output: 'export' is configured, you can build the application. Run the following command in your terminal:

npm run build

This command will create an out/ folder containing all the static files (HTML, CSS, JS) that are ready to be hosted.

Step 3: Upload the Static Files to S3

In the AWS S3 console, go to your S3 bucket.
Upload the files generated inside the out/ folder to your S3 bucket.