how to create a website

a walkthrough for building a multi-page website on sublimated. by the end, you'll have a landing page, a privacy page, and a terms page, all wrapped in a shared layout and styled with a single CSS file.

lower-level reference: mdx, layout, theme.

folder structure

mysite/
  .sbl/
    layout.tsx    shared header/footer (React)
    theme.css     global stylesheet
  index.mdx       landing page
  privacy.mdx     privacy policy
  terms.mdx       terms of service

1. write the layout

.sbl/layout.tsx wraps every .mdx page in the folder. the children prop is already <article class="prose"><MDXContent/></article> — your job is to decide what goes around it.

// .sbl/layout.tsx
import type { ReactNode } from 'react';


export default function Layout({ children }: { children: ReactNode }) {
  return (
    <>
      <header>
        <nav>
          <a href="/myspace/mysite" className="logo">mysite</a>
          <a href="/myspace/mysite/about">about</a>
        </nav>
      </header>
      <main>{children}</main>
      <footer>
        <a href="/myspace/mysite/privacy">privacy</a>
        <a href="/myspace/mysite/terms">terms</a>
      </footer>
    </>
  );
}

layout is SSR-only — use class names, not client-side hooks.

2. write the stylesheet

.sbl/theme.css is injected as a global <style> in <head>. it styles both your layout (header, footer) and your page content (.prose wraps every page).

/* .sbl/theme.css */
:root {
  --color-text: #111;
  --color-muted: #666;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}


* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-mono); color: var(--color-text); }


header, main, footer { max-width: 600px; margin: 0 auto; padding: 1rem; }


/* :where() keeps prose defaults at specificity 0 so landing-page-specific
   classes win. see mdx/theme.md for details. */
:where(.prose) h1 { font-size: 24px; margin: 1rem 0; }
:where(.prose) p { color: var(--color-muted); margin-bottom: 0.5rem; }

3. write the pages

each page is a .mdx file with a frontmatter block and content. content can be plain markdown or JSX.

<!-- index.mdx -->
---
title: mysite — homepage
description: a website built on sublimated
---


<section className="hero">
  <h1 className="page-title">welcome</h1>
  <p>this is mysite. built on sublimated.</p>
</section>

<!-- privacy.mdx -->
---
title: Privacy Policy
---


# privacy policy


we don't collect any data. that's it.

4. push it

from the folder, push via git:

git init
git add .
git commit -m "initial website"
git remote add origin https://sublimated.com/myspace/mysite.git
git push -u origin main

or if your folder auto-syncs via CloudStorage, the files appear on sublimated automatically.

5. browse it

run.sublimated.com/myspace/mysite/index.mdx
run.sublimated.com/myspace/mysite/privacy.mdx
run.sublimated.com/myspace/mysite/terms.mdx

fonts and static assets

serving custom fonts (.woff2) or images from inside the folder is not yet stable. stick to system font stacks for now:

--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-sans: -apple-system, BlinkMacSystemFont, sans-serif;

if you want a specific font and you know your users have it installed locally, declare it with @font-face using local():

@font-face {
  font-family: 'Berkeley Mono';
  src: local('Berkeley Mono');
  font-display: block;
}

real example

the popssh.com site is a live reference implementation. see the source at /anton/code/sites/popssh.com/ — three .mdx pages, one layout, one theme.