Skip to main content

个人站技术方案

状态：初始 Idea 阶段
约束：零花费、React 技术栈、国内可用
日期：2026-06-04

一、需求梳理​

  • 放一些 Markdown 文档（技术文章、笔记等）
  • 页面中展示动态效果
  • 收集实用链接
  • 前端开发人员，偏好 React 技术栈
  • 国内使用为主
  • 目前不想投入任何花费

二、托管方案对比（免费）​

平台费用国内速度说明
Cloudflare Pages ⭐免费还行大陆有节点，免备案里最好的选择
Vercel免费❌ 经常打不开国内间歇性被墙
GitHub Pages免费❌ 很慢/不稳定国内体验糟糕
Netlify免费❌ 很慢跟 GitHub Pages 差不多

结论：免费 + 国内可用 = 只能选 Cloudflare Pages

三、React 文档站框架对比​

框架特点推荐度
DocusaurusMeta 出品，React 驱动，MD/MDX 原生支持，React 组件可嵌入 MD，博客+文档一站搞定⭐⭐⭐⭐⭐
Next.js + MDX自由度最高，但路由、布局都要自己搭⭐⭐⭐
Astro + React性能好，但文档站体验不如 Docusaurus 开箱即用⭐⭐⭐
Gatsby太老，构建慢，不推荐⭐

结论：Docusaurus 完美匹配需求

四、最终方案​

Docusaurus（React 文档站框架） + Cloudflare Pages（免费托管）
需求实现方式
MD 文档docs/ 目录，自动生成路由和侧边栏
动态效果MD 里直接 import React 组件
实用链接src/pages/links.js 写 React 页面
博客（可选）blog/ 目录，开箱即用
部署推送 GitHub → Cloudflare Pages 自动构建部署

五、项目结构预览​

my-site/
├── docs/                    # 📄 MD 文章放这里
│   ├── frontend/
│   │   ├── react.md         # → /docs/frontend/react
│   │   └── css.md
│   └── tools/
│       └── git.md
├── blog/                    # 📝 可选：博客文章
├── src/
│   ├── pages/
│   │   └── links.js         # 🔗 实用链接页（React）
│   └── components/
│       └── AnimatedDemo.js  # ✨ 动态效果组件
├── static/                  # 静态资源
├── docusaurus.config.js     # ⚙️ 站点配置
└── package.json

六、MD 中嵌入动态效果的写法​

---
title: CSS 动画技巧
---

# CSS 动画

下面这个效果是用 React 写的 👇

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

<ToggleDemo />

核心代码很简单...

七、一条龙搭建命令​

# 1. 创建项目
npx create-docusaurus@latest my-site classic

# 2. 本地开发
cd my-site
npm start

# 3. 写文章 → 往 docs/ 扔 .md 文件
# 4. 写页面 → src/pages/ 下建 .js 文件
# 5. 动态组件 → src/components/ 下写，MD 里 import

# 6. 部署
#    代码推 GitHub → Cloudflare Pages 关联仓库 → 自动部署

八、后续可选升级方向​

方案费用备案效果
腾讯云 COS + CDN~几元/月需要国内毫秒级访问
香港轻量云（Nginx）~¥24/月不需要免备案 + 速度不错
自定义域名~¥50/年看托管平台更专业的形象

初期零成本跑通，后续有需求再升级。