Skip to content
Framebrick Docs

Install and run

What you need

Section titled “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

Section titled “Install”

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

Terminal window
npm install
npm run dev

Open http://localhost:4321. 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 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

Section titled “What is in the folder”
src/
  pages/                one file per URL
    index.astro         home
    about.astro         /about
    blog/[slug].astro   one page per post, built from the collection
    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)
  components/
    sections/           the sections pages are made of (HomeHeroSection, TeamSection, …)
    site/               header and footer
  layouts/Layout.astro  the <head>, header, footer and cursor of every page
  content/
    site.json           name, description, domain, navigation, contact details, footer
    pages/*.json        the copy of one page each, including its title and description
    collections/*.json  services, projects, posts, careers, team, 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 in server mode
  assets/images/        photos used by the content — Astro resizes and compresses them
  styles/global.css     imports the theme and Tailwind
public/                 files served as they are: icons, share image, interface icons

Delete src/pages/style-guide.astro if you don’t want the component gallery on your site.

Editor tips

Section titled “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

Section titled “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.