Skip to content
Sign inJoin waitlist

Tustel documentation — Next.js

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, projects, services, testimonials, posts and client logos — no CMS needed
Making it look like your brand Colours, the logo, fonts, spacing, components, the style guide, motion
Pages and sections Adding, removing and reordering pages and sections, with a map of every page
Forms Making the contact form 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:3000.
  2. Put your name, description and domain in src/content/site.ts, and your contact details, social links and booking link (“Book a call”) in the same file.
  3. Replace the images in public/images/ (keep the file names and you are done), including your portrait and the client logos.
  4. Replace the logo (Making it look like your brand), the browser icons in src/app/ (icon.svg, apple-icon.png) and the share image (public/opengraph-image.png).
  5. Edit the page copy in src/content/pages/, and your projects, services, testimonials, posts and clients in src/content/collections/.
  6. Point the contact form at your inbox: Forms.
  7. Deploy: Going live.

Nothing else is required: the site has no database, no account to create and no paid service to run.

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/. Pages read them through src/lib/content.ts, which is why swapping in a CMS later touches one file, not the whole site.
  • Design is tokens. Colours and breakpoints are in src/design-system/theme.css; text styles and motion in src/design-system/tokens/. Change a token and every page follows (Making it look like your brand lists the few colours that animated components repeat).
  • Photos set the shape. Project cards, covers and galleries take each photo’s own proportions, read from the files in public/ when the site builds (Editing the content).
  • Components are shared. Every button, card, form field and section is in src/design-system/ or src/components/, and is shown at /style-guide on your own site.

Getting help

Section titled “Getting help”