Marketing Pages

Build marketing pages for your SaaS application with blog, docs, changelog, FAQ, and legal content.

Makerkit provides a complete marketing site infrastructure: landing pages with conversion-optimized components, a blog for content marketing and SEO, documentation for user onboarding, changelog for product updates, FAQ for reducing support load, and legal pages for compliance.

Content such as blog posts, documentation and changelog is managed through Keystatic CMS with Markdoc format (by default), giving you Git-based version control. You can switch CMS if you wish.

Marketing pages are the public-facing, unauthenticated sections of your SaaS that convert visitors into users, educate customers, and establish trust through content.

Marketing Site Structure

All marketing pages live outside authenticated routes at apps/web/app/[locale]/(public)/:

apps/web/app/[locale]/
├── (public)/
│   ├── page.tsx           # Landing page
│   ├── blog/              # Blog posts
│   ├── docs/              # Documentation/help center
│   ├── changelog/         # Product updates
│   ├── faq/               # Frequently asked questions
│   └── (legal)/           # Terms, privacy, cookies
│       ├── terms-of-service/
│       ├── privacy-policy/
│       └── cookie-policy/

Content files are stored in apps/web/content/:

apps/web/content/
├── posts/                 # Blog posts (.mdoc)
├── documentation/         # Help center docs (.mdoc)
└── changelog/             # Release notes (.mdoc)

Features

  • Landing page with marketing components (Hero, Features, Pricing)
  • Blog system for content marketing with categories and tags
  • Documentation with hierarchical navigation and search
  • Changelog for transparent product communication
  • FAQ page with JSON-LD structured data for SEO rich results
  • Legal pages (Terms, Privacy, Cookie Policy)
  • Full internationalization support
  • Keystatic CMS with visual editor and GitHub sync

Content Pipeline

All content follows the same workflow:

  1. Write content in .mdoc files using Markdoc syntax
  2. Preview locally at http://localhost:3000
  3. Edit via Keystatic admin UI at /keystatic (optional)
  4. Commit to Git for version control
  5. Deploy and content updates automatically

Topics

  1. Landing Page - Hero sections, features, and CTAs
  2. Blog System - Blog posts and content marketing
  3. Documentation - Help center and product docs
  4. Changelog - Product updates and release notes
  5. FAQ - Frequently asked questions with schema markup
  6. Legal Pages - Terms, privacy, and cookie policies

Common Pitfalls

  • Skipping legal pages before launch: Even a basic Terms of Service and Privacy Policy are required before accepting users. Use the provided templates and customize them for your product.
  • Not setting up redirects: If you change URL slugs after publishing, set up redirects in next.config.js to preserve SEO value.
  • Ignoring mobile preview: Test all marketing pages on mobile before launch. The marketing components are responsive, but custom content may need adjustments.
  • Publishing without metadata: Every page needs a title and description in frontmatter for SEO. Missing metadata hurts search rankings.
  • Orphan content: Every blog post and doc page should link to related content. Isolated pages get less traffic and rank lower.

Frequently Asked Questions

Can I use a different CMS for marketing content?
Yes. Makerkit supports Keystatic (default), WordPress, or custom CMS clients. See the CMS Integration docs for setup instructions.
How do I add a new marketing page?
Create a new route in apps/web/app/[locale]/(public)/ with a page.tsx file. Use the SitePageHeader component for consistent styling.
Are marketing pages SEO-optimized?
Yes. Pages include proper meta tags, Open Graph images, JSON-LD structured data (for FAQ), and are server-rendered for optimal crawling.
Can I disable specific marketing sections?
Yes. Simply remove or don't link to sections you don't need. The blog, docs, and changelog are independent and optional.
How do I customize the header and footer?
Edit the components at apps/web/app/[locale]/(public)/_components/site-header.tsx and site-footer.tsx.

Next: Landing Page →