Skip to content
Framebrick Docs

Nitip documentation — Astro

Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.

Guide What it covers
Install and run Requirements, install, the commands, what is in each folder
Editing the content Editing text, images, services, projects, posts and roles — no CMS needed
Making it look like your brand Colours, fonts, spacing, components, the style guide, motion
Pages and sections Adding, removing and reordering pages and sections
Forms Making the Contact and Careers forms deliver to you
Using a headless CMS Connecting Sanity, Payload, Strapi, Directus or any other headless CMS
Going live Pre-launch checklist, deploying, domains, what to do after launch
Troubleshooting and questions Errors, questions and answers

In a hurry: the first 15 minutes

Section titled “In a hurry: the first 15 minutes”
Terminal window
npm install
npm run dev
  1. Open http://localhost:4321.
  2. Put your name, description and domain in src/content/site.json, and your contact details in the same file.
  3. Replace the images in src/assets/images/ (keep the file names and you are done).
  4. Replace the browser icons in public/ (icon.svg, favicon.ico, apple-icon.png) and the share image (opengraph-image.png).
  5. Edit the page copy in src/content/pages/ and your services, projects, posts and roles in src/content/collections/.
  6. Point the forms at your inbox — Forms.
  7. Deploy — Going live.

Nothing else is required: the site builds to plain HTML, CSS and one small JavaScript file. No database, no account, no server needed to host it.

How this template is put together

Section titled “How this template is put together”
  • Content is data. All text and every collection item live in src/content/ as JSON, checked against the schemas in src/content/schemas.ts. Pages read them through src/lib/content.ts, which is why adding a CMS later touches one or two files, not the whole site.
  • Design is tokens. Colours, breakpoints and easing are in src/design-system/theme.css; text styles in src/design-system/tokens/. Change a token and every page follows.
  • No framework in the browser. The pages are static HTML. The only JavaScript is the template’s own (menu, cursor, sliders, accordions, forms, motion), bundled by Astro.

Getting help

Section titled “Getting help”