Install and run — Kalme Next.js

Kalme runs on Node.js with the usual Next.js commands: install the packages once, then start the development server and edit while the page updates by itself.

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

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

npm install

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

npm run dev

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

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

src/
  app/                  one folder per route; also the icons, sitemap.ts and robots.ts
    page.tsx            home
    about/page.tsx      /about
    services/[slug]/    one page per service, built from the collection
    projects/[slug]/    one page per project
    blog/[slug]/        one page per post
    legal/[slug]/       Terms of Service and Privacy Policy
    not-found.tsx       the 404 page
    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, call to action
    pages/*.ts          the copy of one page each, including its title and description
    collections/*.ts    services, projects, posts, team, testimonials, legal texts
    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)
    actions.ts          what the Contact form sends and which fields are required
    forms/              form providers (console, webhook, Mailchimp, Resend)
    meta.ts             the canonical link, share image and title of a page
    format.ts           dates and phone links
public/
  images/               photos, logos and video posters used by the content (/images/<file>)
  opengraph-image.png   the picture shown when a link is shared

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

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

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.