Install and run — Titen Astro

Titen is a standard Astro project: unzip it, install the packages and start the development server, then edit while the page updates by itself.

What you need


Node.js	22.12 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 with the Astro extension is the smoothest; any editor works.
A browser	Chrome, Edge, Firefox or Safari.

No database, no account, no paid service. The site builds to static files you can host anywhere.

Install

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

npm install
npm run dev

Open http://localhost:4321. 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`	Builds the static site into `dist/`
`npm run preview`	Serves `dist/` locally, exactly as a host would
`npm run check`	Checks types, content schemas and Astro files

Run npm run build and npm run preview before publishing. The preview is the real thing: the development server is more forgiving, and a few behaviours (clean URLs, the active menu item) are only worth trusting in the build.

What is in the folder

src/
  pages/                one file per URL
    index.astro         home
    about.astro         /about
    projects.astro      /projects; projects/[slug].astro is one page per project
    [category].astro    one page per project category: /residential, /hospitality, /commercial
    services.astro      /services; services/[slug].astro is one page per service
    blog.astro          /blog; blog/[slug].astro is one page per post
    testimonial.astro   /testimonial, every client review
    contact.astro, 404.astro
    sitemap.xml.ts      the sitemap, built from routes and collections
    robots.txt.ts       robots.txt
    style-guide.astro   every component with examples (noindex; delete the file to remove it)
  layouts/Layout.astro  the <head>, header and footer of every page, and the project list for the search
  components/
    sections/           the sections pages are made of (HomeHeroSection, TeamSection, …)
    site/               header (with the project search) and footer
  content/
    site.json           name, description, domain, menu, header button, contact details, footer, the project form
    pages/*.json        the copy of one page each, including its title and description
    collections/*.json  project categories, projects, services, posts, testimonials
    routes.ts           the URL of every page, used by the components' links
    schemas.ts          the fields each kind of item has, and which are required
  content.config.ts     how the collections are loaded (the file to change for a CMS)
  design-system/        tokens, components and browser scripts — see its own README
  lib/
    content.ts          the only way pages read collections
    forms/              form delivery (static and server modes)
    to-ui.ts            turns content items into card and list data
  assets/images/        photos and video posters used by the content; Astro resizes and compresses them
  styles/global.css     imports the theme and Tailwind
public/                 files served as they are: icons, the brochure and the share image

Delete src/pages/style-guide.astro (and src/components/style-guide/) if you don’t want the component gallery on your site; nothing else depends on it.

Editor tips

Install the Astro and Tailwind CSS IntelliSense extensions.
npm run check reads your content files against the schemas: a missing field is reported with the file and the line, 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/, src/assets/images/, public/ and theme.css where possible. When a new version of the template ships, copy those into the new release instead of re-applying changes by hand. CHANGELOG.md lists what changed.