Atlas Docs

Host a static site on S3

Properties1
aliasesWebsite hosting on a static S3 bucket, Tutorials/Website hosting on a static S3 bucket

3 min read

Introduction

Learn how to host your static website or application effortlessly on the Atlas Cloud. This guide will walk you through deploying your locally built static app to a public storage bucket for global access.

Prerequisites

Before you begin, ensure you have:

  • A static website or application built and ready for deployment on your local machine.

Create a Storage Bucket

To host your static content, you’ll first need to create a dedicated storage bucket:

  1. Navigate to the Atlas Storage section in your Atlas Cloud.
  2. Click on “Create Bucket”.
  3. Provide a unique name for your bucket (e.g., my-cool-website).
  4. Enter the “Quota in GiB” (e.g., 1 for 1 GiB).
  5. Set the access policy to “Public” to allow web access.
  6. Click “OK”.

Upload Static Files

You can upload your static website files using the web interface or command-line tools for more automation. Below, we’ll cover the web interface first, followed by alternative methods using AWS CLI, s3cmd, or s5cmd.

Create website files

Build your website locally (e.g. next build), or write an HTML file locally. For example, save this file as index.html on your machine:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to Atlas Cloud</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="text-center">
      <h1 class="text-4xl font-bold text-blue-600 mb-4">
        Hello from Atlas Cloud! ☁️
      </h1>
      <p class="text-lg text-gray-700">
        Your website is live and looking great on Atlas.
      </p>
    </div>
  </body>
</html>

Via Web Interface

Now, upload your static website files to the configured bucket:

  1. From your bucket’s detail page, navigate to the “Browse” tab.
  2. Click on “Upload” and select all the files and folders from your locally built static application.
  3. Ensure all files are uploaded to the root of the bucket, or in the directory structure expected by your index.html.
  4. Confirm the upload.

Via Command-Line Tools

For automated uploads and updates, you can use the aws CLI or alternatives (see Buckets for setting up the CLI).

AWS CLI

Once you’ve configured AWS CLI for Atlas Storage (see Buckets for setup instructions), you can upload your static files to the bucket:

aws s3 cp ./path/to/your/static/files s3://your-bucket-name/ --recursive --profile atlas --endpoint-url https://s3.runatlas.is

Replace ./path/to/your/static/files with the path to your local static files directory, and your-bucket-name with your bucket name.

To sync and update your files (uploads new/changed files, deletes removed ones):

aws s3 sync ./path/to/your/static/files s3://your-bucket-name/ --profile atlas --endpoint-url https://s3.runatlas.is

For more AWS CLI commands and troubleshooting, refer to our Buckets documentation.

Access Your Static Site

Your static website is now live with automatic HTTPS!

Visit your website at https://s3.runatlas.is/my-cool-website/index.html, where my-cool-website is your bucket name. For example, if your bucket is named my-cool-website, the URL for your website is https://s3.runatlas.is/my-cool-website/index.html.

For dynamic sites: See Website hosting on a VM or Website hosting with Terraform for server-based hosting with databases and server-side processing.

Congratulations! You’ve created your first static public website at Atlas Cloud 🎉

Backlinks