Skip to content

Install and run

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.

Unzip the template, open the folder in a terminal and run:

Terminal window
npm install

This downloads the packages listed in package.json into node_modules/ (a few minutes the first time).

Terminal window
npm run dev

Open http://localhost:3000. Save a file and the page updates by itself.

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.

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 page
public/
images/ photos used by the content (/images/<file>)
icons/ interface icons

Delete src/app/style-guide/ if you don’t want the component gallery on your site; nothing else depends on it.

  • 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.

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.