Ship your SaaS faster with LaunchSaaS

LaunchSaaS.ORG is a production-ready Next.js SaaS boilerplate packed with Better Auth, Stripe/Creem payments, blog, docs, and a powerful admin dashboard — everything you need to build, launch, and monetize your SaaS, AI tool, or web app in hours, not weeks. Start earning your first $ online faster than ever.

A modern, full-featured blog system built on LaunchSaaS, powered by Next.js and Fumadocs.

• Built on LaunchSaaS - Leverage the power of LaunchSaaS boilerplate for rapid development
• MDX Support - Write blog posts in Markdown with React components
• Multi-language - Built-in i18n support with next-intl (English & Chinese)
• Dark Mode - Beautiful dark mode with next-themes
• Edge Deployment - Deploy to Vercel
• Math Support - KaTeX integration for mathematical expressions
• Syntax Highlighting - Code blocks with syntax highlighting (GitHub themes)
• Type-safe - Full TypeScript support with Zod schema validation
• Responsive UI - Modern UI with Radix UI and Tailwind CSS
• Categories & Tags - Organize posts with categories and tags
• Author Profiles - Support for multiple authors with avatars

• Framework: Next.js 16 (React 19)
• Content: Fumadocs - MDX-based documentation system
• Styling: Tailwind CSS 4
• UI Components: Radix UI
• i18n: next-intl
• Deployment: Vercel
• Package Manager: pnpm

• Node.js 20+
• pnpm

1. Clone the repository:

git clone https://github.com/yourusername/your-blog-template.git
cd your-blog-template

2. Install dependencies:

pnpm install

3. Set up environment variables:

cp .env.example .env
# Edit .env and update NEXT_PUBLIC_APP_URL

4. Run the development server:

pnpm dev

Open http://localhost:3000 in your browser.

.
├── content/                # Blog content
│   ├── posts/             # Blog posts
│   │   ├── en/           # English posts
│   │   └── zh/           # Chinese posts
│   └── pages/            # Static pages
├── src/
│   ├── app/              # Next.js app directory
│   ├── components/       # React components
│   ├── configurations/   # Site configuration
│   │   ├── metadata.ts  # Site metadata
│   │   ├── author.ts    # Author info
│   │   └── ...
│   ├── i18n/            # Internationalization
│   ├── lib/             # Utility functions
│   └── types/           # TypeScript types
├── public/              # Static assets
├── messages/            # i18n translation files
│   ├── en.json
│   └── zh.json
├── source.config.ts     # Fumadocs configuration
└── next.config.ts       # Next.js configuration

Edit src/configurations/metadata.ts to customize your site:

export const metadata: MetadataConfig = {
  name: "Your Blog Name",
  logo: "/avatar.png",
  tagline: "Your tagline",
  description: "Your blog description",
  keywords: ["blog", "tech", "..."],
};

Edit src/configurations/author.ts:

export const author = {
  name: "Your Name",
  avatar: "/avatar.png",
  url: "https://yourwebsite.com",
};

• Edit src/configurations/header.ts for navigation
• Edit src/configurations/footer.ts for footer links
• Edit src/configurations/social-links.ts for social media

1. Create a new .md file in content/posts/[locale]/:

---
title: Your Post Title
description: Brief description
date: 2024-12-26
category:
  id: "tech"
  title: "Technology"
tags:
  - id: "nextjs"
    title: "Next.js"
  - id: "react"
    title: "React"
author:
  name: "Your Name"
  avatar: "/avatar.png"
cover: "/images/post-cover.jpg"
---

# Your Post Content

Write your content here...

2. The post will be automatically indexed and appear on your blog.

Posts support the following frontmatter fields:

• title (required): Post title
• description (required): Post description
• date (required): Publication date
• category (required): Post category with id and title
• tags (optional): Array of tags with id and title
• author (optional): Author info with name, avatar, and url
• cover (optional): Cover image URL

• Vercel: vercel deploy
• Netlify: Connect your repository
• Self-hosted: pnpm build && pnpm start

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm format - Format code with Prettier

The project uses Tailwind CSS 4. Customize styles in:

• Global styles: src/app/globals.css
• Tailwind config: tailwind.config.js
• Component styles: Use Tailwind classes

UI components are built with Radix UI and located in src/components/. Customize them to match your design.

Edit source.config.ts to customize MDX processing:

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkMath],
    rehypeCodeOptions: {
      themes: {
        light: "github-light",
        dark: "github-dark",
      },
    },
  },
});

Add new languages:

1. Add locale to src/i18n/request.ts
2. Create translation file in messages/[locale].json
3. Create content directory in content/posts/[locale]/

MIT License - feel free to use this template for your own blog!

• Built with LaunchSaaS
• Powered by Next.js
• Documentation system by Fumadocs
• UI components by Radix UI

If you found this template helpful, please consider:

• Giving it a star on GitHub
• Sharing it with others
• Contributing improvements

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request