跳到主要内容

部署你自己的策略页面

直觉​

你正在看的这个网站，本身就是「把量化研究变成可交互页面」的范例：用 Docusaurus 写内容、用 KaTeX 渲染公式、用 Pyodide 在浏览器里跑 Python——零后端、纯静态，可以免费托管到 GitHub Pages / Vercel / Netlify。这一节告诉你本站是怎么搭的，以及如何把你的 Capstone 策略也变成这样一个「读者能改参数、点运行、看净值」的页面。把你自己的研究公开成一个可复现、可交互的页面，是量化学习闭环的最后一环。

本站的技术栈​

层实现仓库位置
站点Docusaurus 3（React + MDX）docusaurus.config.ts、sidebars.ts
公式KaTeX（remark-math + rehype-katex）配置在 docusaurus.config.ts 的 presets
浏览器跑 PythonPyodide（WASM），自研 <CodePlayground>src/components/CodePlayground/
回测引擎纯 numpy/pandas 轻量引擎static/py/quant.py
内置数据合成 CSV（可复现、离线）static/data/*.csv
内容模块化 MDX 文档docs/<模块>/*.mdx
「人话」解释：为什么「纯静态 + Pyodide」对教学这么香？

传统教学站要跑代码，得搭后端（服务器跑 Python、防注入、限流、付钱）。本站的妙处是 Pyodide：它把完整的 Python（含 numpy/pandas/scipy/sklearn）编译成 WebAssembly，直接在读者浏览器里跑——没有任何后端。数据（合成 CSV）和引擎（quant.py）随站点一起静态分发，被 CodePlayground 写进 Pyodide 的虚拟文件系统，读者 pd.read_csv('/data/...') 就能读。结果是：部署成本为零、读者改参数即时重算、可离线。把你的策略按同样套路封装，全世界任何人打开网页就能复现你的回测。

新增一章策略页（MDX 模板）​

复制本站统一的章节骨架，把你的策略代码塞进 <CodePlayground>：

---
sidebar_position: 5
title: 我的 Capstone 策略
---

import CodePlayground from '@site/src/components/CodePlayground';

# 我的策略

## 直觉
用大白话讲策略解决什么问题。

## 数学原理
$$ \text{你的公式} $$

## 可运行案例
<CodePlayground
  datasets={['sp500_universe_daily.csv', 'sp500_metadata.csv']}
  pyModules={['quant']}
  rows={30}
  code={`import quant, numpy as np, pandas as pd
# ...你的端到端流水线代码...
`}
/>

## 小结

datasets 里的文件来自 static/data/，pyModules={['quant']} 让你能 import quant 调用回测引擎——这就是全站共享的基础设施。

构建与本地预览​

npm install            # 安装依赖
npm run start          # 本地热更新预览(http://localhost:3000)
npm run build          # 产出纯静态站点到 build/
npm run serve          # 本地预览构建产物

部署到云端（三选一）​

GitHub Pages（最省事）：先在 docusaurus.config.ts 里把 url、baseUrl、organizationName、projectName 改成你自己的，然后：

npm run deploy         # 自动构建并推到 gh-pages 分支

Vercel / Netlify：导入 GitHub 仓库，框架选 Docusaurus，构建命令 npm run build、输出目录 build，点一下部署即可——每次 git push 自动重新部署。

:::tip 数据可复现 你的合成数据由 scripts/generate_data.py（固定种子）生成，任何人 npm run data:generate 都能复现一模一样的 CSV——这是「可复现研究」的关键。 :::

小结​

  • 本站栈：Docusaurus + KaTeX + Pyodide（CodePlayground）+ 自研 quant 引擎 + 合成数据，纯静态、零后端；
  • 新增策略页 = 复制 MDX 骨架，把代码塞进 <CodePlayground>，复用 static/data 与 quant；
  • 部署三选一：GitHub Pages（npm run deploy）/ Vercel / Netlify——固定种子保证任何人可复现。

模块 12 完成，M6（模块 9–12）全部交付。从基础到机器学习、风控、进阶专题与 Capstone，整条路线已贯通。