Install and run
What you need
Section titled “What you need”| Node.js | 20.9 or newer (node -v). Download at https://nodejs.org — the LTS build is fine. |
| A package manager | npm comes with Node. pnpm, yarn and bun work too. |
| A code editor | VS Code is a good default; any editor works. |
| A browser | Chrome, Edge, Firefox or Safari. |
No database, no account, no paid service. The site builds to static pages.
Install
Section titled “Install”Unzip the template, open the folder in a terminal and run:
npm installThis downloads the packages listed in package.json into node_modules/ (a few minutes the first time).
npm run devOpen http://localhost:3000. Save a file and the page updates by itself.
The commands
Section titled “The commands”| Command | What it does |
|---|---|
npm run dev |
Development server with live reload |
npm run build |
Production build — every page is pre-rendered as HTML |
npm start |
Serves the production build locally (run build first) |
npm run lint |
Checks the code with ESLint |
npx tsc --noEmit |
Checks the types without building |
Run npm run build before publishing: it catches a missing image or a typo in a content file that the development
server tolerates.
What is in the folder
Section titled “What is in the folder”src/ app/ one folder per route; also the icons, share image, sitemap.ts and robots.ts page.tsx home about/page.tsx /about blog/[slug]/ one page per post, built from the collection style-guide/ every component with examples (noindex; delete the folder to remove it) components/ sections/ the sections pages are made of (HomeHeroSection, TeamSection, …) site/ header and footer content/ site.ts name, description, domain, navigation, contact details, footer pages/*.ts the copy of one page each, including its title and description collections/*.ts services, projects, posts, careers, team, testimonials routes.ts every URL in the site, in one place types.ts the shape of all content design-system/ tokens and reusable components — see its own README lib/ content.ts the only way pages read content (swap this for a CMS, see cms.md) forms/ form providers (console, webhook, Mailchimp, Resend) meta.ts the canonical link and share URL of a pagepublic/ images/ photos used by the content (/images/<file>) icons/ interface iconsDelete src/app/style-guide/ if you don’t want the component gallery on your site; nothing else depends on it.
Editor tips
Section titled “Editor tips”- Install the Tailwind CSS IntelliSense and ESLint extensions for class name and code hints.
- The project is TypeScript: your editor will tell you when a content file is missing a field, before you open the browser.
- Search across files (
Ctrl/Cmd + Shift + F) for a phrase you see on the demo site to find the file that holds it.
Updating later
Section titled “Updating later”Keep your edits in src/content/, public/images/ and theme.css where possible. When a new version of the
template ships, you can copy your content folder into the new release instead of re-applying changes by hand.
CHANGELOG.md lists what changed.