无标签

发布日期: 2025-11-12

打造专属的写作软件

基于开源写作软件NoteGen，做定制化改造，可以将写作和博客发布打通：使用 GitHub + jsDelivr CDN 为 Hexo 博客托管图片

改造说明

NoteGen是ChatGPT 推荐给我的一款写作软件。回想过去，我试过很多写作软件，从 atom，到 notion，再到 VSCode 和 Cursor。还有微信的收藏，印象笔记，网易云笔记，苹果的随便记，第三方写作软件“写点啥”，Obsidian。还有很多短暂试过就放弃的，数不胜数。没有一款能够让我坚持使用下去。

每当我懊悔自己为什么不能坚持写作时，我就会把这个问题再一次提给自己：我到底需要什么样的写作软件？这一次，我和 ChatGPT 讨论，首先明确了自己的问题和诉求。

想法多且碎片化。
拖延，难以启动。

再进一步思考，第一个问题不是问题，甚至利用得好是一个优势，真正的问题是第二个。仔细想，什么导致了自己拖延？我觉得主要问题就是自己没有一个非常趁手的写作软件，当前的软件都让我有抵触心理。具体来说，是以下现状导致了我的抵触心理：

我想写完之后就发布到博客、公众号、小红书等平台，但是现状是成本巨大，阻力重重。首先内容我得自己搬运。之前之所以用 VSCode 和 Cursor 写作，就是为了适配我用 Hexo搭建的开源博客。但是复制粘贴的图片不能正常在博客上显示，又让我很烦躁，一段时间不想打开。再加上让文章和 hexo 博客连接，需要在 VSCode 和 Cursor 中打开一堆和写作无关文件和文件夹，主要是博客的样式文件等。
很多时候，写作不是从指尖敲击键盘开始的，而是从喉咙和嘴巴开始的。也就是我想先和一个人谈论一件事，谈着谈着，谈得兴起，深入，再丝滑地转入写作模式。当前没有一个写作软件满足我这个要求，所以我只能自己开发。从头开发这样一个写作软件工程巨大。

我把这些问题讲给 ChatGPT 听，她给我了两个答案，一个是非常详细的产品设计方案，没错，它也看出来市面上没有满足我要求的写作软件，所以给我设计了一个，问题是我得自己开发；另一个是，帮我调研了市面上的开源写作软件。我调了两个试用了，Lex和 NoteGen。Lex我很快就放弃了，没啥新意。NoteGen 我用了几天，说实话，加入 AI 的创意很好，但 AI加得不对。既然都是开源的，于是我就着手在 NoteGen 基础上改造，这样比自己重写一个写作软件工作量小多了。

第一个要改造的就是：让写作和我的博客挂钩，写完后，点一个按钮就发布了。早上起床后，把需求提给 Claude Code，就去洗澡了。洗完澡回来，已经完成，有一点 bug，简单修复后就可以直接用了。我对此信心大增。

实现分两部分。首先增加了一个全新的设置入口：

然后是在编辑器左下方增加“发布”按钮。

使用概述

下面的内容就是让 Claude Code 给我生成的使用指南。

什么是 GitHub CDN？

GitHub + jsDelivr 是一个免费的 CDN 解决方案：

GitHub：存储图片文件
jsDelivr：全球 CDN 加速访问
优势：免费、稳定、快速、无流量限制

工作流程

1	本地图片 → 上传到 GitHub 图床仓库 → jsDelivr CDN 加速 → Hexo 博客引用

示例图片 URL：

1	https://cdn.jsdelivr.net/gh/username/image-repo@main/image.png

前置准备

1. GitHub 账号和 Token

创建 GitHub Personal Access Token

访问：https://github.com/settings/tokens/new
填写信息：
- Note: NoteGen Image Hosting
- Expiration: No expiration 或自定义
- Select scopes: 勾选 repo (完整仓库权限)
拉到最下面，点击 Generate token
重要：复制生成的 token（只显示一次！）

示例 token：ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

2. 准备工作

✅ GitHub 账号
✅ GitHub Personal Access Token (PAT)
✅ Hexo 博客仓库
✅ NoteGen 已安装

配置步骤

第一步：配置 GitHub 同步

打开 NoteGen → 设置 → 同步配置 → GitHub
输入 Access Token：
- 粘贴你创建的 PAT
- 点击👁️图标验证
检查仓库状态：
- 点击「检查仓库」
- 如果仓库不存在，点击「创建仓库」
- 系统会自动创建两个仓库：
  - NoteGen-Sync：同步仓库（私有）
  - NoteGen-Image：图床仓库（可公开）
启用图床：
- 开启「本地/图床」开关
- 开启「jsDelivr」开关（推荐，启用 CDN 加速）

第二步：配置 Hexo 发布

打开 NoteGen → 设置 → Hexo 博客发布
启用 Hexo 发布：
- 开启「启用 Hexo 发布」开关

配置仓库信息：

仓库所有者：your-github-username
仓库名称：your-hexo-blog
分支：main (或 master)
文章目录路径：source/_posts

启用图片上传：
- 开启「上传图片到 GitHub CDN」
- ✅ 确保已勾选
测试连接：
- 点击「测试连接」
- 确认显示「已连接」✅

配置默认标签和分类（可选）：

1 2	默认标签：技术, 博客, Hexo 默认分类：技术, 编程

发布流程

1. 在 NoteGen 中编写文章

创建一个新的 Markdown 文件，例如：

# 我的第一篇 Hexo 博客

这是一篇测试文章。

## 插入本地图片

![本地截图](./assets/screenshot.png)

## 数学公式

$$
E = mc^2
$$

## Mermaid 图表

```mermaid
graph LR
    A[开始] --> B[处理]
    B --> C[结束]

代码块

1	console.log('Hello Hexo!')

### 2. 添加图片

**方式 1：粘贴图片**
- 直接 `Ctrl+V` / `Cmd+V` 粘贴截图
- 图片自动保存到 `./assets/` 目录

**方式 2：拖拽图片**
- 从文件管理器拖拽图片到编辑器
- 自动插入 Markdown 语法

**方式 3：上传图片**
- 点击工具栏的「上传」按钮
- 选择图片文件

### 3. 发布到 Hexo

1. 点击编辑器工具栏的 **🌐 地球图标**（Hexo 发布按钮）

2. **预览对话框**会显示：

📄 文章标题：我的第一篇 Hexo 博客
📁 文件名：2025-01-11-my-first-hexo-blog.md
📅 发布日期：2025-01-11 15:30:00
🏷️ 标签：技术, 博客, Hexo
📂 分类：技术, 编程
🖼️ 本地图片：1 张图片将上传到 GitHub CDN

1
2
3

3. 点击「发布」按钮

4. **自动处理流程**：

✅ 提取标题和日期
✅ 生成 Frontmatter
✅ 上传本地图片到 GitHub → 获取 CDN URL
✅ 替换 Markdown 中的图片路径
✅ 推送到 Hexo 仓库 (source/_posts/)

5. **Vercel 自动部署**：
- Vercel 检测到 GitHub 仓库更新
- 自动触发 Hexo 构建
- 博客自动发布 🎉

### 4. 查看结果

#### GitHub 仓库变化

访问：`https://github.com/your-username/your-hexo-blog`

你会看到：

source/
_posts/
2025-01-11-my-first-hexo-blog.md ← 新增文章

文章内容：
```markdown
---
title: 我的第一篇 Hexo 博客
date: 2025-01-11 15:30:00
tags:
  - 技术
  - 博客
  - Hexo
categories:
  - 技术
  - 编程
---

# 我的第一篇 Hexo 博客

这是一篇测试文章。

## 插入本地图片

![本地截图](https://cdn.jsdelivr.net/gh/your-username/NoteGen-Image@main/abc123.png)

...

图床仓库变化

访问：https://github.com/your-username/NoteGen-Image

你会看到上传的图片：

1
2
3

abc123.png
def456.png
...

CDN URL

图片通过 jsDelivr 加速：

1	https://cdn.jsdelivr.net/gh/your-username/NoteGen-Image@main/abc123.png

✅ 全球 CDN 加速
✅ HTTPS 安全访问
✅ 永久有效

Hexo 配置

1. 确保 Hexo 支持数学公式和 Mermaid

安装依赖

cd your-hexo-blog
npm install hexo-renderer-markdown-it --save
npm install markdown-it-katex --save
npm install hexo-filter-mermaid-diagrams --save

修改 `_config.yml`

# Markdown 渲染器配置
markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '""'''
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-katex
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'

# Mermaid 图表
mermaid:
  enable: true
  version: "10.6.1"
  options:

主题配置（以 Next 主题为例）

在主题的 _config.yml 中：

# Math Equations (MathJax or KaTeX)
math:
  enable: true
  per_page: false
  engine: katex

# Mermaid
mermaid:
  enable: true

添加 KaTeX CSS

在主题的 head 部分添加：

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">

2. 测试部署

1
2
3

hexo clean
hexo generate
hexo server

访问 http://localhost:4000 检查：

✅ 图片正常显示
✅ 数学公式渲染正确
✅ Mermaid 图表显示
✅ 代码高亮

常见问题

Q1: 图片上传失败怎么办？

检查清单：

✅ GitHub Token 是否正确？
- 设置 → 同步配置 → GitHub → 重新输入 Token
✅ Token 权限是否包含 repo？
- 重新生成 Token 并确保勾选 repo
✅ 图床仓库是否存在？
- 访问 https://github.com/your-username/NoteGen-Image
✅ 网络连接是否正常？
- 检查防火墙和代理设置

Q2: jsDelivr CDN 访问慢？

解决方案：

使用 GitHub 原始 URL（不推荐）：

1	https://raw.githubusercontent.com/username/NoteGen-Image/main/image.png

使用其他 CDN：
- Statically: https://cdn.statically.io/gh/username/NoteGen-Image/main/image.png
- GitHub Proxy: https://ghproxy.com/https://raw.githubusercontent.com/username/NoteGen-Image/main/image.png
自建 CDN：
- 使用 Cloudflare Pages
- 使用 Vercel

Q3: Hexo 构建后图片不显示？

检查：

✅ 图片 URL 是否正确？
- 查看生成的 HTML 源代码
✅ 图床仓库是否为公开？
- 私有仓库需要访问权限
✅ jsDelivr 是否被屏蔽？
- 尝试更换 CDN 源

✅ Markdown 语法是否正确？

1 2	正确：![alt](https://cdn.jsdelivr.net/gh/.../image.png) 错误：![alt](./assets/image.png) ← 本地路径

Q4: 如何删除已上传的图片？

访问图床仓库：https://github.com/your-username/NoteGen-Image
找到要删除的图片
点击图片 → 点击删除按钮

或者使用 Git 命令：

git clone https://github.com/your-username/NoteGen-Image.git
cd NoteGen-Image
git rm image.png
git commit -m "Remove image"
git push

Q5: 可以使用自定义图床仓库名称吗？

可以！

打开 NoteGen → 设置 → 图床设置
找到「自定义仓库名」
输入你想要的名称，例如：my-blog-images
保存后，新图片会上传到自定义仓库

最佳实践

1. 图片命名规范

NoteGen 自动生成 UUID 文件名：

1	abc123def456.png

优点：

✅ 避免重名冲突
✅ 自动去除空格和特殊字符
✅ 便于管理

2. 图片优化

发布前优化图片：

压缩大图（推荐 < 500KB）
使用 WebP 格式（更小）
裁剪不必要的区域

工具推荐：

TinyPNG: https://tinypng.com/
Squoosh: https://squoosh.app/
ImageOptim (macOS)

3. 备份策略

自动备份：

GitHub 本身就是备份
图床仓库可以 Fork 或 Clone

手动备份：

1	git clone https://github.com/your-username/NoteGen-Image.git

4. 安全建议

✅ Token 权限最小化：只给 repo 权限
✅ 定期更换 Token：每 6 个月更换一次
✅ 不要分享 Token：Token 相当于密码
✅ 图床仓库设为公开：方便 CDN 访问（不含敏感信息）

5. 性能优化

Hexo 配置：

# 启用 HTML 压缩
html_minifier:
  enable: true
  exclude:

# 启用 CSS 压缩
css_minifier:
  enable: true

# 启用 JS 压缩
js_minifier:
  enable: true

# 图片懒加载
lazyload:
  enable: true

6. 监控和统计

GitHub API 查看仓库统计：

1 2	curl -H "Authorization: token YOUR_TOKEN" \ https://api.github.com/repos/your-username/NoteGen-Image

查看流量：

jsDelivr 提供免费统计面板
访问：https://www.jsdelivr.com/package/gh/your-username/NoteGen-Image

进阶技巧

1. 批量图片处理

如果有大量图片需要迁移：

# 克隆图床仓库
git clone https://github.com/your-username/NoteGen-Image.git
cd NoteGen-Image

# 批量复制图片
cp -r /path/to/your/images/* .

# 提交
git add .
git commit -m "Batch upload images"
git push

2. 自定义 CDN 域名

使用 Cloudflare 等服务绑定自定义域名：

1 2	原始：https://cdn.jsdelivr.net/gh/username/repo@main/image.png 自定义：https://img.yourdomain.com/image.png

3. 图片水印

在上传前自动添加水印：

// Hexo 插件示例
hexo.extend.filter.register('after_post_render', function(data) {
  // 处理图片 URL，添加水印参数
  data.content = data.content.replace(
    /!\[([^\]]*)\]\((https:\/\/cdn\.jsdelivr\.net\/gh\/[^)]+)\)/g,
    '![$1]($2?watermark=true)'
  );
  return data;
});

总结

✅ 完整工作流

1. NoteGen 编写 Markdown
2. 插入本地图片
3. 点击 Hexo 发布按钮
4. 自动上传图片到 GitHub
5. 获取 jsDelivr CDN URL
6. 推送文章到 Hexo 仓库
7. Vercel 自动部署
8. 博客在线访问

🎉 优势

免费：GitHub + jsDelivr 完全免费
稳定：全球 CDN 加速
简单：一键发布，自动处理
安全：HTTPS + Token 认证
高效：自动化流程，节省时间

📚 相关链接

🎊 恭喜！你已经掌握了 NoteGen + GitHub CDN + Hexo 的完整发布流程！

刑无刀

https://xingwudao.me/2025/11/12/2025-11-12-%E6%89%93%E9%80%A0%E4%B8%93%E5%B1%9E%E7%9A%84%E5%86%99%E4%BD%9C%E8%BD%AF%E4%BB%B6/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源刑无刀 !

无标签

The Lost Bus 观后感

2025-11-13 刑无刀

我要成为交易员

2025-11-12 刑无刀

打造专属的写作软件

打造专属的写作软件

改造说明

使用概述

什么是 GitHub CDN？

工作流程

前置准备

1. GitHub 账号和 Token

创建 GitHub Personal Access Token

2. 准备工作

配置步骤

第一步：配置 GitHub 同步

第二步：配置 Hexo 发布

发布流程

1. 在 NoteGen 中编写文章

代码块

图床仓库变化

CDN URL

Hexo 配置

1. 确保 Hexo 支持数学公式和 Mermaid

安装依赖

修改 _config.yml

主题配置（以 Next 主题为例）

添加 KaTeX CSS

2. 测试部署

常见问题

Q1: 图片上传失败怎么办？

Q2: jsDelivr CDN 访问慢？

Q3: Hexo 构建后图片不显示？

Q4: 如何删除已上传的图片？

Q5: 可以使用自定义图床仓库名称吗？

最佳实践

1. 图片命名规范

2. 图片优化

3. 备份策略

4. 安全建议

5. 性能优化

6. 监控和统计

进阶技巧

1. 批量图片处理

2. 自定义 CDN 域名

3. 图片水印

总结

✅ 完整工作流

🎉 优势

📚 相关链接

你的赏识是我前进的动力

修改 `_config.yml`