AIOZ DePINAIOZ Storage

From Bucket to Live Site: Static Website Hosting on AIOZ Storage

Thumbnail

Sometimes you just need a LIVE website fast, without provisioning servers or wiring up CI pipelines.

Static Website Hosting on AIOZ Storage lets you publish HTML, CSS, and JS sites directly from a storage bucket using the dashboard. No terminals. No scripts. Just a few clicks.

You’ll enable hosting, upload your files, configure index and error pages, and launch a CDN-accelerated endpoint like:

https://<bucket>.aiozstorage.network

This guide walks you through the entire process.

Why Use Static Website Hosting on AIOZ Storage

Static sites should be the easiest part of your stack. These features keep it that way:

  • Fast global delivery: Served via built-in CDN for low latency worldwide.
  • Zero server operations: Nothing to patch or maintain.
  • S3-compatible workflow: Familiar bucket-based experience.
  • Per-bucket control: Enable or disable hosting anytime.
  • Secure by design: Scope access using Access Grants and sub-users.
  • Ideal for docs, microsites, and SPAs: From product docs to launches.

What You’ll Learn

How to:

  • Enable Static Website Hosting
  • Upload your HTML/CSS/JS assets
  • Configure index and error pages
  • Verify your live site

Best for: Product, marketing, and docs teams, including developers who prefer a no-code path.

Prerequisites

Before you begin:

  • An AIOZ Storage account
  • A bucket name you can use
  • Your site files (index.html, CSS/JS/images, optional error.html)
  • An Access Grant or sub-user (recommended for least-privilege access)

Prepare your site:

  • Keep it static: HTML/CSS/JS and static assets only.
  • Use consistent paths: Prioritize relative paths so assets resolve correctly.
  • Add an error.html: Give visitors a branded 404 and make troubleshooting obvious.
  • Don’t embed secrets: Tokens/keys must not live in client-side files.
  • Version your assets: Names like app.8d9f.js help the CDN cache aggressively.
Tip: If you’re deploying a Single-Page App (React, Vue, Svelte), plan a routing fallback, so deep links don’t return 404. See SPA tips near the end.

Step-by-Step Guide

Step 1: Create or Select a Bucket

  1. In the dashboard, open Buckets.
  2. Choose an existing bucket or click New Bucket to create one.
Good to know: Hosting is enabled per bucket. Many teams keep one bucket per site or per environment.

Step 2: Start “Create Static Website”

From your chosen bucket’s page, click Create Static Website (or open the Actions menu → Create Static Website).

Why a dedicated flow? It stores a website configuration (index, error, or enabled status) alongside the bucket. You can view, update, disable, or delete it later from the management area.

Step 3: Select Bucket & Configure Security

  1. Confirm the bucket name.
  2. If prompted, configure any website-level security options (e.g., a passphrase)
  3. Click Next.
Best Practice: Use a scoped Access Grant or sub-user to this bucket for ongoing updates. It keeps your deployment safer and more auditable.

Step 4: Configure Website

You’ll now define the website behavior:

  • Index Document: index.html
  • Error Document: error.html
  • Toggle Enable Static Website → ON
  • Click Next.
Why set an error document? You get a friendly, on-brand 404 and a helpful fallback while you’re still wiring up routes.

Step 5: Confirm & Copy Your Endpoint

  1. Review your configuration.
  2. Click Finish.
  3. Copy the generated website URL: https://<bucket>.aiozstorage.network
Heads-up: This endpoint is CDN-accelerated for fast global delivery.

Step 6: Upload Your Site Files

  1. Return to the bucket page and click Add / Upload.
  2. Upload:
    • index.html at the bucket root (unless you intentionally use a sub-path)
    • All CSS, JS, images
    • error.html (optional but recommended)
  3. Keep folder structure and paths consistent with your HTML.
Best Practice: Use immutable filenames. Give those long cache lifetimes, and keep HTML TTL shorter.

Step 7: Test the Live Site

  1. Open your endpoint: https://<bucket>.aiozstorage.network → your homepage should render.
  2. Try a non-existent path like /missing → your 404 page should appear.
  3. Smoke-test key paths: Confirm images and scripts load correctly.
Looks stale? Your browser or the edge device may be caching assets. Hard refresh, try an incognito window, or change the asset version.

Step 8: Daily Operations

Once your site is live, you can:

  • Enable/Disable hosting for maintenance or staged launches.
  • Swap the Index document for maintenance mode during incidents, then restore.
  • Set Access Grant expirations to time-box review sites, hackathon demos, or temporary campaigns.
  • Delete the website configuration when the site is decommissioned (your bucket contents remain intact unless manually removed).

SPA Routing Tips (React / Vue / Svelte)

For client-side routing:

  • Deep links like /dashboard must serve index.html
  • Use static export/prerender if supported
  • Keep error.html for true missing assets only, not for valid in-app routes.
  • Test deep links directly in a browser, not only via in-app navigation.

Governance & Security Checklist

  • Use Access Grants or sub-users with the least privilege, rotate credentials.
  • Keep non-public objects private
  • Prefer server-side encryption (SSE) for simplicity, use end-to-end encryption (E2EE) only for private objects.
  • Maintain a ready-to-switch maintenance page
  • Follow internal review and change logging processes

Conclusion

Deployment shouldn’t be a bottleneck. With AIOZ Storage, you can turn a storage bucket into a globally delivered endpoint in minutes.

Upload. Enable. Go live.

Ready to launch your next site? Start by creating your first bucket today.