V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
YeungKC
V2EX  ›  分享创造

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

  •  
  •   YeungKC · 2022-07-25 08:02:38 +08:00 · 2083 次点击
    这是一个创建于 612 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Hakuba screenshots

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

    8 条回复    2022-07-25 14:27:14 +08:00
    Chingim
        1
    Chingim  
       2022-07-25 08:20:18 +08:00 via iPhone
    我不用 hexo ,但是我觉得你说它“ 繁琐的写作流程” ,这就很不公平了。

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

    另外你提到的质量参差不齐,不也是一样可以自己写主题解决吗,在这个过程中,它是不是一样可以用你喜欢的技术栈呢?
    - tailwind
    - giscus
    YeungKC
        2
    YeungKC  
    OP
       2022-07-25 08:31:54 +08:00
    @Chingim

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

    你说的其实是对的,核心原因是因为我不想去了解 Hexo ,这一点我和朋友讨论过,有点累。
    jason94
        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 😀
    huhexian
        4
    huhexian  
       2022-07-25 10:40:25 +08:00
    https://t.me/FindBlog/106 帮你宣传了一下~
    YeungKC
        5
    YeungKC  
    OP
       2022-07-25 11:42:48 +08:00
    @huhexian 感谢

    @jason94

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

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

    然后 page 和 config 方面也是通过 discussion 去驱动的,这一点 issue 做出来可能就一堆 label ,实际上没有什么意义对于一个 blog 。
    YeungKC
        6
    YeungKC  
    OP
       2022-07-25 11:46:14 +08:00
    @jason94

    然后我希望做到的是程序和数据完全分离,假设我只是开一个空 repo 在 discussion 上写,编写一个 action clone 然后执行 build 就可以了生成 blog 了,同理编写一个 script 也可以直接给到 vercel 部署,使用者甚至不需要关心代码更新进度如何。
    M9l7chlLGv
        7
    M9l7chlLGv  
       2022-07-25 12:42:42 +08:00
    GitHub Discussion 确实很搭 Giscus.
    已 star ,路线图的一些东西或许可以看看我同样基于 SvelteKit 的博客启动器 Urara: https://github.com/importantimport/urara
    YeungKC
        8
    YeungKC  
    OP
       2022-07-25 14:27:14 +08:00
    @M9l7chlLGv 感恩,Gisucs 主题太难搞,我还没怎么看,看到你的也是一个非常好的思路~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   951 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 21:23 · PVG 05:23 · LAX 14:23 · JFK 17:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.