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

[YeungKC]

通过 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/

[Chingim]

我不用 hexo ，但是我觉得你说它“ 繁琐的写作流程” ，这就很不公平了。

它一样可以：
- 设置 commit 的 webhook 或者直接用 vercel 部署
- 像你在 discuss 做的那样，它也可以直接在 github 的界面写 md ，并有预览功能

另外你提到的质量参差不齐，不也是一样可以自己写主题解决吗，在这个过程中，它是不是一样可以用你喜欢的技术栈呢？
- tailwind
- giscus

[YeungKC]

@Chingim

我想我说的有点模糊了，应该加上个大部分的定语。

你说的其实是对的，核心原因是因为我不想去了解 Hexo ，这一点我和朋友讨论过，有点累。

[jason94]

我是自己写了个 Action

https://github.com/zenghongtu/github-issue-to-hexo

自动把 issue 生成 Hexo post ，然后通过 Vercel 部署。

有个细节跟你一样，就把 issue number 加到 url 中，然后 issue 的 comment 就是对应 post 的 comment 😀

[huhexian]

https://t.me/FindBlog/106 帮你宣传了一下~

[YeungKC]

@huhexian 感谢

@jason94

嗯嗯，这个其实都是预处理的过程，我当时没有选择 action 的原因是因为 action 相对而言编写比较麻烦。

没有选择 issue 还有一个很重要的就是分类，discussion 可以设置其他人无法发表，如果希望的话也可以做到文章分类，整体就清爽不少（ btw ，开发过程中我发现分类实在太麻烦了，文章就没用上

然后 page 和 config 方面也是通过 discussion 去驱动的，这一点 issue 做出来可能就一堆 label ，实际上没有什么意义对于一个 blog 。

[YeungKC]

@jason94

然后我希望做到的是程序和数据完全分离，假设我只是开一个空 repo 在 discussion 上写，编写一个 action clone 然后执行 build 就可以了生成 blog 了，同理编写一个 script 也可以直接给到 vercel 部署，使用者甚至不需要关心代码更新进度如何。

[M9l7chlLGv]

GitHub Discussion 确实很搭 Giscus.
已 star ，路线图的一些东西或许可以看看我同样基于 SvelteKit 的博客启动器 Urara: https://github.com/importantimport/urara

[YeungKC]

@M9l7chlLGv 感恩，Gisucs 主题太难搞，我还没怎么看，看到你的也是一个非常好的思路～