记录我的创建个人网站以及更新博客的全流程

2026-06-28

Blog 记录

0 总架构

  1. Hugo博客源码项目（本地+GitHub私有仓库）
    • 代码全程私有，Vercel读取构建
  2. Obsidian
    • 用于撰写整理思路
  3. VSCode
    • 将Obsidian撰写好的文章移动到项目中

1 环境安装

1.1 必备工具

  1. Git：提交代码到GitHub
  2. Hugo Extended（必须扩展版，支持图片处理/SCSS） 下载地址：Releases · gohugoio/hugo 我下载的：hugo_extended_0.163.3_windows-amd64.zip
  3. Obsidian
  4. VSCode
    • 安装插件Paste Image，可自动将黏贴到md的图片给放到指定的文件夹中

1.2 初始化Hugo项目

直接让Coding Agent创建

1.3 基础配置 hugo.toml

baseURL = "https://xxx.vercel.app/"
......

2 创建GitHub私有仓库

  1. GitHub → New repository
  2. Repository name：自定义，勾选 Private，不创建README
  3. 复制仓库SSH/HTTPS地址
  4. 本地代码项目绑定远程仓库
  5. 本地上传到远程

3 Vercel绑定私有GitHub仓库

  1. 打开 vercel.com，使用登录GitHub同一账号
  2. Add New → Project → Import Git Repository
  3. GitHub授权：仅选中你的博客私有仓库授权（不开放全部仓库，安全）
  4. 找到仓库点击Import，修改构建参数
    • Framework Preset：Hugo
    • Build Command：hugo --gc --minify（点击右侧铅笔图标打开Override） --gc清理缓存、过滤草稿；--minify压缩页面提速
    • Output Directory：public
    • Key 输入框填：HUGO_VERSION
    • Value 输入框填你本地安装的 Hugo 版本（比如0.163.3，打开本地终端输入hugo version就能查到）
    • Environments 保持默认 Production and Preview 不用改 ${name}
  5. 点击Deploy，等待首次构建完成
  6. 访问：Vercel分配免费二级域名 xxx.vercel.app，全网可访问

4 VSCode插件自动粘贴图片

完美解决手动复制文件名的麻烦，全程截图→粘贴一步到位。

  1. 安装插件：Paste Image

  2. 配置，打开插件设置：

    • Paste Image: Base Path：${projectRoot}/static/images/notes/zh
    • Paste Image: Insert Pattern：![${name}](/images/notes/zh/${name})
    • Paste Image: Path（对应之前的 Base Path）：${projectRoot}/static/images/notes/zh ${name} ${name}

  3. 使用方法

    • 复制图片
    • 在 md 文档里直接快捷键 Ctrl+Alt+V

  4. 插件自动做两件事：

    • 把图片自动保存到 static/images/notes/zh/
    • 自动生成完整 Markdown 图片链接，不用手打路径。

5 VS Code完整极简工作流

  1. VS Code 打开整个项目
  2. 在 content/zh/notes/ 新建 md 文件
---
title: "标题"
date: 2026-06-29
summary: ""
tags: ["", ""]
---
正文内容

# 截图后 Ctrl+Alt+V，自动插入图片
  1. 截图 → 快捷键粘贴，图片自动入库 + 自动生成链接
  2. 左侧 Git 面板一键提交 + 推送 GitHub
  3. Vercel 自动部署上线

6 本地预览（写完可提前看效果，不用上线）

进入项目终端执行：

hugo server -D

打开 http://localhost:1313 实时预览网站，修改md自动刷新。

-D参数会显示草稿，线上构建不加该参数，草稿不会发布。

7 安全红线（全程遵守）

  1. GitHub博客仓库永久设为Private，不公开
  2. Vercel仅授权访问博客单一私有仓库，不开放全部仓库权限

8 Hugo对比Hexo核心优势

  1. 无Node依赖：仅单二进制文件，换电脑零配置，无npm版本报错
  2. 构建极速：千篇文章秒级打包，Vercel部署速度远超Hexo
  3. 图片路径极简：统一static目录绝对路径，无需额外插件修复图片
  4. 仓库干净：无臃肿node_modules，GitHub私有仓库体积小
  5. 内置全功能：分页、标签、归档、RSS、搜索，不用装大量第三方插件
  6. CI稳定性高：Vercel构建极少失败，长期维护省心