The official website for Catalyst — a fast, secure, and modern game server management platform.
Live Site · Catalyst Panel · Screenshots
The website is built with Astro and Tailwind CSS, deployed to Cloudflare Pages. It visually matches the Catalyst panel's Obsidian Design System — same fonts, colors, component patterns, and layout conventions.
| Page | Description |
|---|---|
| Homepage | Overview with features, quick start, architecture diagram, and screenshot previews |
| Pterodactyl Alternative | Why switch + detailed Catalyst vs Pterodactyl comparison tables |
| Migrate from Pterodactyl | Step-by-step migration guide with auto-migration tool details |
| Screenshots | Full gallery of all panel screenshots organized by section (auth, user, admin) |
| Documentation | Installation, configuration, nodes, plugins, and API reference |
- Astro 6 — hybrid rendering (prerendered + SSR) via Cloudflare adapter
- Tailwind CSS 4 — utility-first styling matching the panel's design tokens
- @astrojs/sitemap — auto-generated XML sitemap for SEO
- @astrojs/cloudflare — Cloudflare Pages deployment adapter
- Wrangler — Cloudflare Pages CLI for local preview and deployment
The site uses the same design language as the Catalyst panel:
- Fonts: DM Sans Variable, Outfit Variable, JetBrains Mono Variable
- Colors: Obsidian dark theme with
zinc-950base, indigo primary accent - Components: Mirrors panel patterns (PageHeader, StatsCard, Sidebar section labels, BrandFooter)
- Tokens: All CSS variables and Tailwind config values are pulled from the panel source
Screenshots are sourced from the catalyst repository via a git submodule with sparse checkout (only docs/screenshots is pulled). At build time, scripts/copy-screenshots.sh copies them into public/img/screenshots/.
# Update screenshots from the main repo
git submodule update --remote catalyst# Install dependencies
npm install
# Start dev server (screenshots are copied automatically)
npm run dev
# Build for production
npm run build
# Preview the production build locally via Wrangler
npm run previewThe site runs on Cloudflare Workers (wrangler.jsonc, worker name catalyst-website) and serves catalystctl.com.
On every push to main, .github/workflows/deploy.yml builds and runs wrangler deploy.
Required repository secrets / variables:
| Name | Type | Notes |
|---|---|---|
CLOUDFLARE_API_TOKEN |
secret | Token with Workers Scripts Edit (and account read) |
CLOUDFLARE_ACCOUNT_ID |
secret or variable | Cloudflare account ID |
# One-time setup
gh secret set CLOUDFLARE_API_TOKEN -R catalystctl/catalyst-website
gh variable set CLOUDFLARE_ACCOUNT_ID -R catalystctl/catalyst-website -b "<account-id>"npm run deploy # build + wrangler deployThe wrangler.jsonc configures the Cloudflare adapter. Static pages are prerendered at build time; the docs index uses SSR for dynamic content collection rendering.
├── .github/ # GitHub config
├── catalyst/ # Git submodule → docs/screenshots
├── public/
│ ├── favicon.ico # Legacy favicon
│ ├── favicon.svg # Modern SVG favicon
│ ├── logo.png # Brand logo
│ ├── og-default.png # Default Open Graph image (1200x630)
│ ├── og-default.svg # OG image source
│ ├── robots.txt # Search engine crawl directives
│ ├── _redirects # Cloudflare Pages redirects
│ ├── _headers # Cloudflare Pages cache/security headers
│ └── img/screenshots/ # Copied at build time (gitignored)
├── scripts/
│ ├── copy-screenshots.sh # Copies submodule screenshots → public/
│ ├── sync-docs.sh # Syncs documentation from catalyst repo
│ ├── generate-screenshot-data.js # Generates screenshot JSON data
│ ├── render-og.mjs # Renders OG SVG → PNG
│ └── setup.sh # Initial project setup
├── src/
│ ├── content/docs/ # Documentation markdown files
│ ├── data/ # JSON data files for screenshots
│ ├── layouts/
│ │ ├── Layout.astro # Shared layout (header, footer, SEO, JSON-LD)
│ │ └── DocsLayout.astro # Documentation layout (sidebar, TOC)
│ ├── pages/
│ │ ├── 404.astro # Custom 404 page
│ │ ├── index.astro # Homepage
│ │ ├── screenshots.astro # Screenshot gallery
│ │ ├── pterodactyl-alternative.astro # Pterodactyl alternative + comparison
│ │ ├── vs-pterodactyl.astro # Redirect → /pterodactyl-alternative/
│ │ ├── migrate-from-pterodactyl.astro # Migration guide
│ │ └── docs/
│ │ ├── index.astro # Docs landing page
│ │ └── [...slug].astro # Individual doc pages
│ ├── styles/global.css # Tailwind + Obsidian design tokens
│ └── content.config.ts # Content collection schema
├── astro.config.mjs # Astro configuration (hybrid + Cloudflare)
├── tailwind.config.js # Tailwind configuration
├── wrangler.jsonc # Cloudflare Pages config
└── package.json
The site implements comprehensive SEO best practices:
- Canonical URLs on every page with trailing-slash consistency
- JSON-LD structured data: SoftwareApplication, TechArticle, FAQPage, HowTo, BreadcrumbList
- Open Graph + Twitter Card meta tags with 1200×630 OG image
- Auto-generated XML sitemap with priority and changefreq
- Custom 404 page to prevent soft 404s
- robots.txt with sitemap reference
- Cloudflare Pages headers for caching and security
- Semantic HTML with proper heading hierarchy and ARIA labels