通过 Github 自制 Blog 是很久之前的想法,之前也曾试过使用 Hexo, Gatsby 和 Docusaurus ,但是因为各种原因失败了,然后,Hakuba 它来了。
之前的 Blog 是基于 Hexo ,其实仅仅也是选用了社区的主题,部署一下而已,但是也有很多东西让我不满,比如:
繁琐的写作流程
我需要打开对应文件夹,创建,写作,为了 preview 还需要确定打开的支持的编辑器,然后提交到,然后自动部署。
其实说非常繁琐,可能不算是,但是每一次都会有一种奇怪的仪式感伴随着我,在我看来这变得是一件非常正式的事情,如果是长文章还好,假如我某天只想分享某个技巧,也需要一样的流程。(虽然说其实变得更简单了我可能也不会写多少文章
并且如果希望在移动设备上简单编辑,虽然相关的解决方案不少,但是总是变得麻烦。
但是如果可以通过 CMS 去写作就会变的方便不少,市面上有很多 CMS ,其中最出名应该就是 WordPress 了,也有人用 notion 去写作。我甚至有个朋友用 notion 去做 api 。
质量参差不齐
当时使用的是 hexo-theme-cactus 主题,风格非常得我心,并且 Hakuba 也被它影响。
但是如果 测试一下 评分就有点不忍直视,这仅仅是一个 Blog ,没有复杂的交互,图片也不多,我认为这个速度和体积不能接受。
对于 Blog 的预期,在我看来有以下几个:
SvelteKit 基本上是 svelte 的第一方支持,提供了 ssr 和 ssg 等开发模式(当然也可以选择 spa 不过态度都是不建议)。
在打包 static 的情况,简单设置就可以实现良好的 seo 支持,和 hydrate 功能,让一个 static site 也有 spa 的感觉。
这个几乎没什么好说的,ts 的类型系统可以说是目前最强。
我最常用的 css 方案,复用 Utility 规则,以及编译时包含只需要的 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 生效。
由于 Vercel 等服务提供了 deploy 服务,可以简单的创建 Deploy Hook ,只需要将 Deploy Hook 的 URL 添加到 Repo setting 的 webhook 中即可。
开发过程记录: https://yeungkc.com/post/2/
更详细的配置可以参考: https://github.com/YeungKC/Hakuba/
Demo 体验地址:https://hakuba.yeungkc.com/
1
Chingim 2022-07-25 08:20:18 +08:00 via iPhone
我不用 hexo ,但是我觉得你说它“ 繁琐的写作流程” ,这就很不公平了。
它一样可以: - 设置 commit 的 webhook 或者直接用 vercel 部署 - 像你在 discuss 做的那样,它也可以直接在 github 的界面写 md ,并有预览功能 另外你提到的质量参差不齐,不也是一样可以自己写主题解决吗,在这个过程中,它是不是一样可以用你喜欢的技术栈呢? - tailwind - giscus |
2
YeungKC OP |
3
jason94 2022-07-25 10:12:22 +08:00
我是自己写了个 Action
https://github.com/zenghongtu/github-issue-to-hexo 自动把 issue 生成 Hexo post ,然后通过 Vercel 部署。 有个细节跟你一样,就把 issue number 加到 url 中,然后 issue 的 comment 就是对应 post 的 comment 😀 |
4
huhexian 2022-07-25 10:40:25 +08:00
https://t.me/FindBlog/106 帮你宣传了一下~
|
5
YeungKC OP |
6
YeungKC OP @jason94
然后我希望做到的是程序和数据完全分离,假设我只是开一个空 repo 在 discussion 上写,编写一个 action clone 然后执行 build 就可以了生成 blog 了,同理编写一个 script 也可以直接给到 vercel 部署,使用者甚至不需要关心代码更新进度如何。 |
7
M9l7chlLGv 2022-07-25 12:42:42 +08:00
GitHub Discussion 确实很搭 Giscus.
已 star ,路线图的一些东西或许可以看看我同样基于 SvelteKit 的博客启动器 Urara: https://github.com/importantimport/urara |
8
YeungKC OP @M9l7chlLGv 感恩,Gisucs 主题太难搞,我还没怎么看,看到你的也是一个非常好的思路~
|