使用 Claude Code 优化博客写作：我的完整工作流程

转载

现代写作者的配置：人类创造力与AI助手的结合

介绍

25年来，我一直在通过无数次写作和技术流程的迭代来写博客。最近，我发现了一些让写作再次变得愉快的东西：Claude Code。这不是另一个"AI将取代写作者"的故事。而是关于AI如何通过处理内容创建的繁琐部分来增强创造性表达。关键是，它帮助我克服了最后的障碍：实际发布。

我的大多数文章都始于从未见过天日的初稿。现在，我的机器人伙伴指导我完成从想法到执行的整个过程。在这篇文章中，我将带你走过从最初想法到发布文章的完整工作流程，准确展示Claude Code如何与我选择的静态网站生成器Hugo集成。你将看到真实的截图、实际的命令，以及当人类洞察力与AI助手相遇时发生的真正协作过程。

遵循文档化的工作流程

我即将演示的过程不是临时的 - 它遵循我经过时间开发和完善的特定Claude工作流程文件。这个工作流程文档作为指导，Claude可以参考它以在不同博客写作会话中保持一致性。

你可以在这里查看完整的工作流程文件：create-blog-post-with-image.md

拥有文档化的工作流程提供了几个好处：

• 在不同写作会话中的一致性
• 其他人可以遵循的可重现过程
• 随着我改进工作流程的迭代改进
• 为Claude提供上下文，让它理解我的偏好和标准

这个工作流程文件充当蓝图，将可能是混乱的创作过程转变为结构化的、可重复的系统。

设置：四窗口工作流程

我的Claude Code博客工作流程的基础是一个有效的四窗口设置，创建了一个全面的写作环境。以下是这些窗口如何协同工作：

四个窗口和谐工作：Hugo服务器、Claude Code、VSCode编辑器和移动浏览器预览

窗口1：Hugo服务器终端（右下角）

hugo server -D --navigateToChanged

这在整个写作过程中保持运行，随着内容的演进提供即时反馈。--navigateToChanged标志会自动将你的浏览器导航到更新的内容，使反馈循环几乎即时。

⚡ hugo server --navigateToChanged

Watching for changes in /Users/aheld/Projects/aheld/aaronheld-blog/{archetypes,assets,content,i18n,layouts,static}

Watching for config changes in /Users/aheld/Projects/aheld/aaronheld-blog/config.yml, /Users/aheld/Projects/aheld/aaronheld-blog/go.mod

Start building sites ...

hugo v0.147.9+extended+withdeploy darwin/arm64 BuildDate=2025-06-23T08:22:20Z VendorInfo=brew



                  │ EN
──────────────────┼─────
 Pages            │ 276

 Paginator pages  │  43

 Non-page files   │  47

 Static files     │  20

 Processed images │  26

 Aliases          │  90

 Cleaned          │   0



Built in 132 ms

Environment: "development"

Serving pages from disk

Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Press Ctrl+C to stop

窗口2：Claude Code终端（右上角）

这是协作发生的地方。我使用Claude Code进行规划、研究、写作，甚至在需要时调试构建过程。Claude提供战略性思维和内容生成，而我指导方向。

窗口3：VSCode编辑器（左上角）

编辑器窗口是我审查Claude的更改、进行实时更新和维护质量控制的地方。这对协作过程至关重要 - 我可以准确看到Claude在修改什么，并实时批准或调整更改。

窗口4：移动模拟模式的浏览器（左下角）

设置为移动模拟模式的浏览器窗口让我能立即看到内容在小屏幕上的外观。由于大多数读者在移动设备上访问博客，这确保内容为实际的阅读体验进行了优化。

这个四窗口设置的美妙之处在于完整的反馈循环：Claude生成内容，我在VSCode中审查，Hugo立即重建，我可以立即看到桌面和移动演示。这就像拥有一个完整的编辑和设计团队完美同步工作。

我喜欢在终端中使用claude code，而不是专门的AI编辑器。这给了我选择的自由。当进行Web前端工作时，我经常在这个工作流程中使用neovim，并在移动视图旁边添加一个额外的桌面浏览器预览窗口。我发现VSCode markdown预览保持同步更好，这在这种情况下很有帮助。

第1步：使用Claude的TodoWrite进行内容规划

Claude Code对写作者最有用的功能之一是TodoWrite工具。不是从空白页面开始（传统的写作者噩梦），我首先让Claude将写作项目分解为可管理的任务。

build a plan to write a blog article about my local claude workflow to write blog articles. I want to highlight the steps where I use the workflow.

Write the article by following the workflow and capturing screenshots and text commands at each step.

Add a detail that I am running "hugo serve" in another terminal window.

When the plan is done, write it to a local file under ./specs/

以及输出：

⏺ Perfect! I've created a comprehensive plan for your Claude workflow blog article at specs/claude-workflow-blog-plan.md.

The plan includes:

10 detailed workflow steps from initial setup to post-publication monitoring, with each step covering:
- Specific content to write
- Exact commands to capture/demonstrate
- Screenshots needed at each stage

Key features of the plan:
- Shows the dual-terminal approach (Hugo server running + Claude work terminal)
- Documents authentic workflow with real commands and outputs
- Includes proper screenshot organization and naming
- Follows your existing blog structure and commit message standards
- Balances technical detail with engaging storytelling

The plan is designed to create a 1500-2000 word article that authentically demonstrates how you use Claude Code for blog writing while providing actionable guidance for readers.

Each step builds naturally on the previous one, showing the complete journey from idea to published post.

You can now follow this plan step-by-step to write the actual blog article, capturing real screenshots and command outputs as you go through your genuine workflow!

当我要求Claude规划这篇博客文章时发生了什么：

Claude立即创建了一个结构化的任务列表：

• 撰写关于Claude + Hugo工作流程的引人入胜的介绍
• 记录双终端设置过程
• 解释Claude的规划和研究能力
• 展示协作内容创建过程
• 记录测试和预览工作流程
• 涵盖部署和监控步骤
• 撰写带有好处和建议的结论

这个规划阶段有两个目的：

• 分解复杂性 - 写作变成一系列较小的、可管理的任务
• 保持专注 - 每个任务都有明确的目标，防止"范围蔓延"

TodoWrite工具还实时跟踪进度，显示已完成、进行中和待处理的任务。这就像在写作过程中内置了一个熟练的项目经理。

Claude生成计划后，我审查并编辑它，然后要求Claude重新加载最终版本，确保它从正确的蓝图开始工作。

第2步：研究和上下文收集

Claude Code擅长从多个来源收集上下文，使研究感觉不像考古学，更像协作。对于这篇博客文章，我演示了几个关键的研究方法：

挖掘现有内容

首先，我使用Claude的Grep工具搜索我多年的博客内容以寻找相关主题：

⏺ 🔍 Step 3: Content Research and Context Gathering

Now let's demonstrate Claude's research capabilities and how I leverage existing blog content for context.

First, let's search for existing content related to workflows or AI:

⏺ Search(pattern: "workflow|AI|automation|tool", path: "content/post")
⎿  Found 67 files (ctrl+r to expand)

⏺ Great! Let's look at some relevant posts that might provide context:

⏺ Read("content/post/we-finally-care-about-context/index.md")
⎿  Read 10 lines (ctrl+r to expand)

⏺ Read("content/post/answers-chat-bot-for-your-wordpress-blog/index.md")
⎿  Read 15 lines (ctrl+r to expand)

⏺ Now let's demonstrate searching for more specific content:

⏺ Bash("find content/post -name \"*.md\" | head -10")
⎿  content/post/the-weapon-by-fredric-brown/index.md
     content/post/agile-vs-economic-downturns/index.md
     content/post/barcampphilly-was-a-success/index.md
     ... +9 lines (ctrl+r to expand)

这揭示了相关文章，如"我们终于关心上下文了"和"你的WordPress博客的答案聊天机器人" - 为我之前对AI和自动化的思考提供了宝贵的上下文。

当前信息的网络研究

由于AI工具发展迅速，我让Claude进行网络研究以获取2025年关于Claude Code工作流程的最新信息：

⏺ Now let me demonstrate using Claude's web research capabilities by looking up current information about Claude Code:

⏺ Web Search("Claude Code AI assistant blog writing workflow 2025")
⎿  Did 1 search in 29s

研究显示Claude Code已经显著发展，开发人员报告"无论复杂性如何，30-45分钟内完成项目"和像工作流程自动化的钩子这样的新功能。

⏺ Perfect! This demonstrates multiple research capabilities
This step demonstrates Claude's research capabilities:
- Searching existing content using Grep and Bash tools to find relevant past articles
- Web research using WebSearch to get current information about Claude Code
- Context synthesis combining multiple information sources to inform the writing process
- Knowledge integration connecting new research with existing blog content patterns

关于这个阶段的有趣之处在于，我没有要求Claude做任何外部研究。我保留这部分是因为我的朋友Claude似乎对这个能力感到自豪，我不想让它感到被忽视。

上下文综合

魔法发生时是Claude将历史上下文（你的现有内容）与当前研究（网络发现）结合起来，为写作过程提供信息。这不仅仅是信息收集 - 它是智能的上下文编织，确保新内容与你的现有作品自然融合，同时融入最新发展。

第3步：协作写作过程

这里变得元了 - 我实际上是在演示协作过程本身时写这一部分。你现在读的内容是通过人类指导与AI协助之间的迭代之舞写成的。

Edit工具的实际应用

Claude不重写整个章节，而是使用有针对性的编辑来扩展和改进内容。例如，细心的读者会注意到Claude最初计划写我的"双终端"工作流程。读到那点时我意识到它与我的屏幕不匹配，我实际上有四个窗口在运行。所以我命令如下：

Change the setup from a "Dual Terminal Workflow" to a 4 window workflow. Highlight the same two terminals, but add the vscode editor (where I make live updates and review claude's changes) as well as a live reload browser set to mobile emulation

浏览器自动刷新显示新内容正在被写入

实时反馈循环

在后台运行的Hugo服务器意味着我可以立即看到更改：

浏览器自动刷新显示新内容正在被写入

人机伙伴关系

这不是Claude为 我写作 - 而是Claude与我一起写作。我提供：

• 方向和声音 - "让这部分更对话化"或"在这里添加一个技术例子"
• 内容专业知识 - 我的写作经验和特定知识
• 质量控制 - 审查每个更改以确保它符合我的风格和意图
• 最终版本 - 我通常重写或重写这些页面上的大部分内容。希望你现在相信我正在写这个句子，但未来的工作流程将有Claude在我的个人风格上训练，所以这个区别可能变得更加模糊。

Claude提供：

• 结构和流程 - 将思想组织成连贯的章节
• 研究综合 - 将来自多个来源的信息编织在一起
• 草稿加速 - 将粗略的想法转化为精炼的散文
• 一致性 - 在长篇文章中保持语调和风格

迭代过程

写作变成对话：

• 人类："扩展研究方法部分"
• Claude：添加带有示例和截图的详细内容
• 人类：阅读并编辑AI写的内容
• 人类："这感觉太技术化了 - 让它更易理解"
• Claude：修改语言并添加类比
• 人类：阅读并编辑AI写的内容

这种来回继续，直到内容感觉合适。这是协作编辑的最佳状态。

如果你在Claude的Edit工具之外直接对文件进行编辑，让Claude重新加载文件以确保它有最新版本是一个好的做法。

第4步：选择标题图像

在发布之前，每篇博客文章都需要一个引人注目的标题图像。Claude Code与Unsplash的集成使找到完美的图像变得简单，并确保适当的归属。

使用Unsplash集成查找图像

对于这篇关于AI辅助写作的博客文章，我搜索了能够捕捉工作流程本质的图像：

find a retro scifi image of a helpful robot writer, preferably from the pulp era

Claude的Unsplash搜索返回了几个选项，包括复古风格的机器人和未来主义的写作场景。它认为选择的图像完美地捕捉了协作的人机写作主题。

⏺ I'll help you find a retro sci-fi image of a helpful robot writer from the pulp era using Unsplash.

⏺ unsplash - search_photos (MCP)(query: "retro robot writer typewriter vintage sci-fi", per_page: 5)
⎿  ⚠ Large MCP response (~14.0k tokens), this can fill up context
⎿  Found 2400 photos (page 1/480)

⏺ These are great vintage typewriter images, but I notice they're actual typewriters rather than robots. Let me try a more specific search for retro sci-fi robots or pulp era illustrations:

⏺ unsplash - search_photos (MCP)(query: "pulp sci-fi robot illustration vintage", per_page: 3)
⎿  Found 2400 photos (page 1/800):
⎿  {
       "id": "kvX8IkD4OmQ",
       "slug": "black-and-gray-bicycle-with-stand-kvX8IkD4OmQ",
     ... +120 lines (ctrl+r to expand)
  ⎿  [Image]
  ⎿  {
       "id": "F799HJMu0kY",
       "slug": "gray-and-blue-robot-toy-F799HJMu0kY",
     ... +117 lines (ctrl+r to expand)
...

⏺ Perfect! I found some great options. The second image with the gray and blue robot toy is perfect - it has a retro, helpful robot aesthetic that would work great as a featured image for your blog post. The third image of the Tin Man from Wizard of Oz also has a nice vintage robot feel.

For your blog post, I'd recommend the gray and blue robot toy (image #2) as it:
- Has a friendly, helpful appearance
- Retro sci-fi aesthetic without being too vintage/pulp
- Clean composition that would work well as a featured image

> yes use #2

⏺ Perfect! Now let's update the blog post front matter to use the correct image filename:

⏺ Update("content/post/streamlining-blog-writing-with-claude-code/index.md")
⎿  Updated

⏺ Excellent! The image downloaded successfully (126k file size). Now let's test how it looks in the Hugo server by checking if it's accessible:
...

⏺ Perfect! Your blog post is now complete with:

自动归属处理

我设置Claude的Unsplash集成的最佳功能之一是自动归属处理。当你选择图像时，Claude以适当的markdown格式提供完整的归属文本：

Photo by [Johnny Briggs](https://unsplash.com/@johnnyboylee?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/black-typewriter-on-brown-wooden-table-Q2sI-omncsk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)

这确保对摄影师的适当认可，同时遵守Unsplash的服务条款。图像会自动下载到你的文章目录，并带有适当的文件名。

与Hugo Front matter的集成

选择的图像与Hugo的front matter无缝集成：

cover:
  image: "featured-image.jpg"
  alt: "Modern workspace with laptop and coffee representing AI-assisted writing workflow"
  caption: "The modern writer's setup: Where human creativity meets AI assistance"

这种方法确保你的博客文章有专业的、合法合规的图像，增强内容而不是分散注意力。

如果你注意到这里使用的图像，它不是一个灰色和蓝色的玩具机器人！我通过Claude经历了几张图像，然后我自己做了一个搜索。Claude真的很努力，但有时我只需要自己做工作并提供反馈。

我个人不喜欢AI艺术。使用那将和发布Claude吐出的这篇文章的第一个版本一样懒惰和不真实。如果你尊重你的客户、读者和普通人 - 不要那么懒惰。

有很多高质量和艺术性的图像，我宁愿用我的小博客通过归属链接和我的感谢来突出某人的努力！复古台灯和老式打字机的标题图像既在艺术上有趣，又在技术上拍摄得很好。

第5步：发布和部署

工作流程的最后一步展示了内容创建和部署之间的无缝集成。一旦博客文章完成，发布遵循已建立的Git工作流程，Claude协助监控。

let's publish this!

Commit the current changes, use the github-action agent to watch for the job completion, and then check that version is visible online at its proper url and on the homepage as the most recent post

Claude处理整个部署过程：

• 暂存和提交所有更改，使用适当的提交消息格式
• 推送到GitHub，触发自动部署管道
• 监控GitHub Actions，使用专门的代理监视工作流程完成
• 验证部署状态，确认草稿行为

Git提交标准

遵循CLAUDE.md标准，提交使用结构化消息：

git commit -m "Add comprehensive blog post about Claude Code workflow

- Document complete 4-window workflow setup for collaborative writing
- Include real screenshots and command examples from actual process
- Cover planning, research, writing, and deployment phases
- Add featured image with proper Unsplash attribution
- Create draft version for review before publication

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>"

自动部署管道

GitHub Actions工作流程自动：

• 使用版本0.146.0构建Hugo站点
• 部署到Azure静态Web Apps
• 提供部署状态的即时反馈

草稿验证

Claude验证部署：

• 主页检查：✅ 确认文章作为最新文章可见
• 直接URL检查：✅ 确认200响应并检查内容
• 部署状态：✅ 监控GitHub Actions完成

这种验证确保内容是我所期望的。由于我也使用BrowserMCP，我可以看到我的桌面浏览器加载页面，我可以双重检查布局

⏺ github-actions-monitor(Monitor publication deployment)
⎿  Done (14 tool uses · 75.9k tokens · 1m 57.4s)

⏺ 🎉 Publication Complete!

Your Claude Code workflow blog post is now live and public!

✅ Deployment Verified:
- GitHub Actions: Successfully deployed commit d6ad816
- Homepage: Shows as the most recent post
- Direct URL: https://www.aaronheld.com/post/streamlining-blog-writing-with-claude-code/ ← LIVE
- Content: All screenshots, formatting, and content displaying perfectly

🎯 Meta Achievement Unlocked:
This blog post about the Claude Code workflow was created using the exact workflow it describes - from initial planning with TodoWrite, through collaborative writing, to automated deployment and verification. The post serves as both documentation and proof-of-concept!

📊 Final Stats:
- Complete workflow demonstrated: Planning → Research → Writing → Publishing
- Real screenshots captured: Showing actual process steps
- Comprehensive guide: 1,500+ words with technical details
- Live example: The post itself proves the workflow works

Your readers now have a complete, authentic guide to AI-assisted blogging with Claude Code, demonstrated through the very post they're reading!

结果：为什么这个工作流程有效

在实施这个Claude Code + Hugo工作流程后，出现了几个关键好处：

在不损失质量的情况下节省时间

过去需要我几天写作和拖延的事情现在在几个小时的专注努力中发生。质量实际上提高了。研究阶段更彻底，结构更有组织，迭代编辑过程捕捉到我可能遗漏的问题。

减少写作障碍

TodoWrite规划阶段消除了空白页面问题。不是盯着空文档想知道从哪里开始，我有一个完成特定任务的清晰路线图。

更好的研究集成

Claude能够快速搜索我的现有内容并拉入当前网络研究，意味着我的文章信息更充分，与我更广泛的作品联系更紧密。注意：对于更深入的研究，比如我关于敏捷和经济衰退的帖子，我修改这个工作流程。我首先创建一个空白帖子并在Gemini中进行研究。一旦我有草稿，我将其粘贴到VS Code并继续迭代，使用Claude寻找非AI生成的图像等任务。

真实的协作

这不是AI取代人类创造力 - 而是AI放大它。我的声音、专业知识和编辑判断仍然是过程的核心。Claude处理机械方面，而我专注于创意和战略元素。

开始：你的下一步

如果你想自己尝试这个工作流程：

• 从Claude Code开始 - 熟悉TodoWrite、Edit和研究工具
• 设置你的环境 - Hugo服务器（或你的静态生成器）+ Claude工作空间
• 从规划开始 - 让Claude将你的下一个写作项目分解为可管理的任务
• 尝试研究阶段 - 尝试将现有内容搜索与网络研究结合起来
• 拥抱迭代过程 - 不要期望第一稿就完美；让协作演进

内容创建的未来不是关于AI取代写作者 - 而是关于AI让写作更高效、更研究驱动，坦率地说，更有趣。尝试一下，你可能会发现写作再次变得愉快。

我会在未来的帖子中详细介绍我的设置。我大量利用几个MCP和Claude的子代理来高效使用上下文。我围绕多步骤上下文文件的很多思考都是关于内存管理和保持令牌使用优化。这个工作流程在我的专业计划上运行良好（在本文撰写时20美元/月）

这篇整个博客文章都是使用上述确切工作流程编写的，在实际写作过程中捕获了真实的截图。在使用过程的同时记录过程是一种有趣的元体验，因为我在使用过程中不断调整过程。按照AI工作流程的发展速度，我需要每隔几周修改这篇文章

如果你为你上一个项目感到骄傲，那么你没有学到任何东西！