Hugo 博客主题 Somnia

最近也是更新了主题，Somnia。

缘起

最近也是更新了新主题。这原本是一个 Astro 主题，迁移过来了。样式现代，优雅而美观。

虽然很久没写博客了，但是零零碎碎的嘟嘟也不算少。而写在日记里的，随手记得笔记更多一些。不过没什么动力把这些东西写成博文。尤其是 AI 参与到我学习生活之中之后，我之前写的很多笔记，AI 随便一总结，比我记得都好。又详细又全面。还省事。那些零零碎碎的想法，AI 可以很轻松展开成一篇篇文章。

不过我还是换了主题。未来想写什么再说吧。先说说主题相关。

这次，我没有使用 Astro 而是搞成 Hugo 主题。

首先，Hugo 速度很快。以前我测试过上千篇文章，大概三秒就能构建完成了。

然后就是单二进制文件，没有额外依赖。我在 npm 生态踩过一些坑，比如以前使用 gitbook 的时候，比如想修改 Docute 但是没构建成功，以及前端项目层层依赖的或新或旧，或 beta 或 Deprecated 的库。在踩过这些坑之后，单独的二进制文件，几个布局文件，就显得十分可贵了。Hugo 让我有自信随便放几个月甚至几年后也可以轻松地捡起来运行博客。至少 Github Action 能跑通。

再就是 Astro 这个项目，某种程度看上去更偏向于商业建站。Astro 的主题，更像是模板。WordPress 可以一键更换主题，一键更新。Hexo Hugo 麻烦些，需要重新写配置，更新可以直接 git pull。而 Astro 更换一个主题也可以说是，把 content 文件夹移动到了新主题里。想实现什么功能，都可以自己写，或者 AI 写。

Astro 的优势，在于前端生态。用库很爽。各种优化工具，兼容工具用起来非常方便。组件化，模板化工程管理也很完善。这些都是非常加分的体验。这方面 Hugo 最近才更新了 css 打包功能，由此可以窥得一二。

Data has shown that 99% of use cases for all developer tooling are building unnecessarily complex personal blogs. Just kidding. But seriously, if you are trying to build a blog for personal or small business use, consider just using normal html and css. You definitely do not need to be using a heavy full-stack javascript framework to make a simple blog. You’ll thank yourself later when you return to make an update in a couple years and there haven’t been 10 breaking releases to all of your dependencies. ¹

总的来说是一个权衡问题，我的需求是快递，简单，自然就是 Hugo 了。

Somnia

这个 Hugo 主题 Somnia 用的几个框架我之前就用过。原本项目是 UnoCSS 加上原生 js 写的。我加上了 Alpine.js 和 Swup.js 实现了页面平滑过渡。去年我试了 Alpine.js + HTMX 搞个主题，本来样式都写好了，但后来测试发现 HTMX 实在是不太符合预期。这次 Alpine.js 和 Swup.js 总算配合的不错。

Swup.js 是一个页面平滑过渡库。我自建站伊始，就关注过 pjax 。后来选择使用 DoIt 也有因为这个主题使用 pjax 的原因（虽然后来删除了这个依赖）。随着时代的变化，现在更流行的做法应该是 Vue 写的 SPA 这样。比如说 Vitepress，不是一般的流畅。但是那就是 npm 生态的事了。

Swup.js 盯上有段时间了，才用到博客上是因为 Swup.js 要求对全局 js 有比较统一的管理。改一个主题适配 Swup.js 还是有点费劲，容易出 bug。不过用上 Alpine.js 就方便多了。可以实现一个组件化效果。例如：

<div x-data="counter()" class="counter">
  <h3>计数器</h3>
  <p>数值: <span x-text="count"></span></p>
  <button @click="add">+1</button>
  <button @click="sub">-1</button>
</div>
<script>
  function counter() {
    return {
      count: 0,
      add() {this.count++},
      sub() {this.count--}
    }
  }
</script>
<style>
</style>