慢慢构建

从 Obsidian 发布一篇文章

Ravenbaar — Tue, 08 Sep 2026 00:00:00 GMT

这篇文章是发布流程的公开样例，不包含私人笔记。

写作与链接

双链与中文锚点已完成发布验证；独立的链接测试页现已撤回。

未公开样例与草稿目录已通过上传排除检查。

图片与提示

[!NOTE] 发布说明文章上传后，由 GitHub Actions 构建并部署。

const message = "中文与 code";
console.log(message);

检查	状态
中文标题	已验证
附件	已验证

更新记录

样例版本：2。已完成从 Obsidian 更新同一篇文章的验证。

从一篇笔记开始，慢慢构建自己的博客

Ravenbaar — Tue, 08 Sep 2026 00:00:00 GMT

一个长期维护的网站，首先应该是一处愿意经常回来的地方。

我希望这里既能放下完整的技术教程，也能容纳解决一个小问题时留下的几行笔记。页面可以安静一些，让内容自己说话。

先把基本的事情做好

文字要易读，代码要清楚，图片应该帮助解释问题。无论在电脑还是手机上打开，都能顺着文章读下去。

现在的起点是 Astro 和 Typography。接下来，会逐步加入目录、搜索和图片放大，并打通 Obsidian 到网站的发布流程。

留下过程，也留下结果

技术记录不只有最后一条命令。为什么这样做、哪里容易出错、如何确认成功，同样值得写下来。

把今天弄明白的一件事，写成明天依然看得懂的文字。

这是一篇用于审阅排版的项目样例，正式内容会在发布流程确认后加入。

技术文章样例：从 Markdown 到静态网页

Ravenbaar — Mon, 07 Sep 2026 00:00:00 GMT

这篇样例用于检查技术文章的排版。它包含常见的内容类型，并给后续的 Obsidian 转换提供一份公开测试材料。

一、整理文章

给文章一个清楚的标题和固定的文件名。修改标题时保持文件名不变，已有链接就不会轻易失效。

文章属性

title: 我的第一篇技术笔记
pubDate: 2026-09-08
categories:
  - 技术笔记
draft: false

draft 控制文章是否进入正式构建。它与插件用于选择上传的 share 是两件事，需要在发布配置中分别处理。

保持固定链接

文件名是文章的稳定标识。例如 technical-writing-sample 不随标题修改变化。第四级标题用于细分说明，目录也应保留这一层级。

二、执行构建

下面是一个 JavaScript 示例，展示如何把步骤组织成明确的返回值。

function describeRelease({ title, version, files }) {
  return {
    title,
    version,
    fileCount: files.length,
    ready: files.length > 0,
  }
}

const release = describeRelease({
  title: '一篇技术笔记',
  version: 'preview-01',
  files: ['index.html', 'styles.css'],
})

console.log(release)

长行与长代码

下面的长行用于检查手机上的换行和完整复制；复制后应该保留原始文本。

release-artifact: technical-writing-sample--immutable-static-assets--verified-build--image-and-search-index--rollback-ready--2026-09-08
01. 选择公开文章
02. 核对文章属性
03. 检查附件范围
04. 导出 Markdown
05. 校验内部链接
06. 排除草稿与私有引用
07. 生成静态页面
08. 构建搜索索引
09. 检查订阅源
10. 保留构建产物
11. 上传候选版本
12. 检查页面与图片
13. 切换正式版本
14. 记录回退目标
15. 复核公开页面
16. 完成本次发布

对比各个环节

环节	输入	输出
写作	观察与实验	Markdown 笔记
转换	选定的文章和附件	网站内容文件
构建	内容、主题和配置	静态网页
部署	验证后的发布包	可访问的网站

窄屏上的宽表格可以独立横向滚动，也可以聚焦表格后用方向键查看。

检查项	桌面浏览器	手机浏览器	键盘操作	页面切换后
文章目录	侧栏展示	可折叠	Tab 与 Enter 定位	切换为当前文章目录
图片预览	点击放大	点击放大	Enter 打开、Escape 关闭	重新绑定一次
搜索	标题、分类与正文	同一索引	输入后 Enter	可重复进入

三、用图片补充说明

图片应当有替代文字；外链下载应说明文件内容，让读者知道点击后会得到什么。

可以阅读 Astro 文档，或<a href="/images/publishing-flow.svg" download="publishing-flow.svg" data-no-swup>下载发布流程示意图（SVG）</a>。

四、检查结果

首页能够找到新文章。
代码、表格和图片在窄屏上仍然可读。
页面中的链接指向预期内容。
草稿不会出现在正式站点或订阅源中。

[!NOTE] 这是 Obsidian 官方语法的 Callout。文章源保留 Markdown，网站在构建时生成对应结构。

提示与折叠

[!TIP] 给读者一个清楚的下一步可以通过目录定位、放大图片，或搜索正文里的「不可变产物」。

[!WARNING]- 展开检查发布前置条件确认构建成功，再核对目标目录与回退版本。

DNS、证书与缓存分别验证。

上传成功并不等于公开页面可用。

[!EXAMPLE]+ 默认展开的例子在不引入私人文章的情况下，使用合成样例验证表现。

[!SUCCESS] 嵌套说明不可变产物便于核对版本，也便于回退。

[!QUESTION] 只有标题也成立

普通引用保留原来的排版，不会被当作 Callout。

继续阅读

回到首页，阅读为什么开始写技术博客，再返回这篇文章，检查目录、代码复制、图片和折叠提示是否仍然可用。

把技术过程写清楚：步骤、标签页与延伸阅读

Ravenbaar — Sun, 06 Sep 2026 00:00:00 GMT

import Steps from '../../components/article/Steps.astro' import Tabs from '../../components/article/Tabs.astro' import Tab from '../../components/article/Tab.astro' import LinkCard from '../../components/article/LinkCard.astro'

一篇教程不必堆满组件。读者需要执行顺序时用步骤，需要比较同一操作的不同写法时用标签页，延伸材料则用一张简洁的卡片。

把发布分成三个步骤

<Steps>

准备内容

选好公开文章和附件，确认标题、日期及固定链接。
检查产物

阅读页面，验证代码、图片和搜索，保留可核对的版本。
发布与复核

在部署条件具备后发布，再访问公开页面检查结果。

</Steps>

选择适合的代码示例

两个示例都输出同样的结果。点击标签切换，也可以用左右方向键、Home 和 End 选择；Tab 键进入当前面板。

const message = '写清楚，也验证清楚。'
console.log(message)

</Tab> <Tab title="Python">

message = '写清楚，也验证清楚。'
print(message)

</Tab> </Tabs>

延伸阅读