Install and run — Tustel Astro

Tustel is a standard Astro project: install the packages once, then start the development server and 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; only the contact form’s optional server mode needs a server (Forms).

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/. It takes a few minutes the first time.

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/ — every page is pre-rendered as an HTML file
npm run preview	Serves dist/ locally, as a host would (run build first)
npm run check	Checks the types, the content against its schemas and the Astro files

Run npm run check and npm run build before publishing, then look at the result with npm run preview. check catches a missing field or a typo in a content file that the development server tolerates, and the preview is the real thing: the built pages, served as a host serves them.

What is in the folder

src/
  pages/                one file per URL
    index.astro         home
    about.astro         /about
    portfolio.astro     /portfolio ("Works" in the menu), every project; portfolio/[slug].astro is one page per project
    blog.astro          /blog, every post; blog/[slug].astro is one page per post
    contact.astro       /contact, with the contact form
    404.astro           the page shown for an unknown address
    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
  components/
    sections/           the sections pages are made of (HomeHeroSection, ServicesSection, …); project/ holds the
                        sections of a project page
    site/               header (with the phone menu, and header.ts, its script) and footer
    style-guide/        a helper of the style guide page
  content/
    site.json           name, description, domain, menu, booking link, contact details, social links, footer, and the
                        parts several pages share: "Let's work together", the photo band, "From the journal", counters
    pages/*.json        the copy of one page each, including its title and description (contact.json also has the form)
    collections/*.json  projects, services, testimonials, posts, clients
    routes.ts           every URL in the site, in one place
    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, see cms.md)
  design-system/        tokens, components and their browser scripts — see its own README
  integrations/forms.ts adds the form route when the form runs in server mode
  lib/
    content.ts          the only way pages read collections
    forms/              form delivery (demo, static and server modes)
    format.ts           dates, search descriptions and phone links
    image-size.ts       reads each photo's size when the site builds, so cards and galleries keep its proportions
    to-ui.ts            turns projects, posts, clients and contact details into what the components show
  assets/images/        photos and client logos used by the content (/images/<file>), and the logo as SVG files;
                        Astro resizes and compresses the photos
  styles/global.css     imports Tailwind and the theme
public/                 files served as they are: the icons and the share image
astro.config.mjs        the site's address (from site.json), the font, the forms integration
.env.example            the form settings, to copy to .env

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. VS Code suggests the first when you open the folder (.vscode/extensions.json).
• npm run check reads your collections against the schemas and the page copy against the sections that use it: a missing field is reported with its file (or its collection and item) and its name, 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, you can copy those into the new release instead of re-applying changes by hand. CHANGELOG.md lists what changed.