skip to content
walterra.dev
Table of Contents

I’ve been refining my content creation process to bridge the gap between quick note-taking and publishing. My solution combines Obsidian.md for knowledge management, AstroJS for static site generation, and Claude Code to assist with transformations.

Obsidian + AstroJS

The core idea is maintaining a daily log of links and ideas in Obsidian, then transforming the most interesting collections into proper blog posts. This allows me to capture thoughts without interruption, collect related resources over time, and later transform these collections into coherent content.

Obsidian serves as the knowledge management system: Cross-device sync ensures my notes are available everywhere, markdown-based storage aligns perfectly with Astro’s content system, and daily notes automatically create files (like 2025-04-17.md). Getting content into Obsidian is streamlined through an iOS shortcut that sends links directly to the day’s markdown file.

Since both Obsidian and Astro use markdown with frontmatter, the technical transition is seamless: Wiki notes live in src/content/wiki/YYYY-MM-DD.md while blog posts go in src/content/blog/YYYY-MM-DD-slug.md.

I blogged about this in more detail here.

Adding Claude Code to the mix

To make this workflow even more efficient, I use Claude Code to help with the transformation. Claude Code analyzes the wiki files to identify common themes, researches linked content for context, drafts posts and generates appropriate frontmatter including descriptions and tags. One aspect I really like: In Obsidian via mobile I just save URLs, later on Claude Code can fetch these URLs and summarize them. The workflow is documented in CLAUDE.md like this so I can reference it as wiki2blog and run it on specific files:

# Agent Workflow: Wiki to Blog Post Transformation (wiki2blog)
- Source files in `src/content/wiki` are created via Obsidian in YYYY-MM-DD.md format
- These wiki files contain mostly links and brief notes collected throughout the day
- Transformation process:
  1. Analyze wiki file content to identify common themes or topics
  2. Research and fetch content from URLs in the wiki file
  4. Generate a descriptive slug related to the main topic
  5. Create a new file in `src/content/blog` with YYYY-MM-DD-slug.md naming format
  6. Include proper frontmatter: title, description, publishDate (same as wiki file date), and relevant tags
  7. Write content following the content & style guide while incorporating insights from the wiki links
  8. Maintain conversational tone as if discussing topics from the collected links
  9. Add appropriate context and transitions between referenced materials
  10. Include code samples, images, or diagrams when relevant to technical topics
- Summarize links in a note style fashion in 1-2 paragraphs for a technical audience

In Claude Code I would then just say something like this:

Run the wiki2blog workflow on src/wiki/2025-04-23.md

The overall setup offers several benefits: low-friction capture means ideas don’t get lost, themes develop naturally from daily collections, content evolves from raw notes to polished posts, and Claude helps connect dots and add research depth, all with minimal technical overhead using standard tools and formats.

If you want to implement a similar workflow, you’ll need Obsidian.md with the mobile app, a custom iOS shortcut for quick captures, AstroJS for your static site, Claude Code to assist with transformations, and GitHub Actions for automated deployment.

Enhancing with Screenshots

To further enhance the workflow, I’ve added automatic screenshot capabilities using capture-website-cli. This allows me to easily include visual references to the websites I collect in my wiki files.

To add this to your workflow:

  1. Install the dependency:
Terminal window
pnpm add -D capture-website-cli@^4.0.0
  1. Use it to capture screenshots of websites referenced in your wiki:
Terminal window
npx capture-website https://kertal.github.io/codeowner-filter/ --output=public/images/codeowner-filter.png --width=1200 --height=800 --fullPage --overwrite
  1. Reference the screenshot in your blog post:
<img src="/images/codeowner-filter.png" alt="Screenshot of the codeowner-filter tool showing a web interface with input area for pasting CODEOWNERS file content and output area displaying filtered results in multiple formats." />

The screenshot tool supports various options for width, height, device emulation, and more, making it versatile for different needs.

The nice thing is Claude Code can make use of capture-website all by itself! Here’s the updated workflow from CLAUDE.md:

## Agent Workflow: Wiki to Blog Post Transformation (wiki2blog)
- Source files in `src/content/wiki` are created via Obsidian in YYYY-MM-DD.md format
- These wiki files contain mostly links and brief notes collected throughout the day
- Transformation process:
  1. Analyze wiki file content to identify common themes or topics
  2. Research and fetch content from URLs in the wiki file
  3. For key URLs, capture screenshots using capture-website-cli:
     ```bash
     npx capture-website <URL> --output=public/images/<YYYY-MM-DD-descriptive-name>.png --width=800 --height=450 --overwrite
     ```
  5. Generate a descriptive slug
  6. Create a new file in `src/content/blog` with YYYY-MM-DD-slug.md naming format
  7. Include proper frontmatter: title, description (50-160 chars), publishDate (same as wiki file date), and relevant tags
  8. Write brief content following the content & style guide while incorporating insights from the wiki links, but keep it very short and concise, the aim of the blog post is just to document links like clippings without a fully featured analysis.
  9. Include screenshots for key URLs with proper alt text:
     ```markdown
     <img src="/images/<YYYY-MM-DD-descriptive-name>.png" alt="Detailed description of the screenshot content and context" />
     ```
  10. Keep it very brief, summarize the links in a clipping manner with one paragraph per link.
  12. If applicable, include a quote from the source URL that stand's out. The quote can be a sentence or even a small paragraph if it's worth quoting.
  13. You must include the original links in the blog post. You can apply the links in the paragraph to a phrase that's about the link.
- Use sensible naming for screenshots (e.g., match the slug of the URL or topic)

I used this approach to create the recent post Indie Web and React Ecosystem in 2025