操作指南

一、前提：进入 WSL 环境

所有操作都在 WSL Ubuntu 终端中进行。

在 VS Code 终端中进入 WSL（三种方式）

方式 1：直接输入命令（最简单）

在 VS Code 中按 `Ctrl + `` 打开终端，输入：

1
wsl

回车后进入 Ubuntu，你会看到提示符变成 wsluser@...。

方式 2：新建 WSL 专用终端

点击终端右上角 + 旁边的 ˅ 下拉箭头 → 选择 “Ubuntu (WSL)”

方式 3：把 WSL 设为默认终端

按 Ctrl + Shift + P → 搜索 Terminal: Select Default Profile → 选择 Ubuntu (WSL)，之后每次打开终端默认就是 Ubuntu。

进入博客目录

1
cd ~/blog

用 VS Code 打开文件

在 WSL 终端中可以用 code 命令直接在 VS Code 中打开任何文件：

1
code ~/blog/source/_posts/文件名.md

前提：VS Code 需安装 Remote - WSL 扩展（通常已预装）。

二、电脑端写作与发布

创建新文章

1
2
cd ~/blog
hexo new "我的第一篇文章"

⚠️ 标题不要带 .md 后缀，Hexo 会自动加上。

这会在 source/_posts/ 下生成 我的第一篇文章.md，然后可以用 VS Code 打开编辑：

1
code source/_posts/我的第一篇文章.md

Markdown 文章头部格式（Front Matter）

1
2
3
4
5
6
7
8
9
10
---
title: 我的第一篇文章
date: 2026-07-20 20:00:00
categories:
  - 技术
tags:
  - Hexo
  - 博客
---
正文内容从这里开始...

本地预览

1
2
cd ~/blog
hexo server

浏览器打开 http://localhost:4000 即可预览。

发布到线上

现在不再使用 hexo deploy，而是用 Git 直接推送源码，让 Netlify 自动构建：

1
2
3
git add -A
git commit -m "描述你改了什么"
git push origin main

推送后 Netlify 会自动检测变更，自己执行 hexo generate 并部署上线（约 1-2 分钟生效）。

为什么不用 hexo deploy 了？

之前 hexo deploy 会把编译后的 HTML 直接推送到 GitHub，Netlify 拿到 HTML 不知道怎么构建，导致部署失败。

现在改为推送源码到 GitHub，Netlify 在服务器上自己执行 hexo generate，流程正确：

1
2
3
你的电脑 ──git push──→ GitHub（源码：.md、_config.yml、主题...）
                              ↓
                        Netlify 自动执行 hexo generate → 部署上线

hexo generate 还要用吗？

发布上线不需要，Netlify 会替你执行。

本地预览时需要：

1
2
hexo generate   # 生成 static 文件
hexo server     # 启动预览 http://localhost:4000

或者直接 hexo server（它会自动生成后再启动）。

📱 手机 CMS 例外：CMS 点”发布”会自动 commit + push 到 GitHub，Netlify 自动构建，全程无需手动操作。

三、📁 文章管理

重命名文章

1
2
3
mv ~/blog/source/_posts/旧名称.md ~/blog/source/_posts/新名称.md
code ~/blog/source/_posts/新名称.md    # 打开后把 title 也改成新名称
git add -A && git commit -m "重命名文章" && git push origin main  # 发布

删除文章

方式 1：命令行

1
2
rm ~/blog/source/_posts/文件名.md
git add -A && git commit -m "删除文章" && git push origin main

方式 2：VS Code 中删除
在左侧文件资源管理器找到 source/_posts/，右键文件 → Delete，然后终端执行 git add -A && git commit -m "删除文章" && git push origin main。

方式 3：手机 CMS 删除
登录 https://mumutingyun.netlify.app/admin/，进入文章后点删除（自动 commit + push，Netlify 自动部署）。

四、📱 手机端登录后台（Decap CMS）

  1. 打开手机浏览器，访问：

    1
    2
    https://mumutingyun.netlify.app/admin/  或
    https://mumutingyun.site/admin/

  2. 点击 “Login with Netlify Identity”

  3. 点击 “Continue with GitHub”

  4. 用你的 GitHub 账号（mumutingyun）授权登录

  5. 登录后你可以：

    • ✏️ 左侧菜单 → “文章” → “新建文章”
    • 📝 用 Markdown 格式写正文
    • 🖼️ 上传图片（存到 source/images/）
    • 📤 点击右上角 “发布” → “立即发布”

  6. 发布后约 1-2 分钟网站生效

五、Git 远程仓库工作流

设置 Git 身份（首次执行）：

1
2
3
cd ~/blog
git config user.name "mumutingyun"
git config user.email "3194491988@qq.com"

设置远程仓库：

1
git remote add origin https://github.com/mumutingyun/mumutingyun.github.io.git

如果已存在先删除：

1
2
git remote remove origin
git remote add origin https://github.com/mumutingyun/mumutingyun.github.io.git

六、📋 完整工作流速查表

场景 操作方式
💻 电脑写文章 hexo new "标题" → 编辑 .md → git push origin main 发布
📱 手机写文章 浏览器打开 /admin/ → GitHub 登录 → CMS 编辑 → 点”发布”
✏️ 重命名文章 mv 改名 → code 修改 title → git push origin main
🗑️ 删除文章 rm 删除 → git push origin main（CMS 删除自动部署）
🔍 本地预览 hexo server → 访问 http://localhost:4000
🔄 拉取最新 git pull origin main

七、⚠️ 重要注意事项

  1. 手机端 CMS 发布后，电脑端需要先 git pull 再写新文章，否则会冲突
  2. 电脑端 hexo deploy 后，CMS 中也能看到最新内容
  3. 图片上传：CMS 上传的图片在 source/images/，引用路径为 /images/xxx.jpg
  4. 不要同时两边编辑同一篇文章，会产生 Git 冲突
  5. 如果还没在 Netlify Identity 中添加 GitHub OAuth，选中 “Let me use my own OAuth app credentials”，填入：
    • Client ID: Ov23li8fcEG8q7qu3CDP
    • Client Secret: 77292aff48c4e4f657a84389387617f7b1a50eaf

八、首次部署检查清单

  • GitHub 仓库 mumutingyun.github.io 已创建
  • 代码已 push 到 GitHub
  • Netlify 已连接仓库，构建命令 hexo generate，发布目录 public
  • Netlify Identity 已启用
  • Git Gateway 已启用（Netlify Identity → Services）
  • GitHub OAuth 已配置为外部提供者
  • https://mumutingyun.netlify.app 能正常访问
  • https://mumutingyun.netlify.app/admin/ 能打开 CMS 登录页

九、🖥️ 在新电脑上搭建写作环境

如果你换了电脑或想在另一台电脑上写文章，不需要重新走完整搭建流程，只需把 GitHub 上的代码拉下来即可。

前提：新电脑也需要 WSL + Node.js

在新电脑上先安装基础环境：

  1. 安装 WSL2 + Ubuntu
  2. 安装 nvm + Node.js：
    1
    2
    3
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
    # 关闭终端重新打开
    nvm install 24

拉取博客代码

1
2
3
4
5
6
7
8
9
10
# 克隆仓库
git clone https://github.com/mumutingyun/mumutingyun.github.io.git ~/blog
cd ~/blog

# 安装依赖（等同于 npm install，自动读取 package.json）
npm install

# 设置 Git 身份
git config user.name "mumutingyun"
git config user.email "3194491988@qq.com"

日常写作流程（在任何一台电脑上都一样）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 1. 开工前先拉取最新（防止另一台电脑或手机 CMS 有更新）
cd ~/blog
git pull origin main

# 2. 写文章
hexo new "文章标题"
code source/_posts/文章标题.md

# 3. 本地预览
hexo server
# 浏览器打开 http://localhost:4000

# 4. 发布上线
git add -A
git commit -m "描述改动"
git push origin main

⚠️ 跨电脑协作注意事项

  1. 写之前一定要 git pull，否则可能和另一台电脑或手机 CMS 的更新冲突
  2. node_modules/ 已经被 .gitignore 忽略，不会上传到 GitHub。所以克隆后必须执行 npm install 才能运行
  3. package.json 和 package-lock.json 会同步，如果你在其中一台电脑安装了新插件（npm install xxx --save），另一台电脑 git pull 后再 npm install 就能同步
  4. _config.yml 中不要写 Token。用 HTTPS 推送时如果遇到认证问题，可以在 URL 中临时嵌入 Token，但不要 commit 包含 Token 的配置文件