安装 belt CLI 技能:
npx skills add belt-sh/cli
技术博客写作
通过 inference.sh CLI 撰写面向开发者的技术博客文章。
快速开始
需要 inference.sh CLI (
belt)。安装说明
belt login
# 调研主题深度
belt app run exa/search --input '{
"query": "building REST API Node.js best practices 2024 tutorial"
}'
# 生成标题图像
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;padding:60px;font-family:ui-monospace,monospace;color:white\"><div><p style=\"font-size:18px;color:#38bdf8;margin:0\">// 工程博客</p><h1 style=\"font-size:48px;margin:16px 0;font-weight:800;font-family:system-ui;line-height:1.2\">我们如何通过边缘缓存将API延迟降低90%</h1><p style=\"font-size:20px;opacity:0.6;font-family:system-ui\">深入探究我们的CDN架构</p></div></div>"
}'
博客文章类型
1. 教程 / 操作指南
分步说明。读者应该能够跟着做并构建出一些东西。
结构:
1. 我们要构建什么(附截图/演示)
2. 前置条件
3. 步骤 1:设置
4. 步骤 2:核心实现
5. 步骤 3:...
6. 完整代码(GitHub 链接)
7. 下一步 / 扩展
| 规则 | 原因 |
|---|---|
| 首先展示最终结果 | 读者可以判断是否值得继续读下去 |
| 明确列出前置条件 | 不要浪费目标受众的时间 |
| 每个代码块都应可运行 | 复制-粘贴-运行是最好的检验 |
| 解释“为什么”而不仅仅是“怎么做” | 解释原理的教程会被分享 |
| 包含错误处理 | 真实代码会有错误 |
| 链接到完整代码仓库 | 教程之后可以参考 |
2. 深度解析 / 解释性文章
深入解释一个概念、技术或架构决策。
结构:
1. [概念]是什么,为什么你应该关心?
2. 它如何工作(简化的心智模型)
3. 它如何工作(详细的机制)
4. 现实世界示例
5. 权衡以及什么时候不该使用它
6. 延伸阅读
3. 事后剖析 / 事件报告
描述哪里出了问题、为什么以及如何修复。
结构:
1. 总结(发生了什么、影响、持续时间)
2. 事件时间线
3. 根本原因分析
4. 实施的修复
5. 我们正在采取什么措施防止再次发生
6. 经验教训
4. 基准测试 / 对比
基于数据的工具、方法或架构对比。
结构:
1. 我们比较了什么以及为什么
2. 方法论(确保结果可重现)
3. 包含图表/表格的结果
4. 分析(数字意味着什么)
5. 建议(含限制条件)
6. 原始数据 / 重现说明
5. 架构 / 系统设计
解释系统是如何构建的以及为什么做出某些决策。
结构:
1. 我们需要解决的问题
2. 约束和需求
3. 考虑的方案
4. 选择的架构(附图表)
5. 我们接受的权衡
6. 结果和经验教训
面向开发者的写作规则
语气和语调
| 该做的 | 不该做的 |
|---|---|
| 直接:"使用连接池" | "你可能想要考虑使用..." |
| 承认权衡:"这会增加复杂性" | 假装你的解决方案完美无缺 |
| 使用"我们"表示团队决策 | "我一个人设计了..." |
| 具体数字:"将p99从800ms降低到90ms" | "显著提升了性能" |
| 引用来源和基准测试 | 提出没有根据的论断 |
| 承认替代方案 | 假装你的方案是唯一途径 |
开发者讨厌的内容
❌ "在今天这个快速变化的技术世界中..."(废话)
❌ "众所周知..."(如果大家都知道,你为什么要写?)
❌ "只需做X"(如果你在读教程,说明没什么是简单的)
❌ "这很容易..."(轻视读者的经验)
❌ "显然..."(如果显而易见,就别写)
❌ 技术内容里的营销语言
❌ 在3段背景介绍之后才切入正题
代码示例
| 规则 | 原因 |
|---|---|
| 每个代码块都必须可运行 | 错误的示例会摧毁信任 |
| 展示完整、可工作的示例 | 没有上下文的代码片段毫无用处 |
| 在围栏代码块中包含语言标识符 | 语法高亮 |
| 在代码后展示输出/结果 | 读者可以验证理解 |
| 使用真实的变量名 | calculateTotalRevenue 而不是 foo |
| 在示例中包含错误处理 | 真实代码会处理错误 |
| 固定依赖版本 | "适用于 React 18.2" 而不是 "React" |
良好的代码块格式:
```python
# 这行代码的作用(一行)
def calculate_retry_delay(attempt: int, base_delay: float = 1.0) -> float:
"""指数退避 + 抖动。"""
delay = base_delay * (2 ** attempt)
jitter = random.uniform(0, delay * 0.1)
return delay + jitter
# 用法
延迟 = calculate_retry_delay(attempt=3) # 约 8.0-8.8 秒
### 解释深度
| 受众信号 | 深度 |
|----------|------|
| "X 入门" | 解释一切,假设无先验知识 |
| "高级 X 模式" | 跳过基础,深入细节 |
| "X vs Y" | 假设熟悉两者,专注于差异 |
| "我们如何构建了 X" | 技术受众,可跳过基础概念 |
**在文章开头明确说明假定的读者水平**:
"本文假设读者熟悉 Docker 和基本 Kubernetes 概念。 如果你对容器不熟悉,请从[我们的入门文章]开始。"
## 博客文章结构
### 理想结构
```markdown
# 标题(包含主要关键词,说明成果)
[头图或图表]
**TL;DR:** [2-3句话摘要,包含关键要点]
## 问题 / 为什么这很重要
[设置为什么读者应该关心——要具体,不要泛泛而谈]
## 解决方案 / 我们是怎么做的
[核心内容——代码、架构、解释]
### 步骤 1:[第一件事]
[解释 + 代码 + 输出]
### 步骤 2:[第二件事]
[解释 + 代码 + 输出]
## 结果
[数字、基准测试、成果——要具体]
## 权衡与限制
[诚实地说明缺点——建立信任]
## 结论
[关键要点 + 下一步做什么]
## 延伸阅读
[3-5个相关链接]
各类文章的字数
| 类型 | 字数 | 原因 |
|---|---|---|
| 快速技巧 | 500-800 | 一个概念,一个示例 |
| 教程 | 1,500-3,000 | 分步指导需要细节 |
| 深度解析 | 2,000-4,000 | 彻底的探索 |
| 架构文章 | 2,000-3,500 | 图表承担部分工作 |
| 基准测试 | 1,500-2,500 | 数据和图表是主力 |
图表和视觉元素
何时使用图表
| 场景 | 图表类型 |
|---|---|
| 请求流程 | 序列图 |
| 系统架构 | 方框图 |
| 决策逻辑 | 流程图 |
| 数据模型 | ER图 |
| 性能对比 | 柱状图/折线图 |
| 前后对比 | 并排展示 |
# 生成架构图
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:600px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:40px;font-family:system-ui;color:white\"><div style=\"display:flex;gap:40px;align-items:center\"><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">客户端</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">React 应用</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #3b82f6;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">边缘</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">CDN 缓存</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">API</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">Node.js</p></div><div style=\"color:#64748b;font-size:32px\">→</div><div style=\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\"><p style=\"font-size:14px;color:#94a3b8;margin:0\">数据库</p><p style=\"font-size:18px;font-weight:bold;margin:8px 0 0\">PostgreSQL</p></div></div></div>"
}'
# 生成基准测试图表
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"#0f172a\")\nax.set_facecolor(\"#0f172a\")\n\ntools = [\"Express\", \"Fastify\", \"Hono\", \"Elysia\"]\nrps = [15000, 45000, 62000, 78000]\ncolors = [\"#64748b\", \"#64748b\", \"#3b82f6\", \"#64748b\"]\n\nax.barh(tools, rps, color=colors, height=0.5)\nfor i, v in enumerate(rps):\n ax.text(v + 1000, i, f\"{v:,} req/s\", va=\"center\", color=\"white\", fontsize=14)\n\nax.set_xlabel(\"每秒请求数\", color=\"white\", fontsize=14)\nax.set_title(\"HTTP 框架基准测试 (Hello World)\", color=\"white\", fontsize=18, fontweight=\"bold\")\nax.tick_params(colors=\"white\", labelsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.spines[\"bottom\"].set_color(\"#334155\")\nax.spines[\"left\"].set_color(\"#334155\")\nplt.tight_layout()\nplt.savefig(\"benchmark.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Saved\")"
}'
分发
开发者阅读的地方
| 平台 | 格式 | 如何发布 |
|---|---|---|
| 你的博客 | 完整文章 | 主要渠道——掌控你的内容 |
| Dev.to | 交叉发布(规范URL指向你的博客) | Markdown 导入 |
| Hashnode | 交叉发布(规范URL) | Markdown 导入 |
| Hacker News | 链接提交 | 项目用 Show HN,故事用 Tell HN |
| Reddit (r/programming, r/webdev 等) | 链接或讨论 | 遵守子版块规则 |
| Twitter/X | 摘要 + 链接 | 请参考 twitter-thread-creation 技能 |
| 改编版 + 链接 | 请参考 linkedin-content 技能 |
# 在 X 上交叉发布
belt app run x/post-create --input '{
"text": "新博文:我们如何将API延迟降低90%\n\n简要版本:\n→ 将计算移至边缘\n→ 激进的缓存控制标头\n→ 消除 N+1 查询\n\np99 从 800ms 降至 90ms。\n\n包含代码的完整深度解析:[链接]"
}'
常见错误
| 错误 | 问题 | 修复 |
|---|---|---|
| 没有 TL;DR | 忙碌的开发者未抓住要点就离开 | 在顶部添加 2-3 句摘要 |
| 代码示例不完整 | 毁掉所有可信度 | 发布前测试每个代码块 |
| 未固定版本 | 6 个月后代码失效 | "适用于 Node 20, React 18.2" |
| "只需做 X" | 轻视、居高临下 | 删除 "只需"、"仅仅"、"轻易" |
| 架构没有图表 | 大段文字描述系统 | 一张图表 > 500 字描述 |
| 营销口吻 | 开发者立即失去兴趣 | 直接、技术、诚实 |
| 没有权衡部分 | 读起来像有偏见的营销 | 总是讨论缺点 |
| 过长介绍才进入正题 | 读者跳出 | 在 2-3 段内切入正题 |
| 依赖未固定 | 教程对未来的读者失效 | 固定版本,注明写作日期 |
| 没有"延伸阅读" | 死胡同,没有上下文 | 3-5 个链接以加深理解 |
相关技能
npx skills add inference-sh/skills@seo-content-brief
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@og-image-design
浏览所有应用:belt app list