一个通过 Github Discussion 驱动的 Blog 启动器

通过 Github 自制 Blog 是很久之前的想法，之前也曾试过使用 Hexo, Gatsby 和 Docusaurus ，但是因为各种原因失败了，然后，Hakuba 它来了。

初衷

之前的 Blog 是基于 Hexo ，其实仅仅也是选用了社区的主题，部署一下而已，但是也有很多东西让我不满，比如：

• 繁琐的写作流程

  我需要打开对应文件夹，创建，写作，为了 preview 还需要确定打开的支持的编辑器，然后提交到，然后自动部署。

  其实说非常繁琐，可能不算是，但是每一次都会有一种奇怪的仪式感伴随着我，在我看来这变得是一件非常正式的事情，如果是长文章还好，假如我某天只想分享某个技巧，也需要一样的流程。（虽然说其实变得更简单了我可能也不会写多少文章

  并且如果希望在移动设备上简单编辑，虽然相关的解决方案不少，但是总是变得麻烦。

  但是如果可以通过 CMS 去写作就会变的方便不少，市面上有很多 CMS ，其中最出名应该就是 WordPress 了，也有人用 notion 去写作。我甚至有个朋友用 notion 去做 api 。

• 质量参差不齐

  当时使用的是 hexo-theme-cactus 主题，风格非常得我心，并且 Hakuba 也被它影响。

  但是如果 测试一下 评分就有点不忍直视，这仅仅是一个 Blog ，没有复杂的交互，图片也不多，我认为这个速度和体积不能接受。

预期

对于 Blog 的预期，在我看来有以下几个：

• 必须要有良好的 SEO
• 必须要体积非常小
• 必须支持 hydrate
• PageSpeed 评分接近满分
• 方便的编写方式

技术栈

• SvelteKit

  SvelteKit 基本上是 svelte 的第一方支持，提供了 ssr 和 ssg 等开发模式（当然也可以选择 spa 不过态度都是不建议）。

  在打包 static 的情况，简单设置就可以实现良好的 seo 支持，和 hydrate 功能，让一个 static site 也有 spa 的感觉。

• Typescript

  这个几乎没什么好说的，ts 的类型系统可以说是目前最强。

• Tailwindcss

  我最常用的 css 方案，复用 Utility 规则，以及编译时包含只需要的 css 减少尺寸。

  选择它对于我有很多原因

  • class 命名令我非常头痛，并且经常写 wrapper ，container 实在没什么意义
  • 良好的预设 reset css ，让我不用操心浏览器之间的差异，字体方面也处理好了
  • JIT 支持，在默认提供不满足的情况下也能灵活实现
  • 最近支持的 变体，减少了很多时候重复写相同 class 的问题，当然这也不是银弹，这就导致会多一个 css 出来，用的太多的话或许需要优化。

• MDsveX

  Svelte 的 Markdown 预处理器，非常令人惊喜的是他甚至可以直接使用 Svelte 的 component ，虽然目前并没有用上，但是 page 和 post 都天然支持了这一点。

  比如:

  <script> import { Chart } from "../components/Chart.svelte"; </script> # Here’s a chart The chart is rendered inside our MDsveX document. <Chart /> 

  但是它对于编写 md 存在一些限制，就是不能用 4 个空格去缩进代码，这一点对我影响不大。

  其实有些问题我还没解决，我希望实现 Hexo <!-- more --> 的功能，但是目前还没有开始解决。

• giscus

  这是一个通过评论组件，数据来源于 Discussion ，完美契合 Hakuba 。

  存在的问题是样式目前和正文并不一致，关于这一点其实大部分评论插件都有，这个我不知道他们怎么忍的，这个未来必须得解决了

由于篇幅缘故，这里就不赘述太多开发过程记录，有兴趣可以点击这里查看

实现原理

预处理数据

构建过程大概是，通过 script 预先分析目前的 Discussion ，从中分离出 config ，page ，和 post 。

对于 post 和 page ，通过 Discussion 增加 front meta ，然后输出对应的 md 文件。

config 数据写入到 .env.local 中，因为优先级问题这样只会在构建时就使用了，如果运行 script ，那么只有 .env 生效。

具体实现在这里

webhook

由于 Vercel 等服务提供了 deploy 服务，可以简单的创建 Deploy Hook ，只需要将 Deploy Hook 的 URL 添加到 Repo setting 的 webhook 中即可。

• 创建一个新的 Deploy Hook 。
• 前往仓库设置页面设置 webhook 。选择 Discussion 事件。

更多信息

开发过程记录: https://yeungkc.com/post/2/

更详细的配置可以参考: https://github.com/YeungKC/Hakuba/

Demo 体验地址：https://hakuba.yeungkc.com/