create-helio

Create a new Helio help center and documentation site in seconds.

Usage

Create a New Project

# npm
npm create helio@latest

# pnpm
pnpm create helio@latest

# yarn
yarn create helio

You can also specify a project name:

npm create helio@latest my-docs

Update an Existing Project

To update your existing Helio project with the latest components and features:

# From your project directory
npx create-helio update

The update command will:

• ✅ Let you choose what to update (components, layouts, styles, etc.)
• ✅ Preserve your content (articles, categories, config)
• ✅ Optionally create backups of existing files
• ✅ Update dependencies to latest versions

What gets updated:

• UI Components (sidebar, header, modals, etc.)
• Layouts (BaseLayout, page templates)
• Utilities & Lib (helper functions, API utils)
• Styles (global CSS, Tailwind config)
• Config Files (astro.config, tsconfig, etc.)
• Dependencies (package.json)

What stays unchanged:

• Your articles (src/data/articles/)
• Your categories (src/data/categories/)
• Your site config (src/data/config.ts)
• Your custom content and data

What's Included

• 🚀 Astro 5 - Fast, modern static site generator
• ⚡ React 18 - For interactive components
• 🎨 Tailwind CSS - Utility-first styling
• 📝 BlockNote Editor - Rich text editing for articles
• 🔍 Built-in Search - Fast client-side search
• 🌙 Dark Mode - Automatic theme switching
• 📱 Responsive - Mobile-first design
• ♿ Accessible - WCAG compliant components
• 🎯 SEO Optimized - Meta tags, sitemaps, and more
• ☁️ Edge Ready - Deploy to Cloudflare Pages

Features

Content Management

• Write in TypeScript, Markdown, or MDX
• Rich text blocks: callouts, code groups, tabs, steps, accordions
• Folder-based navigation with categories and subcategories
• Custom icons for articles and categories
• Article feedback and AI chat support

Customization

• 9 built-in sidebar styles
• Custom color themes
• Configurable header and footer
• Custom fonts and typography
• Extensible component system

Developer Experience

• Full TypeScript support
• Hot module reloading
• Type-safe content API
• Component library with shadcn/ui
• Automatic sitemap generation

Quick Start

After creating your project:

cd my-docs
npm install --legacy-peer-deps  # or pnpm/yarn install
npm run dev

Open http://localhost:4321 and start editing!

Project Structure

my-docs/
├── src/
│   ├── components/       # React components
│   ├── data/
│   │   ├── articles/     # Your content
│   │   ├── categories/   # Category definitions
│   │   ├── config.ts     # Site configuration
│   │   └── folders.ts    # Navigation folders
│   ├── layouts/          # Astro layouts
│   ├── pages/            # Astro pages
│   └── styles/           # Global styles
├── public/               # Static assets
└── astro.config.mjs      # Astro configuration

Configuration

Edit src/data/config.ts to customize your help center:

export const helpCenterConfig = {
  site_name: 'My Docs',
  site_description: 'Documentation for my product',
  primary_color: '#3b82f6',
  sidebar_style: 'default',
  show_search: true,
  show_theme_toggle: true,
  // ... more options
};

Adding Content

TypeScript Blocks (Recommended)

// src/data/articles/getting-started/welcome.ts
import { bn, h2, p, callout } from '../../blocks';

export const welcomeArticle = {
  id: 'welcome',
  title: 'Welcome',
  slug: 'welcome',
  category_id: 'getting-started',
  content: bn([
    h2('Getting Started'),
    p('Welcome to our documentation!'),
    callout('info', 'This is an info callout.'),
  ]),
};

Markdown/MDX

---
title: Getting Started
slug: getting-started
category_id: guides
---

# Getting Started

Welcome to our documentation!

<Callout type="info">
  This is an info callout.
</Callout>

Deployment

Cloudflare Pages

npm run build
npx wrangler pages deploy dist

Other Platforms

Helio works on any platform that supports static sites:

• Vercel
• Netlify
• AWS S3 + CloudFront
• GitHub Pages

Documentation

Full documentation available at usegately.com/docs

Support

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues

License

MIT © Gately

For Maintainers

Syncing Template

To sync updates from the main helpcenter to the template:

npm run sync

This copies all UI components, layouts, and utilities from the main project to the template.

Building for Publish

Before publishing, run:

npm run build

This will:

1. Sync from main helpcenter
2. Prepare dotfiles for npm publish
3. Clean up build artifacts
4. Verify template structure

The prepublishOnly script automatically runs this before npm publish.

Publishing

# Update version
npm version patch|minor|major

# Publish to npm
npm publish