VSCode 博客工作流需串联 Markdown 编辑、Git 版本控制、Hexo 静态生成、一键构建预览及 GitHub Actions 自动部署。依次完成：安装 Markdown All in One 与 Paste Image；git init 并规范提交；npm 安装 Hexo，配置 source/public 目录；通过 tasks.json 定义 hexo g/s 任务；最后用 deploy.yml 实现推送即发布。
如果您使用 VSCode 编写博客内容，但尚未整合 Markdown 编辑、版本控制与静态网站发布流程，则可能是由于工具链未正确串联。以下是实现该工作流的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并配置 Markdown 编辑支持
VSCode 默认支持 .md 文件基础语法高亮，但需扩展功能以提升写作体验，如实时预览、表格对齐、导出 PDF 等。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 Markdown All in One，点击安装。
3、安装完成后，新建一个 test.md 文件，输入 # 标题 后按 Ctrl+Shift+V，验证是否弹出实时预览窗格。
4、再搜索并安装 Paste Image，用于将截图直接粘贴为本地 ./images/ 下的文件并自动插入相对路径。
二、初始化 Git 仓库并设置提交规范
将博客源码纳入 Git 版本管理，可追溯每次修改、协作备份，并为后续 CI/CD 提供基础。
1、在 VSCode 终端中执行 git init 初始化空仓库。
2、创建 .gitignore 文件，填入 node_modules/、.DS_Store、public/、_site/ 等生成目录路径。
3、执行 git add . && git commit -m "init: add markdown source files" 完成首次提交。
4、通过 VSCode 源代码管理面板查看变更状态，点击文件旁加号暂存，输入提交信息后按 Cmd+Enter 提交。
三、选用静态网站生成器并集成到项目
静态网站生成器将 Markdown 源文件批量编译为 HTML 页面，无需服务器运行时，适合托管在 GitHub Pages、Vercel 等平台。
1、在终端中执行 npm init -y && npm install --save-dev hexo-cli（以 Hexo 为例）。
2、运行 npx hexo init blog-site && cd blog-site 创建新站点结构。
3、将原有 .md 博客文件复制到 source/_posts/ 目录下，确保文件名含日期前缀（如 2024-05-12-my-post.md）。
4、编辑 _config.yml，将 source_dir: ./source 和 public_dir: ../public 设为跨目录输出，避免污染源码根目录。
四、配置一键构建与本地预览命令
通过 VSCode 的 tasks.json 定义任务，实现快捷键触发构建与服务启动，替代手动输入长命令。
1、按下 Cmd+Shift+P，输入 Tasks: Configure Task，选择 Create tasks.json file from template → Others。
2、替换文件内容为：
{
"version": "2.0.0",
"tasks": [
{
"label": "hexo generate",
"type": "shell",
"command": "npx hexo g",
"group": "build"
},
{
"label": "hexo server",
"type": "shell",
"command": "npx hexo s",
"isBackground": true,
"problemMatcher": []
}
]
}
3、保存后，按 Cmd+Shift+P 输入 Tasks: Run Build Task，选择 hexo generate 执行生成。
4、再运行 hexo server，VSCode 底部状态栏显示 “Listening on http://localhost:4000”，点击即可在浏览器打开预览。
五、自动化部署到 GitHub Pages
借助 GitHub Actions，在推送 main 分支时自动构建并推送生成后的 HTML 到 gh-pages 分支，实现零手动发布。
1、在项目根目录创建 .github/workflows/deploy.yml，内容包含 checkout、setup-node、install-deps、hexo-generate 步骤。
2、在 deploy.yml 中指定 publish_dir: ./public，并使用 peaceiris/actions-gh-pages@v3 动作推送。
3、确保 GitHub 仓库设置中 Pages 功能启用，源选 “GitHub Actions”，等待 workflow 运行完成。
4、提交该 yml 文件后，执行 git push origin main，Actions 自动触发，约 90 秒后访问 https://<username>.github.io 即可看到已部署博客。
