Thus.Live：给文章留个地方

前面聊过 uPage，用来整理个人介绍、项目和兴趣。主页搭起来之后，做过的东西有地方摆了，不过有些内容，几句话还真说不清楚。

比如一个工具为什么这么写，某个问题绕了多久才解决，或者学了点新东西，想趁着还记得赶紧记下来。这些都适合单独写成文章，慢慢聊。

这次拿出来介绍的，就是 Thus.Live。一个用 Markdown 写文章的静态博客模板，你现在看到的这个博客，也是基于它搭的。

你看，个人主页有了，博客也有了。接下来总该认真填点内容了。

先看看长什么样 ​

仓库默认内容的实际运行截图，介绍和头像都可以换成自己的。

Thus.Live 的页面比较简单。白色背景、深色文字，链接用一点青绿色，段落之间留出空隙。首页可以写自我介绍，也可以放图片和链接，具体放什么由自己决定。

到了博文列表，重点就是标题、摘要，以及日期、作者和阅读时间。想了解一篇文章在聊什么，扫一眼就够了。

文章页支持明暗主题，桌面上右侧有章节目录，读长文时可以随时跳到想看的部分。手机上则把目录收起来放在正文前面，代码和表格在各自的区域里横向滚动。

晚上想换个深色背景，也可以。

这些安排都围绕一件很普通的事：打开文章之后，能舒服地把它读完。具体布局可以看看仓库里的设计说明。

想写什么，打开 Markdown 就行 ​

我平时写代码，文档和笔记也没少写。能直接在熟悉的编辑器里打开一个文件，写完保存，对我来说就挺顺手。

Thus.Live 的文章放在 content/posts/，按年、月、日组织目录。比如这篇介绍，可以这样放：

content/posts/
└── 2026/09/22/
    ├── thus-live-introduction.md
    └── assets/
        └── screenshot.png

文章开头填写标题、摘要和标签，后面就是正文：

---
title: 今天又折腾了点什么
description: 记一下过程，也给下次的自己留个参考。
tags: [个人项目, 开发笔记]
draft: false
---

## 事情是这样的

原本只是想解决一个小问题，写着写着，又多了一个项目。

日期由目录决定，不用每篇再填一次。图片可以放在文章旁边，用相对路径引用；图片比较多的话，也可以给文章单独建一个文件夹，把正文放进 index.md。

列表、标签和时间轴会随着内容一起生成。写完之后，不用再去几个页面里手动补入口。目录规则和文章信息的写法，都放在了博客编写与发布指南里。

项目也有一个配套的本地工具 Live Editor，可以用来管理博客和文章。习惯直接编辑文件的话，继续用自己顺手的编辑器就好。

写开发笔记，总免不了贴代码 ​

普通的标题、列表、引用、图片和表格，日常写作基本都会用到。聊到开发过程时，还需要把代码讲清楚。

Thus.Live 使用 Shiki 做代码高亮，支持行号、复制、指定行高亮，以及修改前后的差异展示。需要同时展示几个文件时，可以把它们放进代码分组，读者按标签切换。

比如介绍一个小功能，正文先说明要解决什么，再把关键代码放出来；改了哪几行，就把那几行标出来。这样过段时间自己回来翻，也不至于盯着整段代码重新猜一遍。

另外还有任务列表、脚注、数学公式和 Mermaid 图表。偶尔想记一个推导过程，或者画一下调用流程，也能放在同一篇文章里。需要这些格式时，可以直接翻Markdown 写作与代码展示，照着示例写。

不需要一开始就把所有写法学一遍。先把想说的话写下来，用到哪里再查哪里。

文章慢慢多起来，也能找得到 ​

刚开始只有几篇文章，从上往下翻就行。等开发笔记、项目介绍和日常记录攒到一起，就需要一些整理方式了。

Thus.Live 提供了几个入口：

一篇文章可以有多个标签。比如介绍一个自己写的小工具，既可以放进“个人项目”，也可以加上用到的技术。

搜索会查找标题、摘要、正文和标签，索引在第一次打开搜索时加载，不需要另外接搜索服务。功能和操作方式在项目说明里有整理。

对我来说，博客还有一点备忘录的意思。今天弄明白的问题，下次不一定还记得。到时候能搜回自己写过的文章，多少能少绕一点路。

更新了文章，也可以通过 RSS 找到你 ​

首页最后留了一个 RSS 入口。觉得内容有意思，就订阅一下，下次更新时在阅读器里见。

Thus.Live 可以订阅全部文章，也可以只订阅一个标签。比如只想看个人项目，就订阅对应的话题，其他日常内容按自己的兴趣随便逛逛。

当前 Feed 提供标题、摘要和原文链接等信息，不是全文订阅。想继续读，点开原文就好。

启用也很直接：在站点配置里填上正式域名，重新构建和部署，订阅地址就会生成。后续文章更新同样需要重新发布，阅读器才能获取新内容。具体地址和配置方式见RSS 订阅说明。

如果同时在用 uPage，还可以把博客的 RSS 接到主页里，让主页展示最近写的文章。这样项目和文章就串起来了。uPage 的文章列表是在构建时更新的，博客发了新文章之后，主页也要重新构建和发布一次。

换成自己的博客，要改哪些地方 ​

日常使用主要接触这几处：

首页本身也是 Markdown。保留开头的 layout: home，下面就可以按自己的想法写。我的首页放了自我介绍，聊聊平时做什么，再留几个入口；你也可以只写一句欢迎，然后直接让大家去看文章。

站点配置可以从简单的开始：

{
  "name": "我的博客",
  "author": "你的名字",
  "title": "我的博客 · 记录与分享",
  "description": "写点代码，也记录生活。",
  "url": "https://blog.example.com",
  "footer": "想到什么，就写点什么。"
}

这里的域名是示例，正式使用时换成自己的。作者目前是全站统一设置的，修改一次，文章列表和正文等位置会一起更新。

完整字段可以看站点配置说明。先把名字、介绍和首页换好，基本就有自己的样子了。配色和排版想继续折腾，也可以再改主题样式。

在自己电脑上跑起来 ​

项目使用 Vue 3、VitePress 和 TypeScript。准备 Node.js 22.12 或更高版本，以及 npm；仓库目前推荐使用 Node.js 24。

先把项目下载到本地，安装依赖并启动：

git clone https://github.com/uMisty/Thus.Live.git
cd Thus.Live
npm ci
npm run dev

打开终端给出的本地地址，就能边修改边看效果。快速开始里也列出了相关命令。

新建文章可以手动建文件，也可以执行：

npm run new:post -- my-first-post --title "我的第一篇文章"

省略日期时，会按上海时区使用当天日期。这个命令默认创建草稿，也就是 draft: true。

这里有个需要留意的小地方：草稿在本地开发时也不会生成文章页。 想预览正文，需要先改为 draft: false，再重启开发服务。新增、删除、移动文章或切换草稿状态后，也需要重启；普通正文修改则可以直接刷新效果。操作细节见写作指南。

准备发布时，构建并检查一下：

npm run build
npm run check:output
npm run preview

看一遍文字、图片、链接和手机上的排版，确认没有问题，再发布生成的 dist 目录。重新构建后，静态预览服务也需要重启。

写完之后，发布成静态网站 ​

Thus.Live 会在构建时把文章生成独立的 HTML。基础正文在禁用 JavaScript 的情况下也能阅读，搜索等交互功能则需要 JavaScript。

部署可以交给 Vercel，也可以把构建结果放到自己的 Nginx 服务器上。仓库还提供了 Docker 配置，方便按习惯选择。

网站发布后不需要运行 Node 服务，也不需要维护数据库。Node.js 主要用在本地开发和构建阶段。平时更新文章，就修改文件，再构建和发布一次；接上托管平台的自动部署之后，也可以让提交代码触发这一步。

目前默认配置面向域名根路径，比如 https://blog.example.com/。如果想放到 https://example.com/blog/ 这样的子目录，需要额外调整。具体平台设置和路径要求，都放在部署说明里。

对个人博客来说，这样的维护方式挺合适。文章在自己的文件里，网站发布出去之后，就在那里等人慢慢看。

最后再聊两句 ​

和 uPage 一样，Thus.Live 也是我折腾 Vibe Coding 的一部分。博客搭起来了，接下来就一边写，一边慢慢改。

项目采用 0BSD 协议开源。想搭一个自己的博客，可以拿去试试，换上自己的名字，写自己想写的东西。

有问题或者建议，欢迎到 GitHub 聊聊。

博客里也不一定每篇都要讲什么大道理。解决了一个小问题，学会了一点新东西，或者今天只是有点想法，都可以写下来。

至于更新频率，先不立什么目标了。想到什么就写点什么，下篇文章再见。