个人博客案例

将 Obsidian 作为博客的 CMS（内容管理系统），实现「一次写作，多处发布」。

适用场景

• 📝 技术博客写作
• 📰 个人文章发布
• 📚 知识库公开分享
• 🎨 作品集展示

方案对比

方案	特点	难度	推荐度
Obsidian Publish	官方托管，开箱即用	⭐	⭐⭐⭐⭐
Hugo + Obsidian	静态生成，高度定制	⭐⭐⭐	⭐⭐⭐⭐⭐
Jekyll + Obsidian	GitHub Pages 友好	⭐⭐⭐	⭐⭐⭐⭐
VitePress	Vue 技术栈友好	⭐⭐⭐	⭐⭐⭐⭐

方案一：Obsidian Publish

最简单的发布方案。

配置步骤

1. 开启 Publish

步骤:
  1. 设置 → 第三方服务 → Publish
  2. 连接 Obsidian 账户
  3. 创建发布站点

2. 选择发布内容

发布设置:
  - 右键文件夹选择「发布」
  - 或在 Publish 面板选择
  - 建议创建专门的发布文件夹

3. 配置域名

自定义域名:
  1. 在 Publish 设置中添加域名
  2. 配置 DNS CNAME 记录
  3. 启用 HTTPS

优缺点

优点:
  - 零配置，即开即用
  - 自动同步更新
  - 支持搜索和图谱
  - 移动端友好

缺点:
  - 付费服务（约 $8/月）
  - 定制性有限
  - 无法使用自定义插件

方案二：Hugo + Obsidian

适合技术用户，高度定制。

项目结构

blog/
├── content/           # Hugo 内容目录
│   ├── posts/         # 博客文章
│   │   ├── obsidian-note.md
│   │   └── ...
│   └── about.md
├── static/            # 静态资源
├── themes/            # 主题
└── config.toml        # Hugo 配置

vault/
├── blog-posts/        # Obsidian 中的博客草稿
├── attachments/       # 图片附件
└── ...

配置步骤

1. 安装 Hugo

# macOS
brew install hugo

# Windows
winget install Hugo.Hugo

# Linux
sudo apt install hugo

2. 创建站点

hugo new site my-blog
cd my-blog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

3. 配置 config.toml

baseURL = 'https://example.com/'
languageCode = 'zh-cn'
title = '我的博客'
theme = 'ananke'

[params]
  mainSections = ['posts']

[frontmatter]
  date = ['date', 'publishDate', ':fileModTime']
  lastmod = ['lastmod', ':fileModTime']

4. 配置 Obsidian -> Hugo 工作流

安装 Obsidian Hugo 插件或使用脚本：

// 使用 Templater 自动生成 frontmatter
<%*
const title = tp.file.title;
const date = tp.date.now('YYYY-MM-DD');
const slug = title.toLowerCase().replace(/\s+/g, '-');
tR += `---
title: "${title}"
date: ${date}
draft: false
slug: ${slug}
tags: []
---
`;
%>

图片处理

方案一：复制到 Hugo static

# 创建同步脚本
#!/bin/bash
rsync -av ~/vault/attachments/ ~/blog/static/images/

方案二：使用图床

推荐图床:
  - PicGo + GitHub
  - 阿里云 OSS
  - 腾讯云 COS
  - Cloudflare R2

方案三：嵌入 Base64

使用插件将图片转为 Base64 嵌入。

发布流程

日常写作:
  1. 在 Obsidian vault 中写作
  2. 使用相对路径引用图片
  3. 添加正确的 frontmatter

发布前:
  1. 运行同步脚本
  2. 预览：hugo server
  3. 构建：hugo
  4. 部署到托管平台

方案三：Jekyll + GitHub Pages

免费托管，GitHub 友好。

配置步骤

1. 创建仓库

# 创建 GitHub 仓库
# 格式：username.github.io

2. 配置 Jekyll

# _config.yml
title: 我的博客
description: 技术博客
url: "https://username.github.io"

markdown: kramdown
kramdown:
  input: GFM

3. GitHub Actions 自动部署

# .github/workflows/jekyll.yml
name: Jekyll Build and Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-ruby@v1
        with:
          ruby-version: '3.0'
      - run: bundle install
      - run: bundle exec jekyll build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site

博客文章模板

技术文章模板

---
title: "{{title}}"
date: {{date}}
draft: true
tags:
  - 
categories:
  - 
description: 
keywords:
  - 
slug: 
---

## 前言

<!-- 背景介绍，为什么写这篇文章 -->

## 正文

### 问题

<!-- 要解决什么问题 -->

### 方案

<!-- 解决方案 -->

```代码示例

解释

总结

参考资料

### 随笔文章模板

```markdown
---
title: "{{title}}"
date: {{date}}
draft: true
categories:
  - 随笔
---

<!-- 正文 -->

推荐插件

写作辅助:
  - Templater: 模板自动化
  - Quiet Outline: 大纲视图
  - Editor Syntax Highlight: 代码高亮

发布辅助:
  - Obsidian Git: 版本控制
  - Copy button for code blocks: 代码复制
  - Image auto upload Plugin: 图床上传

SEO 优化:
  - Meta Template: 元信息管理

自动化工作流

写作到发布全流程

// QuickAdd 脚本：新建博客文章
async function newBlogPost() {
  const title = await quickAddApi.inputPrompt('文章标题');
  const category = await quickAddApi.suggester(
    ['技术', '随笔', '翻译', '教程'],
    ['tech', 'essay', 'translation', 'tutorial']
  );
  
  const slug = title.toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/\s+/g, '-');
  
  await quickAddApi.createNote({
    template: `blog-${category}-template`,
    folder: 'blog-posts',
    fileName: slug
  });
}

自动同步脚本

#!/bin/bash
# sync-to-hugo.sh

VAULT="/path/to/vault"
HUGO="/path/to/hugo-site"

# 同步文章
rsync -av --delete \
  "$VAULT/blog-posts/" \
  "$HUGO/content/posts/"

# 同步图片
rsync -av --delete \
  "$VAULT/attachments/" \
  "$HUGO/static/images/"

# 更新图片路径
find "$HUGO/content/posts" -name "*.md" -exec \
  sed -i 's/\[\[attachments\/([^\]]+)\]\]/[\![](\images\/\1)]/g' {} \;

echo "同步完成！"

SEO 优化

元信息配置

---
title: "文章标题"
description: "文章描述，150 字以内"
keywords: ["关键词1", "关键词2"]
author: "作者名"
date: 2024-01-15
lastmod: 2024-01-20
image: "/images/cover.jpg"
---

URL 优化

建议:
  - 使用英文 slug
  - 保持 URL 简短
  - 包含关键词
  - 避免特殊字符

示例:
  好: /posts/how-to-use-obsidian
  差: /posts/2024/01/15/如何使用-obsidian-进行笔记管理

站点地图

Hugo 自动生成 sitemap.xml，提交到搜索引擎：

Google Search Console:
  1. 验证站点所有权
  2. 提交 sitemap.xml
  3. 等待索引

百度站长平台:
  1. 添加站点
  2. 验证所有权
  3. 提交 sitemap

最佳实践

1. 内容组织

分类策略:
  - 按主题分类（技术、生活、随笔）
  - 按系列组织（系列文章）
  - 使用标签细化（具体技术）

目录结构:
  blog-posts/
  ├── tech/
  │   ├── obsidian/
  │   └── python/
  ├── essays/
  └── tutorials/

2. 写作习惯

写作流程:
  1. 在 Obsidian 中起草
  2. 设置 draft: true
  3. 完成后改为 draft: false
  4. 运行同步脚本
  5. 本地预览确认
  6. 推送到 Git 仓库

3. 图片管理

建议:
  - 使用图床服务
  - 图片压缩后上传
  - 使用有意义的文件名
  - 保持统一的命名规范

图片命名:
  - 2024-01-obsidian-dashboard.png
  - feature-comparison-table.png

常见问题

Q: 如何处理双向链接？

A:

1. Hugo: 使用 [[]] 或自定义 shortcode
2. 静态发布时双向链接会失效
3. 建议只在内部笔记使用双向链接
4. 博客使用标准 Markdown 链接

Q: 如何处理图片？

A:

1. 使用图床服务（推荐）
2. 同步到 static 目录
3. 发布前统一处理路径

Q: 如何自动发布？

A:

1. 使用 GitHub Actions
2. 配置 Git hooks
3. 使用 CI/CD 服务

相关资源

• 静态站点发布 - Hugo/Jekyll 详解
• 数字花园案例 - 公开知识库
• Git 版本控制 - Git 配置
• 图片与附件管理 - 图片管理