The official website for Catalyst — a fast, secure, and modern game server management platform.
Live Site · Catalyst Panel · Live Demo · Docs
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 live demo CTA |
| Plugins | Plugin marketplace, synced hourly from catalyst-plugins |
| Templates | Template catalog with search and category/genre/runtime filters, synced hourly from catalyst-templates |
| Pterodactyl Alternative | Why switch + detailed Catalyst vs Pterodactyl comparison tables |
| Migrate from Pterodactyl | Step-by-step migration guide with auto-migration tool details |
| Live Demo | Interactive demo panel with a mock Minecraft server (hosted separately) |
| Documentation | Hosted separately at docs.catalystctl.com |
- 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
Instead of static screenshots, the site links to the live demo — an interactive demo panel with a mock Minecraft server. Old /screenshots/ URLs 301-redirect to the demo (see astro.config.mjs and public/_redirects).
# Install dependencies
npm install
# Start dev server
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.
├── .github/ # GitHub config
├── 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 # Redirects (docs + screenshots moves)
│ └── _headers # Cloudflare cache/security headers
├── scripts/
│ ├── generate-github-stats.js # Generates GitHub stats JSON data
│ ├── generate-templates.js # Generates the template catalog JSON snapshot
│ ├── render-og.mjs # Renders OG SVG → PNG
├── src/
│ ├── content/blog/ # Blog markdown files
│ ├── data/ # JSON data files (GitHub stats, template catalog)
│ ├── layouts/
│ │ └── Layout.astro # Shared layout (header, footer, SEO, JSON-LD)
│ ├── lib/
│ │ ├── github-stats.mjs # GitHub stats fetcher
│ │ └── templates.mjs # Template catalog builder (tree + egg JSON)
│ ├── pages/
│ │ ├── 404.astro # Custom 404 page
│ │ ├── index.astro # Homepage
│ │ ├── plugins.astro # Plugin marketplace
│ │ ├── templates.astro # Template catalog (filters, search, sort)
│ │ ├── pterodactyl-alternative.astro # Pterodactyl alternative + comparison
│ │ └── migrate-from-pterodactyl.astro # Migration guide
│ ├── 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
/templates/ is SSR, like the plugin marketplace. On each request it lists the
catalystctl/catalyst-templates repository tree, reads every egg JSON the panel
importer would accept (egg-*.json), and normalizes it into a catalog entry:
category, genre, runtimes, ports, variables, tags, and a direct raw download
URL. The result is edge-cached for an hour, so merging a template into the
catalog repo shows up on the site without a website rebuild.
Filtering, search, and sorting are client-side over the rendered cards, with
state mirrored into the URL (?q=, ?category=, ?genre=, ?runtime=,
?sort=) so a filtered view is linkable and shareable.
src/data/templates.json is a committed snapshot written by
scripts/generate-templates.js during prebuild. It is the fallback when
GitHub is unreachable and keeps astro dev working offline. Regenerate it
manually with npm run templates.
The homepage numbers (commits, releases, CI, contributors) and the header release badge are live, not baked into the build:
GET /api/github-stats.jsonfetches the repo from GitHub, caches the payload at the edge, and refreshes it in the background once it is about an hour old.- The prerendered HTML carries the
src/data/github-stats.jsonseed for first paint and no-JS visitors; a small script swaps in the live values.
Nothing has to be committed or rebuilt for the numbers to change. To lift GitHub's anonymous 60 requests/hour limit, set a read-only token as a Worker secret:
npx wrangler secret put GITHUB_TOKENIn CI the same secret is bound automatically from the STATS_GITHUB_TOKEN
repository secret (see .github/workflows/deploy.yml).