Skip to main content

我的站点是如何构建的？！

· 5 min read

我的站点 wener.me 和国内备案镜像 wener.tech 构建过程和逻辑。

Docusaurus​

站点基于 docusaurus 2.0-alpha 构建，docusaurus 处于 2.0-alpha 已经很长一段时间了，最近进入了 beta 阶段。早期对中文支持有缺陷，提交几个修复后都能正常使用了。

docusaurus 有 blog 和 doc 的概念。 docusaurus 本身是 facebook 为了支持技术文档存在的，因此对 doc 的支持非常好，doc 主要特性

  • 多版本
  • 多语言
  • 集成 algolia 搜索
  • 自定义插件
  • mdx
  • 支持替换内置 组件

doc 默认目录为 /docs，可自定义。

blog 为单篇文章，默认目录为 /blog，支持自定义 slug，默认 slug 为泛化后的文件名。

# 新项目初始化
npx @docusaurus/init@latest init my-website classic

构建​

归根结底，docusaurus 是一个 npm 库，因此实现自定义需要基于一个 node 项目。 站点的构建项目位于 site 目录下，构建过程为

  • 同步 /story 到 /site/story
  • 同步 /notes 到 /site/notes
tip

同步过程会过滤部分 md 文件，docusaurus 默认会处理所有 md 文件，但是 wenerme/wener 中的部分 md 文件是不希望被构建的。 因此我的过滤逻辑是只包含文件开头有 frontmatter 的，也就是文件开头为 ---。

  • 预处理 markdown
  • 自定义脚本生成 sidebar
    • docusaurus 的 sidebar 需要手动书写，但文档过多且每次新增后都需要添加，因此实现了脚本自动扫描
    • site/sidebars.js#L48-L65
  • 站点构建
    • 构建后会生成到 /build 目录

自动化部署​

站点基于 github action 进行构建，每次推送后会进行构建，会将构建的内容推送到 gh-pages 分支。 推送的内容同时包含了 CNAME，实现了 wener.me 域名的映射。

完成 wener.me 推送后修改 CNAME 为 wener.tech 推送到 wenerme/wener.tech，实现 wener.tech 域名的映射。

域名配置​

.me 域名在国内无法备案，因此直接托管在了 cloudflare.com，添加两个记录

A wener.me 185.199.109.153
A wener.me 185.199.108.153

至此 wener.me 可以被访问。

因为 cloudflare 在国内访问速度较慢，且 .me 无法备案的原因，因此镜像了 wener.tech。

caution

微信会拦截所有没有备案的域名，提示用户是否前往，非常影响体验。

wener.tech 使用 nginx 缓存实现。

wener.tech 使用阿里云 dcdn/全站加速 实现，添加域名 www.wener.tech ，指向 185.199.108.153 和 185.199.109.153。 添加完成后前往域名解析，将 www.wener.tech CNAME 到 www.wener.tech.w.kunluncan.com 。完成后建议开启 https。

至此 www.wener.tech 可以被访问。

dcdn 的 坑
  • 阿里的 dcdn 实现和 cloudflare 类似的功能，但体验差很多
  • dcdn 通过 CNAME 实现，主域名 wener.tech 无法进行 CNAME，因此只能使用 www.wener.tech
  • 访问 wener.tech 会发现左侧侧边栏卡顿，应该是 dcdn 的“优化”导致的
    • wener.me 没有这个问题

总结​

基于 github action + cloudflare 可以很容易实现“免费”的静态站点托管。 如果需要动态能力，可以配合 next.js+vercel 实现。例如 apis.wener.me。

cloudflare 看似没起什么作用，但是却是必须的，因为默认 github pages 和 vercel 在国内都无法访问，或访问都是间歇性能通，使用 cloudflare 虽然速度偏慢，但至少都能访问。