Back to templates

Template details

FM Solo Starter

Astro starter designed to generate Twig or PHP templates with Frontmatter Solo.

About this template

FM Solo Starter is a minimal Astro starter built to the Frontmatter Solo contract, letting developers build a static site in Astro and generate Twig or PHP templates for backend handoff.

What is FM Solo Starter?

FM Solo Starter is an Astro starter project that follows the Frontmatter Solo contract, so a first frontmatter solo:build render pack succeeds without surprises. It takes Astro components, layouts, pages, and SCSS styles as input, and produces a static site in dist/ plus stable asset paths under public/assets/ for backend handoff. The project is designed for use with Frontmatter Solo and includes a CLI validation step to confirm contract readiness before generating templates.

What makes FM Solo Starter stand out?

  • Solo contract compliance — one layout per page, literal props only, global CSS, and static images from public/ are enforced through the npx @withfrontmatter/solo-check command.
  • Stable asset paths — the production build outputs compiled and minified CSS/JS to public/assets/css/ and public/assets/js/ so backends get consistent file locations.
  • Adapter-based render packs — build Twig templates with frontmatter solo:build --adapter twig or PHP templates with --adapter php.
  • SCSS with BEM — source styles live in src/styles/styles.scss with CSS custom properties and BEM naming, with no scoped CSS.
  • Minimal page set — includes index, contact, showcase, and 404 pages in src/pages/.
  • Plain CSS option — switch to plain CSS by moving the source stylesheet to public/assets/css/styles.css and keeping the build step's minification.
  • Validation before build — npx @withfrontmatter/solo-check exits with 0 when the project is ready and lists exactly what to fix when it exits with 1.

Who should use FM Solo Starter?

  • Frontend developers working with backend teams — build the front end once in Astro, then generate Twig or PHP templates for server-side rendering.
  • Frontmatter Solo users — validate contract compliance and produce render packs without fixing unexpected violations.
  • Agencies and freelancers — hand off themed pages to clients or backend developers with stable asset paths and a documented build workflow.

What can you do with FM Solo Starter?

  • Generate Twig templates — run frontmatter solo:build --adapter twig to emit Twig render packs for CMS-driven sites.
  • Generate PHP templates — run frontmatter solo:build --adapter php to emit PHP templates for Laravel or other PHP backends.
  • Validate before building — run npx @withfrontmatter/solo-check to confirm the project passes the Solo contract before any render-pack build.

How does FM Solo Starter work?

  1. Install dependencies with npm install or pnpm install.
  2. Run npx @withfrontmatter/solo-check and confirm exit code 0.
  3. Develop with npm run dev; SCSS and JS are served through Astro for authoring.
  4. Build with npm run build to generate dist/ and the stable public/assets/ files.
  5. Generate a render pack with frontmatter solo:build using either the Twig or PHP adapter.

FAQ

What is the Frontmatter Solo contract?

The Solo contract defines rules a project must follow to produce render packs: one layout per page, literal props only, global CSS, and static images from public/. FM Solo Starter follows these rules out of the box, and solo-check verifies them.

Which adapters are supported for render packs?

The starter supports two adapters: Twig and PHP. You select one by passing --adapter twig or --adapter php to the frontmatter solo:build command.

Can I use plain CSS instead of SCSS?

Yes. Move your source stylesheet to public/assets/css/styles.css, keep the same layout references, and the build will only minify it. The SCSS entry point in src/styles/styles.scss is the default.

Does this starter include JavaScript?

The build produces bundled and minified JS files in public/assets/js/, with main.js and main.min.js. In development, JS is served directly via Astro from src/scripts/main.js.

What pages are included?

The starter includes four pages: index, contact, showcase, and 404. Each page uses one layout, as required by the Solo contract.

screenshot of FM Solo Starter on template0.com