事情经过鉴于 Vite 在前端开发的流行程度，本人打算学习一下 VitePress 这个静态网站生成工具，以便后面有用到的时候可快速上手。根据官方文档，很快就在本机初始化好了一个 VitePress 网站。接来下，就是需要一些 Markdown 文档充实网站内容。### “就地取材”考虑到是以学习和了解 VitePress 为目的，因此，我打算利用网道（WangDoc）上现成的 MD 文件作为网站内容。作为练手，我选择了网道上的《TypeScript 教程》的文档，只取其 GitHub 仓库的 docs 目录下的文件即可。在本地构建、预览一切 OK。### 远程部署在本地捯饬好之后，我打算把它部署到远程服务器。有很多可供选择的免费静态网站托管服务，如 Netlify、Vercel、GitHub Pages、Cloudflare Pages 等。出于学习和练手的目的，我选择 Vercel 作为静态文档托管工具。Vercel 使用很简单，基本流程为：注册账号、创建项目、导入 GitHub 仓库（需授权）、基本配置、部署。> ⚠️ 我在此过程中，还是碰到一些问题，主要是部署方面的问题。VitePress 官方文档关于部署到 Vercel 一笔带过，有些坑要自己淌过之后才知道，这也是一种学习过程。如果一切顺利，Vercel 将为你的网站分配一个形如 xxx-xxx-xxx.vercel.app 的二级域名。由于众所周知的原因，在国内并不能无痛访问 vercel.app 网站，所以，通过一番搜索，发现可以使用 Cloudflare 提供的服务来解决。### 使用 Cloudflare 代理访问 vercel.app 网站首先，你得先注册一个 Cloudflare 账号，然后：1. 准备一个域名，该域名需要使用 Cloudflare 提供的 DNS2. 进入Vercel 项目设置的域名配置，新增域名（可以是二级域名）3. Vercel 要求域名 cname 指向其提供的记录值4. 进入 Cloudflare 添加网站（要求是主域名），选择 Free Plan 即可5. 按照 Vercel 的要求，为域名添加 cname 记录6. 最后，不要忘记调整 Cloudflare SSL/TLS mode 为 Full(strict)完成上述流程，即可通过上面第一步设置的域名正常访问网站。---🔗 下面是我搭建好的 TypeScript 教程（VitePress 版）：- 链接 1：https://typescript-tutorial-gamma.vercel.app <--- 需要梯子- 链接 2：https://typescript-tutorial-gamma.kuaimax.com <--- 可无痛访问> 补充说明> 1. 本人只是抱着学习前端技术的目的，使用了阮一峰老师的教程内容（已在首页明显处标识了内容来源）> 2. 如果阮老师不希望第三方再次包装教程内容，本人可随时下架网站## 总结其实，学习 VitePress 并不是一件难事，但是，从零到最终网站上线，并能正常访问，这当中也有一些值得学习和记录的地方。特别是对于初学者而言，任何看似简单的事，一旦投入其中，总会发现一些没有碰到的问题。在不断地发现问题、解决问题的过程中，我们的技术和经验就会慢慢沉淀和提升。