1# how to create a website
2
3a 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.
4
5lower-level reference: [mdx](../mdx/), [layout](../mdx/layout.md), [theme](../mdx/theme.md).
6
7## folder structure
8
9```
10mysite/
11 .sbl/
12 layout.tsx shared header/footer (React)
13 theme.css global stylesheet
14 index.mdx landing page
15 privacy.mdx privacy policy
16 terms.mdx terms of service
17```
18
19## 1. write the layout
20
21`.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.
22
23```tsx
24// .sbl/layout.tsx
25import type { ReactNode } from 'react';
26
27export default function Layout({ children }: { children: ReactNode }) {
28 return (
29 <>
30 <header>
31 <nav>
32 <a href="/myspace/mysite" className="logo">mysite</a>
33 <a href="/myspace/mysite/about">about</a>
34 </nav>
35 </header>
36 <main>{children}</main>
37 <footer>
38 <a href="/myspace/mysite/privacy">privacy</a>
39 <a href="/myspace/mysite/terms">terms</a>
40 </footer>
41 </>
42 );
43}
44```
45
46layout is SSR-only — use class names, not client-side hooks.
47
48## 2. write the stylesheet
49
50`.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).
51
52```css
53/* .sbl/theme.css */
54:root {
55 --color-text: #111;
56 --color-muted: #666;
57 --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
58}
59
60* { margin: 0; padding: 0; box-sizing: border-box; }
61body { font-family: var(--font-mono); color: var(--color-text); }
62
63header, main, footer { max-width: 600px; margin: 0 auto; padding: 1rem; }
64
65/* :where() keeps prose defaults at specificity 0 so landing-page-specific
66 classes win. see mdx/theme.md for details. */
67:where(.prose) h1 { font-size: 24px; margin: 1rem 0; }
68:where(.prose) p { color: var(--color-muted); margin-bottom: 0.5rem; }
69```
70
71## 3. write the pages
72
73each page is a `.mdx` file with a frontmatter block and content. content can be plain markdown or JSX.
74
75```mdx
76<!-- index.mdx -->
77---
78title: mysite — homepage
79description: a website built on sublimated
80---
81
82<section className="hero">
83 <h1 className="page-title">welcome</h1>
84 <p>this is mysite. built on sublimated.</p>
85</section>
86```
87
88```mdx
89<!-- privacy.mdx -->
90---
91title: Privacy Policy
92---
93
94# privacy policy
95
96we don't collect any data. that's it.
97```
98
99## 4. push it
100
101from the folder, push via git:
102
103```bash
104git init
105git add .
106git commit -m "initial website"
107git remote add origin https://sublimated.com/myspace/mysite.git
108git push -u origin main
109```
110
111or if your folder auto-syncs via CloudStorage, the files appear on sublimated automatically.
112
113## 5. browse it
114
115```
116run.sublimated.com/myspace/mysite/index.mdx
117run.sublimated.com/myspace/mysite/privacy.mdx
118run.sublimated.com/myspace/mysite/terms.mdx
119```
120
121## fonts and static assets
122
123serving custom fonts (`.woff2`) or images from inside the folder is not yet stable. stick to system font stacks for now:
124
125```css
126--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
127--font-sans: -apple-system, BlinkMacSystemFont, sans-serif;
128```
129
130if you want a specific font and you know your users have it installed locally, declare it with `@font-face` using `local()`:
131
132```css
133@font-face {
134 font-family: 'Berkeley Mono';
135 src: local('Berkeley Mono');
136 font-display: block;
137}
138```
139
140## real example
141
142the popssh.com site is a live reference implementation. see the source at `/anton/code/sites/popssh.com/` — three `.mdx` pages, one layout, one theme.