AIOZ Static Website Deploy

Deploy a static website to AIOZ decentralized storage. Supports 4 built-in templates or user's own static site.

FLOW OVERVIEW

CODEBLOCK0

STEP 1: LOGIN

Ask user for AIOZ Storage email and password.

CODEBLOCK1

Response: data.access_token (Bearer token), data.account.id (accountId).
Store BEARER_TOKEN and ACCOUNT_ID.

STEP 2: CHOOSE TEMPLATE

Ask user which template or if they have their own static site.

Templates from https://github.com/AIOZStorage/aioz-storage-docs/tree/main/examples:

1. 1. landing — OLED dark theme, X/Twitter style landing page. CONFIG in assets/main.js.
2. landing-alt — Purple gradient landing page. CONFIG in assets/main.js. Supports *italic* gradient text in headlines.
3. portfolio — Clean minimal portfolio for devs/designers. CONFIG in assets/main.js. Image carousel for projects.
4. documents — Full documentation site with Markdown content. CONFIG in assets/js/config.js. Search, TOC, syntax highlighting.
5. Custom — User provides their own static files.

STEP 3: CLONE TEMPLATE & CUSTOMIZE

Clone the chosen template:
CODEBLOCK2

Then customize the CONFIG object based on template type:

Template: landing

Config: assets/main.js → CONFIG object. Theme: "dark" (OLED black) or "light".

Key fields to customize:

• - brand.name — brand/product name
• INLINECODE14, meta.description — SEO
• INLINECODE16 — pill badge (or null to hide), hero.title, INLINECODE18
• INLINECODE19 — { label, href }, INLINECODE21
• INLINECODE22 — toggle: highlights, logos, features, useCases, testimonials, pricingTop, pricingBot, faq
• INLINECODE23 — { number, label } stats (numbers animate on scroll)
• INLINECODE25 — company name strings
• INLINECODE26 — INLINECODE27
• INLINECODE28 — INLINECODE29
• INLINECODE30 — INLINECODE31
• INLINECODE32 — INLINECODE33
• INLINECODE34 — INLINECODE35
• INLINECODE36 — "redirect" | "mailto" | INLINECODE39
• INLINECODE40, footer.columns[], INLINECODE42
• Colors in assets/style.css :root → INLINECODE45

Template: landing-alt

Config: assets/main.js → CONFIG object. Theme: "light" | "dark" | "system".

Key fields to customize:

• - brand.name, INLINECODE52
• INLINECODE53 — pill badge (or null), hero.headline (wrap words in *asterisks* for gradient italic text), INLINECODE56
• INLINECODE57, hero.secondaryCta, INLINECODE59
• INLINECODE60 — toggle: stats, problemSolution, features, useCases, logos, testimonials, pricing, faq
• INLINECODE61 — { number, label } (numbers animate on scroll)
• INLINECODE63 — INLINECODE64
• INLINECODE65 — { size, gradient, kicker, title, desc, tag, visual } (bento grid, size: "wide"|"narrow"|"half"|"third"|"full")
• INLINECODE67 — INLINECODE68
• INLINECODE69 — "redirect" | "mailto" | INLINECODE72
• Colors in assets/style.css → --color-primary: #635bff, --color-gradient-start, INLINECODE76

Template: portfolio

Config: assets/main.js → CONFIG object. Theme: "light" | "dark" | "auto".

Key fields to customize:

• - personal.firstName, personal.lastName, personal.title, INLINECODE85
• INLINECODE86 — INLINECODE87
• INLINECODE88, about.bio (array of paragraphs), about.focusAreas (array of skill strings)
• INLINECODE91 — INLINECODE92
• INLINECODE93 — { title, tags[], year, images[], description, techNote, link: { label, url } } (multiple images = carousel)
• INLINECODE95 — INLINECODE96
• INLINECODE97, INLINECODE98
• INLINECODE99 — toggle: showAbout, showExperience, showProjects, showFocusAreas
• INLINECODE100, footer.copyright (null = auto-generate)
• INLINECODE102, meta.description, INLINECODE104
• Images in assets/images/ (1600×900 for projects, 1200×630 for OG)

Template: documents

Config: assets/js/config.js → CONFIG object. Theme: "light" | "dark" | "auto".

Key fields to customize:

• - site.title, site.description, INLINECODE113
• INLINECODE114, INLINECODE115
• INLINECODE116 — { group, collapsed, items: [{ label, path }] } (path = filename without .md)
• INLINECODE118 — { label, href }, header.links[] — INLINECODE121
• INLINECODE122, INLINECODE123
• INLINECODE124 — toggle: search, tableOfContents, feedback, prevNext, copyCodeButton, scrollToTop
• INLINECODE125 — INLINECODE126
• INLINECODE127 — 2 or 3

Content: create .md files in /docs/ with YAML front matter:
CODEBLOCK3

Callouts: > [!NOTE], > [!TIP], > [!WARNING], > [!DANGER]
Code blocks with syntax highlighting (javascript, typescript, python, bash, json, html, css, yaml, sql, go, rust, java, etc.)
Hash routing: index.html#/page-name → loads INLINECODE135

STEP 4: GET BUCKET INFO

Ask user for:

1. 1. Bucket name — their bucket on aiozstorage.network
2. 12-word seed phrase — BIP39 passphrase from bucket creation

IMPORTANT: AIOZ Storage does NOT store passphrases. If lost, bucket access is lost forever.

See: https://aiozstorage.network/docs/tutorials/manage-buckets

STEP 5: GET ROOT ZKEY

CODEBLOCK4

Extract: ROOT_ZKEY = INLINECODE137

STEP 6: GENERATE GRANT

Prerequisites (one-time setup in {baseDir})

CODEBLOCK5

This installs argon2-browser and ts-node. No build:sjcl needed — the CLI uses Node.js built-in crypto.

Run grant-cli.ts (RECOMMENDED: JSON output for bot)

Two grants are needed:

1. 1. Upload grant — permissions 1,2,3 (Read+Write+List) for S3 upload
2. Website grant — permissions 1,3 (Read+List only) for website creation

Upload grant:
CODEBLOCK6

Website grant:
CODEBLOCK7

Output (single JSON line to stdout):
CODEBLOCK8

Parse JSON to extract UPLOAD_GRANT and WEBSITE_GRANT.

IMPORTANT: Website API rejects grants with Write (2) or Delete (4) permissions.

Alternative: config file

CODEBLOCK9

CLI flags

STEP 7: REGISTER S3 CREDENTIALS

Use the upload grant (permissions 1,2,3):

CODEBLOCK10

Extract: ACCESS_KEY_ID = data.access_key_id, SECRET_KEY = INLINECODE166

STEP 8: UPLOAD FILES TO S3

S3 endpoint: https://s3.aiozstorage.network | Region: us-east-1 | PathStyle: INLINECODE169

Using AWS CLI

Using Node.js (@aws-sdk/client-s3)

INLINECODE173→text/html .css→text/css .js→application/javascript .json→application/json .svg→image/svg+xml .png→image/png .jpg/.jpeg→image/jpeg .webp→image/webp .ico→image/x-icon .md→text/markdown .woff2→font/woff2 default→INLINECODE195

STEP 9: CREATE STATIC WEBSITE

Use the website grant (permissions 1,3 — Read+List only):

CODEBLOCK12

IMPORTANT: Website API rejects grants with Write (2) or Delete (4) permissions. Use --permissions 1,3 for this grant.

API domain is api.aiozstorage.app (not .network).

STEP 10: DONE

Site is live at: INLINECODE199

API DOMAINS

• - api.aiozstorage.network — login, zkeys
• INLINECODE201 — S3 credential registration
• INLINECODE202 — S3 upload endpoint
• INLINECODE203 — static website creation
• INLINECODE204 — static website URL

ERROR HANDLING

• - Login fails → check email/password
• ZKey creation fails → Bearer token expired, re-login
• Grant generation fails → verify rootZKey, accountId, bucket name, passphrase
• S3 upload fails → check credentials, endpoint, bucket name
• Website creation fails → check grant, bucket name, Bearer token
• Site 404 → ensure index.html at bucket root (not in subfolder)

IMPORTANT NOTES

• - grant encodes both authorization (Macaroon/ZKey) and encryption key (EKey from passphrase)
• Two grants needed: upload grant (permissions 1,2,3) and website grant (permissions 1,3)
• Website API rejects grants with Write (2) or Delete (4) permissions
• AIOZ Storage is S3-compatible — any AWS SDK works
• Bearer tokens expire — re-login on 401
• grant-cli.ts requires Node.js >= 18
• argon2-browser WASM loading is auto-patched in the CLI
• All template asset paths are relative (./assets/...) — works from any base URL
• For documents template, content is in /docs/*.md with YAML front matter
• For landing/landing-alt/portfolio, all content is in CONFIG object in INLINECODE208