Atlas Docs

Website Hosting on a Static S3 Bucket

Properties1
descriptionWalks through deploying a static website to a public Atlas storage bucket.

3 min read

Introduction

A static site, the kind with no backend, just HTML, CSS, JavaScript and assets, can be served straight from a public storage bucket. No server to patch, no process to keep alive. This tutorial puts a site you’ve built locally into an Atlas bucket and serves it over HTTPS.

Prerequisites

You need a static site or app already built on your machine. If you don’t have one yet, the HTML file below works fine as a stand-in.

Create a Storage Bucket

The bucket is where your files live. Create one from the Atlas Storage section:

  1. Open Atlas Storage in the Atlas Cloud Platform.
  2. Click “Create Bucket”.
  3. Give it a unique name, say my-cool-website.
  4. Set the “Quota in GiB”, for example 1.
  5. Set the access policy to “Public” so the web can read it.
  6. Click “OK”.

Upload Static Files

There are two ways to get files into the bucket. The web interface is quickest for a one-off, and the command-line tools (AWS CLI, s3cmd, s5cmd) are what you’ll reach for once you want to script deploys. We cover the web interface first.

Create website files

If you have a build step, run it now (next build and the like). Otherwise, save the following as index.html:

<!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

To push the files in by hand:

  1. Open your bucket’s detail page and go to the “Browse” tab.
  2. Click “Upload” and pick every file and folder from your built site.
  3. The files have to land where index.html expects them, usually at the bucket root.
  4. Confirm the upload.

Via Command-Line Tools

Once you’re updating a site regularly, the aws CLI (or s3cmd/s5cmd) beats clicking through the browser. See Buckets for how to set the CLI up.

AWS CLI

With the AWS CLI pointed at Atlas Storage (setup is in Buckets), one command copies your files up:

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

Swap ./path/to/your/static/files for your local build directory and your-bucket-name for the bucket you made earlier.

When you redeploy, sync is better than cp: it uploads only what changed and removes files you’ve deleted locally.

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

For more commands and troubleshooting, see Buckets.

Access Your Static Site

A public bucket serves its objects over HTTPS under the bucket’s own subdomain of s3.runatlas.is. So a bucket named my-cool-website puts its index.html at https://my-cool-website.s3.runatlas.is/index.html. Paste that into a browser and the page you just uploaded should load. Serving each bucket from its own subdomain gives it a dedicated origin, which keeps one hosted site isolated from another in the browser. Keep bucket names to lowercase letters, digits, and hyphens so they work over HTTPS; see Buckets for the naming rule. If the page doesn’t load, double-check that the file sits at the bucket root and the bucket access policy is set to Public. That covers the whole flow, and there’s no server running behind any of it.

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

Backlinks