从零搭建一个技术博客与文档站
折腾了一周,把自己的技术博客和文档站搭起来了。整体架构借鉴了一些喜欢的个人站,记录一下整套技术栈,供朋友们参考。
整体架构
整个站点其实是两套独立系统的组合:
- 博客:Typecho 跑在腾讯云国内服务器上,支持后台在线写文章,适合发布技术博文和随手记的短笔记。
- 文档站:VitePress 静态站,本地写 Markdown,git push 后由 Cloudflare Pages 自动构建并部署到全球 CDN,适合放成体系的学习笔记。
两个站通过博客顶部的导航菜单连接,点击「文档」会跳转到 VitePress 站,从用户视角看像是同一个站。
技术栈一览
| 层 | 技术 | 说明 |
|---|---|---|
| 服务器 | 腾讯云 Lighthouse · Ubuntu 22.04 | 4 核 4G 配置 |
| Web 服务器 | Nginx | 处理 HTTP 请求 + PHP-FPM 转发 |
| 运行时 | PHP 8.1 + PHP-FPM | Typecho 的运行环境 |
| 数据库 | MySQL 8 | 存博客文章和配置 |
| 博客系统 | Typecho 1.3 | 轻量、PHP 写的、带后台 |
| 博客主题 | Jasmine | 极简风格 |
| 文档系统 | VitePress | Vue 生态,主打文档站点 |
| 代码托管 | GitHub | 文档源码仓库 |
| 自动部署 | Cloudflare Pages | CI/CD + 全球 CDN,免费 |
| 安全防护 | Nginx 路径拦截 + fail2ban | 拦扫描器、自动封暴力破解 IP |
为什么是这套组合
博客:为什么选 Typecho
考虑过 WordPress、Halo、Hexo,最后选了 Typecho 是因为:
- 程序极轻量,跑起来内存只占几十兆
- 后台原生支持 Markdown 在线写文章,这是我的核心需求
- 中文社区活跃,文档清晰
- 主题生态够用
文档站:为什么独立用 VitePress
文档站不放在 Typecho 里面,而是单独搭一套 VitePress,主要是因为:
- 文档需要层级目录、侧边栏、全文搜索,这些是博客系统不擅长的
- VitePress 是静态站,加载快、可以白嫖 CDN
- Markdown 原生支持,写作体验跟笔记软件一样
代价是文档不能在线编辑,只能本地写完 push,但相比体验提升,这是值得的取舍。
CI/CD:Cloudflare Pages 的自动部署
文档站的发布流程是 CI/CD(持续集成/持续部署) 模式:
本地写 Markdown
↓
git push 到 GitHub
↓
GitHub 通过 Webhook 通知 Cloudflare
↓
Cloudflare 自动 pull 代码、跑 npm install 和 vitepress build
↓
构建产物分发到全球 CDN
↓
1-2 分钟内,新内容全网可见这种模式也常被称为 GitOps:Git 仓库就是部署的唯一真相源,改 Git 等于改部署,不需要 SSH 上服务器、不需要手动 build、不需要手动上传文件。整个过程零运维。
而且 Cloudflare Pages 个人使用完全免费,无限请求、无限流量,这点挺友好。
安全加固的几个关键点
服务器一上公网就会被扫,日志里很快就能看到各种探测漏洞的请求(phpunit、wp-admin、phpmyadmin 等)。最低成本的防护:
1. Nginx 直接拦截敏感路径
2. fail2ban 自动封 IP
3. 关闭注册 + 强密码
踩过的几个坑
- VitePress 子目录入口需要 index.md:VitePress 不会自动找目录的入口文件,每个分类目录必须放一个
index.md,否则点击会 404。 - Cloudflare 改项目名不会改 pages.dev 域名:Project Name 只是后台显示名,实际访问 URL 是部署时确定的,改不了。
总结
整套搭下来,花费基本只有服务器和域名钱,其他工具(Cloudflare、GitHub、Typecho、VitePress)全部免费。日常使用体验:
- 写博客:浏览器打开后台,写完点发布, 方便简单
- 写文档:本地 VSCode 写完,
git push三连,等一会全网更新