通过 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 基本上是 svelte 的第一方支持，提供了 ssr 和 ssg 等开发模式（当然也可以选择 spa 不过态度都是不建议）。
在打包 static 的情况，简单设置就可以实现良好的 seo 支持，和 hydrate 功能，让一个 static site 也有 spa 的感觉。
-
这个几乎没什么好说的，ts 的类型系统可以说是目前最强。
-
我最常用的 css 方案，复用 Utility 规则，以及编译时包含只需要的 css 减少尺寸。
选择它对于我有很多原因
- class 命名令我非常头痛，并且经常写 wrapper ，container 实在没什么意义
- 良好的预设 reset css ，让我不用操心浏览器之间的差异，字体方面也处理好了
- JIT 支持，在默认提供不满足的情况下也能灵活实现
- 最近支持的 变体，减少了很多时候重复写相同 class 的问题，当然这也不是银弹，这就导致会多一个 css 出来，用的太多的话或许需要优化。
-
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 -->的功能，但是目前还没有开始解决。 -
这是一个通过评论组件，数据来源于 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/
Select Language