← Back to Blog

Building CatTool Station: From Zero to Launch

techbuildingarchitecture

cover

The Idea

The idea for CatTool Station started simply: there were too many AI tools popping up, but no easy way to browse and compare them. What began as a simple tool directory evolved into a three-in-one platform: a tool station, an AI chat, and a blog.

Tech Choices

Frontend: Pure Static, Zero Dependencies

No React, no Vue, no framework at all — just plain HTML, CSS, and JavaScript. The reasoning is straightforward:

  • A tool directory needs to be fast to load and immediately usable. SPA bundle sizes work against that.
  • Most pages are fully static — no client-side routing needed.
  • Low maintenance overhead for a solo developer.

Theme switching is handled with CSS custom properties and prefers-color-scheme, supporting both dark and light modes seamlessly.

Build Pipeline: Python

Behind the static site is a Python build pipeline:

  • build.py injects a unified header and footer into all tool pages
  • build_blog.py parses Markdown articles with frontmatter and generates full HTML pages
  • build_index.py builds a knowledge base index for the AI chat feature

Why Python over Node.js? Simpler environment setup, no node_modules to maintain, and it just works on Windows.

Hosting: Cloudflare Pages

Cloudflare Pages was the choice for its global CDN and Serverless Functions:

  • Static assets served from edge nodes worldwide
  • Functions handle API requests without a separate server
  • Free HTTPS and custom domain support

One gotcha: the functions/ directory must be at the project root when deploying. If you run wrangler pages deploy from the wrong directory, the functions won't be bundled — and you'll only find out after deployment.

AI Chat: DashScope (Alibaba Cloud)

The AI chat uses the Qwen model series from Alibaba Cloud's DashScope. The backend automatically rotates through four models — general, coding, math, and translation — so users don't need to pick one. A local knowledge base index powers tool-specific recommendations with source attribution.

Architecture Decisions

Separation of Concerns

The tool station and blog share the same domain but have independent architectures:

  • Tool pages use a left-side category nav + top pill navigation
  • Blog pages use a left-side article nav + right-side profile card
  • Two separate CSS systems that don't interfere

This means changes on one side won't break the other, and each can be optimized independently.

After several iterations, the footer settled into three columns: Tools, About, and Series — each serving a different navigation purpose.

Local Pet Storage

The site features a Live2D cat mascot that users can switch between different models. The choice is stored in localStorage and only takes effect after clicking "Save" — preventing accidental changes.

Lessons Learned

1. Function Deployment Paths

As mentioned above, Cloudflare Pages Functions must be at the project root. Always run the deployment command from the project root directory.

2. Environment Variables

API keys for the AI chat need to be configured manually in the Cloudflare Dashboard — they don't get picked up from .env files. And a new deployment is required after setting them.

3. Image Loading Strategy

Loading og:image from external URLs is unreliable in China. The solution: use local screenshots uploaded manually to the project directory. One extra manual step, but far more reliable.

4. Cache Busting

CSS versioning is easy to overlook. If you update styles without bumping the version number, users' browsers will serve the old cached version. The fix: use ?v=N query parameters and increment with every style change.

What's Next

  • English blog — now live at /en/blog/, with more articles coming
  • AI chat improvements — better tool recommendations and knowledge base coverage
  • More content — regular blog updates and tool reviews

Questions or suggestions? Feel free to ask via the AI Chat or subscribe to the RSS Feed.