①个人博客空间-建站与部署

此为个人博客网搭建与维护全指南-①个人博客空间-建站与部署
大概内容为：VitePress 初始搭建、deploy.bat 一键同步脚本、GitHub 与 Cloudflare Pages 的云端部署全流程，以及最后的“终极灾备方案”
下一篇：个人博客空间-全局配置与安全

项目介绍

心痒痒：

还是对个人博客/作品网的搭建”贼心不死“

已经确定原始笔记采用Markdown形式，现在的问题是如何构建一个项目（网站），然后还有承载这个项目的服务器（要么给大型网站当孙子分一个服务器，要么自己买一个云服务器）

确认方案

我的需求

这是对AI说的重要Prompt，表达了我的初始需求与目标。

我有一个想法，做一个自己的博客网/作品网，因为我有用markdown写笔记和教程，包括编程，摄影，修图剪辑，office等等内容，还有我自己拍的照片和视频。我用的是typora，然后也有图床和阿里云oss存图片。我应该用什么方案我想做一个属于自己的网站，能够查看这些内容，尤其是好照片和markdown笔记博客。我以前也用hexo➕githubpages搞过博客网，但是随着内容的增加，每次上传都要更新所有文件太慢了，而且我的笔记在某个位置A，我为了上传git必须再搞一个目录B用来专门存放要上传的笔记，同样的内容我又复制了一份，对于内容管理来说太麻烦了。我想现在的情况大概是这样，一方面我需要搞定这个项目的网页显示，一方面我需要有一个挂载服务器。网页我大概率是用现有的漂亮的架构来做，服务器我暂时不太想自己买一个云服务器，可能还是挂载到github或者其他有保障的大平台。你见多识广，根据我的需求，你推荐有什么方法呢？

技术方案

这是一个非常“懂行”的配置组合。Typora (本地编辑体验天花板) + Aliyun OSS (解决了图床和宽带问题)，这说明你已经解决了最麻烦的静态资源管理问题

现在的瓶颈纯粹在于**“内容同步”和“构建效率”：既然你是计科专业的，你应该拒绝“手动复制粘贴”这种低效操作。结合你的需求（代码、Office教程、摄影作品展示），我为你推荐“VitePress + 软链接 (Symlink) + Cloudflare Pages”** 的方案

为什么选择这个方案？

**VitePress (架构层)：**速度快、适配优、扩展好
**速度够快：**基于 Vite 和 Vue 3，本地启动和热更新是毫秒级的。以前用过的Hexo框架，命令hexo g 随着文章变多会越来越慢，但是VitePress 不会
气质契合： VitePress 也就是 Vue 官方文档的生成器。它的默认风格非常适合**“技术教程”**（你的编程和Office内容），左侧目录树，右侧内容，逻辑清晰
Vue 扩展性： 你提到有摄影作品。在 Hexo 里改相册很难受，但在 VitePress 里，你可以直接写一个简单的 Vue 组件（或者找个现成的 Lightbox 插件），在 Markdown 里像写 HTML 一样插入相册，配合你的阿里云 OSS 链接，加载速度飞快
**软链接 / Symbolic Link (解决复制痛点)：**用文件链接实现笔记的双地址管理
这是计算机系学生该用的方法。欺骗文件系统，而不是移动文件
你可以保持你的笔记在 D:/MyKnowledge/ 不动，让博客项目的 docs 目录通过“软链接”直接指向你的笔记目录
效果： 你在 Typora 里保存笔记，浏览器里的博客预览界面实时自动刷新。不需要复制，不需要点同步
Cloudflare Pages (服务器层)：
免费且快： 比 GitHub Pages 快，且自带 CDN
解决了 HTTPS 和域名： 自动分配二级域名，支持绑定自定义域名

我的疑惑

与AI再次交流：对于这个方案，我的问题是：

既然我要放基础的md文档、Office文件、图片（甚至是视频），那么vite框架有足够丰富的插件实现这些内容的展示放映吗？以及我是直接下载vite纯净文件搭建博客还是用别人的基于vite的二次开发的框架，哪个好？
对于我的博客文件的管理，比如说我把原始笔记放在D:\PandaC\StudyNotes\MyKnowledge 目录之下，然后博客网的目录是D:\MyBlog ，你说的软链接是指在MyBlog目录下将笔记指向MyKnowledge目录吗？如果说我的MyKnowledge目录里面有很多文件夹和文件，我要怎么做网站上笔记类型的区分？比如说这个是旅游板块，那个是编程板块，另一个又是作品展示模块，各自的板块里面又有好多分类，最终可以导向若干个笔记或者作品。这样的分类逻辑是要我在MyBlog目录下的网站文件中写好，还是在我本地的原始文件目录下规划好？以及为了不上传私人笔记，需要搞一个Public目录在MyKnowledge目录里面是吗？那里面的笔记和作品需要我分类吗？
还有，当我今天新写了几份笔记或者新建了几份作品，我要如何上传到博客网？需要用到git对吗？那上传会不会很慢？我看到你还有提到自己写一个本地脚本来执行上传功能，这样到底是节省了时间还是浪费了时间？毕竟用的东西越多，这个工作流就越冗余。

方案定型

你问到了“工作流”和“架构”的核心，这正是很多技术博主最容易踩坑的地方。针对你的四个疑问拆解最实际的逻辑：

Q1: VitePress 能否胜任多种格式（Office, 视频）的展示？

答案是：Markdown 和图片/视频完美支持，Office 文件建议“轻量化”处理

Markdown & 图片： 这是 VitePress 的本命技能。特别是你已经有了阿里云 OSS 图床，Markdown 里全是 URL，对 VitePress 来说渲染压力为零
视频： 不需要任何插件。Markdown 支持原生 HTML，并且也可以导入现有插件ArtPlayer
Office 文件 (Word/PPT/PDF)：
展示： 网页原生是不支持直接渲染 .docx 或 .pptx 的（任何框架都一样）。通常的做法是转成 PDF。浏览器原生支持 PDF 预览
插件： 如果非要在线看 Word，有 vue-office 这样的组件，但体验通常不如直接下载或看 PDF
建议： 你的 Office 教程如果是文字版，直接转 Markdown；如果是必须要展示原件，提供一个“点击下载”或“PDF 预览”体验最好

Q2: 纯净版 VitePress vs. 二次开发框架（主题）？

强烈建议：直接使用官方纯净版 VitePress（Default Theme）

理由 1（稳定性）： 很多第三方魔改的主题（类似 Hexo 的 Butterfly）虽然花哨，但作者维护不稳定。VitePress 官方版本更新极快，用纯净版能保证你永远跟得上最新特性，不会报错
理由 2（你的身份）： 你是计科学生，未来的从业者。VitePress 的默认主题已经非常简洁大气（Vue 官方文档同款）。如果你想要修改样式（比如加个背景图、改个字体），你自己写几行 CSS 或者 Vue 组件就能搞定，这比去读别人的文档要快得多，也更符合你的专业技能树
结论： 不要去用那些臃肿的第三方主题，官方默认主题 + 少量自定义配置 是最高效的

Q3: 目录结构、软链接逻辑与分类管理

这部分是重中之重。你的理解基本正确，但需要微调一下以适应“Git 上传”。

1. 必须搞一个 Public 目录吗？

**必须。**你的 D:\PandaC\StudyNotes\MyKnowledge 里肯定有私人日记、账号密码备份等。
操作： 在里面新建一个文件夹叫 Blog_Public（或者就叫 Public）。只有放进 Blog_Public 里的东西，才会出现在互联网上。

2. 分类逻辑在哪里做？（本地 vs 配置文件）

最高效的方案：本地文件夹即分类

**目录结构建议：**示例如下（实际情况自行变动）

Plaintext

D:\PandaC\StudyNotes\MyKnowledge\Blog_Public\
├── 01_Coding           <-- 编程板块
│   ├── Java笔记.md
│   └── Python教程.md
├── 02_Photography      <-- 摄影板块
│   ├── 重庆夜景.md
│   └── 人像修图.md
└── 03_Portfolio        <-- 作品展示
    └── 毕业设计.md

网站映射： VitePress 不需要你手动去配置每一个文件的路径。你可以配置它的 Sidebar（侧边栏）自动读取文件夹结构，或者手动指定“编程板块”读取 /01_Coding/ 下的所有文件
结论： 在你本地的原始文件目录下规划好。这样你写笔记的时候，把文件往对应文件夹一拖，分类就完成了

3. 软链接的具体指向

是的，是指向 MyBlog 下的内容目录
假设 VitePress 的源目录是 D:\MyBlog\docs。你应该把 D:\PandaC\StudyNotes\MyKnowledge\Blog_Public 软链接到 D:\MyBlog\docs。这样，VitePress 启动时，会以为那些笔记就在它的肚子（docs）里

Q4: 上传机制、Git 与“脚本”的必要性

这是你最担心的“冗余”问题。让我解释为什么脚本反而是最省事的

痛点： Git 无法直接跟踪“软链接指向的外部文件”。如果你只用软链接，你在 MyBlog 目录下 git add .，Git 只会存一个“快捷方式”，而不是你的笔记内容。Cloudflare 在云端拉取你的仓库时，找不到那个外部目录，网站就空了

所以，你需要一个“同步脚本” (Sync Script)。这不是为了增加冗余，而是为了自动化“把笔记从私有库搬运到博客发布库”的过程

你的终极工作流（只需点击一次）：

写笔记： 在 D:\PandaC\...\Blog_Public 里写，Typroa 随便改，图片随便插
发布： 双击D:\MyBlog里的 deploy.bat（Windows 批处理脚本）

这个脚本里写什么？（核心逻辑）

这个脚本大概只有 5 行代码，它帮你在几秒钟内完成以下动作：

Robocopy (镜像同步)： 把你的 Blog_Public 文件夹的内容，物理复制（镜像）到 D:\MyBlog\docs
注：Robocopy 是 Windows 自带的神器，速度极快，只复制有变动的文件
Git Add/Commit/Push： 自动进入 D:\MyBlog，执行 git 命令推送到 GitHub

回答你的顾虑：

上传会不会很慢？
极快。 因为图片都在阿里云 OSS（图床），你上传到 GitHub 的只有纯文本 Markdown 代码。几百篇笔记也就几 MB，秒传
Cloudflare 检测到 GitHub 变动，自动在云端构建，通常 1-2 分钟网站就更新了
脚本是浪费时间吗？
它是节省时间的神器。 它可以让你完全不用管 MyBlog 这个项目目录。你只需要关注你的笔记目录
你想想，如果没有这个脚本，每次写完文章，你得：打开博客目录 -> 手动复制文件 -> 打开 Git 终端 -> 输入三行命令。这才是冗余

总结方案的可行性

这个方案对你（CS 大四学生）来说是性价比最高的：

内容层： 继续用 Typora + OSS，体验无敌
管理层： 本地建立 Blog_Public 文件夹分类，物理隔离隐私笔记
技术层： 纯净版 VitePress，不够用了再加 Vue 组件
自动化层： 写一个 .bat 脚本（用到 Robocopy 和 Git），实现一键发布

项目构建

这个方案的核心逻辑是：“本地双目录架构” + “脚本一键同步”

①初始化 VitePress

我们要先在本地把博客项目的“壳子”搭好

创建博客项目文件夹 不要在你的笔记目录里建，找一个干净的地方（比如 D:\MyBlog）。打开终端（CMD 或 PowerShell），进入该目录：
powershell
```
mkdir D:\MyBlog
cd D:\MyBlog
```
1
2
初始化项目 依次执行以下命令（全默认回车即可）：
powershell
```
# 1. 初始化 package.json
npm init -y

# 2. 安装 VitePress (这步可能需要几十秒)
npm add -D vitepress

# 3. 启动安装向导
npx vitepress init
```
1
2
3
4
5
6
7
8
在安装向导中的选择建议：
- Where should VitePress initialize the config? -> 直接回车 (默认 ./)
- Site title: -> 输入你的博客名，比如 PandaC's Blog
- Site description: -> A cool CS student's portfolio
- Theme: -> Default Theme (选默认的，最稳)
- Use TypeScript? -> No (除非你特别想用 TS，否则 JS 够用且简单)
- Add VitePress npm scripts to package.json? -> Yes
第一次启动预览 安装完成后，输入：
npm run docs:dev （本地调试的方式，不用像在线调试那样每次都去刷新网页）
终端会出现一个 http://localhost:5173 的地址。按住 Ctrl 点击它，浏览器打开。 🎉 恭喜！你的博客雏形已经在他电脑上跑起来了。

②规范笔记目录

笔记管理流程

在 D:\PandaC\StudyNotes\MyKnowledge 目录下，新建一个文件夹，命名为 Blog_Public（或者 Public_Notes）；然后在 Blog_Public 里随便建两个测试文件夹和文件，并且写点文字

以后的笔记管理方法：

❌ 私人日记、账号密码 -> 放在 MyKnowledge 根目录下。
✅ 要发的教程、作品 -> 放在 MyKnowledge\Blog_Public 里面。

搞好笔记原始地址和博客项目地址的管理：笔记原始地址在D:\PandaC\StudyNotes\MyKnowledge\Blog_Public，都放在Blog_Public目录里面了；博客项目地址在D:\MyBlog\docs，用脚本会自动镜像上传

③编写“一键同步脚本” (deploy.bat)

我们要写一个脚本，它的作用是：把 Blog_Public 里的东西，“镜像”复制到 D:\MyBlog\docs 下，然后自动提交 Git

在 D:\MyBlog 根目录下，新建一个文本文档，重命名为 deploy.bat 右键 -> 编辑，把下面的代码粘贴进去（注意修改里面的路径为你自己的实际路径！）：

bash

@echo off
echo =======================================================
echo          PandaC Blog Auto Deploy Script
echo =======================================================

:: 设置路径变量 (请修改这里！！！)
:: SOURCE_DIR: 你原本笔记存放的位置 (只同步公开的部分)
set SOURCE_DIR="D:\PandaC\StudyNotes\MyKnowledge\Blog_Public"

:: TARGET_DIR: 博客项目的文档存放位置 (通常是 docs 目录)
set TARGET_DIR="D:\MyBlog\docs"

echo [1/3] Syncing files from Knowledge Base to Blog...
:: 使用 robocopy 进行镜像复制
:: /MIR: 镜像模式 (源目录删了文件，目标目录也会删，保持完全一致)
:: /XD: 排除不需要同步的文件夹 (比如 .git)
robocopy %SOURCE_DIR% %TARGET_DIR% /MIR /XD .git .vitepress

echo.
echo [2/3] Adding changes to Git...
git add .

echo.
echo [3/3] Committing changes...
:: 获取当前日期时间作为 commit 信息
set d=%date:~0,10%
set t=%time:~0,8%
git commit -m "Auto update: %d% %t%"

echo.
echo [4/3] Pushing to GitHub...
:: 注意：你还没关联 GitHub，这一步第一次跑会报错，等会儿关联了就好了
git push origin main

echo.
echo =======================================================
echo             Deployment Complete!
echo =======================================================
pause

保存关闭即可

④准备Git仓库

准备流程

现在脚本写好了，但是你的 D:\MyBlog 还不是一个 Git 仓库，也没关联 GitHub

初始化 Git 在 D:\MyBlog 目录下打开终端：git init
创建 .gitignore 文件 在 D:\MyBlog 下新建一个文件叫 .gitignore (没有文件名，只有后缀)，用记事本打开，填入以下内容（防止把垃圾文件传上去）：
```
node_modules
.DS_Store
dist
cache
```
1
2
3
4
在 GitHub 上建仓，登录你的 GitHub，右上角 + -> New repository
Repository name 填 my-blog (或者任何你喜欢的名字)
Public (必须是 Public，Cloudflare 免费版才好用)，其他都不勾选，点 Create repository
关联并推送 GitHub 会给你跳出一个页面，找到 "…or push an existing repository from the command line" 那一栏的代码。在你的 D:\MyBlog 终端里执行那几行代码：
powershell
```
git remote add origin https://github.com/你的用户名/my-blog.git
git branch -M main
git push -u origin main
```
1
2
3
(如果这一步报错，可能是你还没在本地登录 Git，需要配置 git config --global user.name 等)

报错解决

一番战

报错代码：

powershell

D:\MyBlog>git init
Initialized empty Git repository in D:/MyBlog/.git/

D:\MyBlog>git remote add origin https://github.com/你的用户名/my-blog.git

D:\MyBlog>git branch -M main

D:\MyBlog>git push -u origin main
error: src refspec main does not match any
error: failed to push some refs to 'https://github.com/你的用户名/my-blog.git'

解决方法：

暂存所有文件（装包）：git add .
(注意 add 后面有一个空格和一个点，意思是把当前目录下所有文件放入暂存区)
提交文件 (封口)：git commit -m "首次提交：初始化博客"
(这一步执行完，你会看到一大串提示 create mode...，说明文件被记录下来了，此时 main 分支才正式诞生)
再次推送（发货）：git push -u origin main

然后登录github即可，如果看到 Branch 'main' set up to track remote branch 'main' from 'origin'.，那就是大功告成！

二番战

报错代码：

powershell

D:\MyBlog>git add .
xxx

D:\MyBlog>git commit -m "首次提交：初始化博客"
[main (root-commit) 7a9790e] 首次提交：初始化博客
 8 files changed, 2717 insertions(+)
 create mode 100644 .gitignore
 xxx

D:\MyBlog>git push -u origin main
remote: Invalid username or token. Password authentication is not supported for Git operations.
fatal: Authentication failed for 'https://github.com/pandac-blog/my-blog.git/'

问题所在：

这又是一个经典的“新手墙”，每一个刚开始用 Git 的人都会撞一次

原因很简单： 为了安全，GitHub 在 2021 年取消了“用账户密码直接在命令行登录”的功能。报错信息 Password authentication is not supported 说的就是这个意思：你刚刚输入的那个密码（你的 GitHub 登录密码）是不被接受的

解决方法：

去github生成令牌（Token）：打开浏览器，登录你的 GitHub。点击右上角头像 -> Settings (设置)。在左侧侧边栏拉到最下面 -> Developer settings (开发者设置)
左侧点击 Personal access tokens -> Tokens (classic)
- 注意：一定要选 Classic (经典版)，不要选 Beta
点击右边的 Generate new token (classic)。
- Note (备注): 随便填，比如 MyBlogToken
- Expiration (过期时间): 建议选 No expiration (不过期)，省得以后麻烦
- Select scopes (选择权限): 这是重点！ 务必勾选第一个 repo (把 repo 下面的子选项全选上)。这代表允许这个令牌控制你的仓库
拉到最底，点击绿色按钮 Generate token
⚠️ 关键时刻： 你会看到一串以 ghp_ 开头的乱码字符串。 立刻、马上把它复制下来，保存在你的记事本里！ (因为如果你刷新页面，这串代码就再也看不到了，只能重新生成)
清除旧的错误凭证 (防止电脑自作聪明)
因为你刚才失败了一次，Windows 可能会傻傻地记住那个错误的密码，导致你下次不再弹窗询问。我们先把它清掉
点击电脑左下角搜索框，搜 "凭据管理器" 或 "Credential Manager" 并打开
点击 "Windows 凭据" (Windows Credentials)
在列表里找有没有 git:https://github.com 这一项
- 如果有： 点击它，选择 删除 (Remove)；如果没有： 直接跳过这一步
再次推送 (见证奇迹)
回到你的 CMD 黑框框（D:\MyBlog 目录下），再次输入：
bash
```
git push -u origin main
```
1
这时候会出现两种情况：
情况 A：弹出一个图形界面的登录框
点击 "Sign in with your browser" (浏览器登录)。浏览器授权一下，立刻就会成功。
情况 B：终端提示输入 Username 和 Password
Username for 'https://github.com': 输入你的 GitHub 用户名 (不是邮箱)
Password for 'https://github.com': 这里粘贴你刚才复制的那串 ghp_... 的 Token！

⑤连接Cloudflare Pages

然后进入最后的“高光时刻”：把这个仓库连接到 Cloudflare Pages，生成一个全世界都能访问的 HTTPS 网址

第一步：注册/登录 Cloudflare

打开 https://dash.cloudflare.com/
登录后，在左侧侧边栏找到并点击 "Workers & Pages"

第二步：创建 Pages 项目

点击页面上的蓝色按钮 "Create application" (创建应用)
在上方选项卡中，点击 "Pages"
点击 "Connect to Git" (连接到 Git)
选择 GitHub 页签，然后点击 "Connect to GitHub"
*如果是第一次，它会弹窗让你授权，选 All repositories (所有仓库) 即可
在列表里选中你刚才推上去的仓库 my-blog，点击 "Begin setup"

第三步：配置构建环境 (关键！别填错)

Cloudflare 会自动识别你的仓库，但我们需要告诉它这是一个 VitePress 项目

在 "Set up builds and deployments" 页面：

Project name: 保持默认（比如 my-blog），这决定了你的初始域名（例如 my-blog.pages.dev）
Production branch: 默认应该是 main，不用动
Framework preset (框架预设):
点击下拉菜单，找到并选择 VitePress
Build command (构建命令):
选了预设后，这里应该会自动变成 npm run docs:build
如果没有变，请手动填入：* npm run docs:build
Build output directory (构建输出目录):
选了预设后，这里可能会自动变成 docs/.vitepress/dist
⚠️ 注意： 根据你刚才提交的文件结构（package.json 在根目录），你的输出目录大概率是在根目录下的。请把这里手动改为： .vitepress/dist
(以此为准：因为你的 config.mjs 是在 .vitepress 文件夹里，而不是 docs/.vitepress)
点击底部的 "Save and Deploy" (保存并部署)

第四步：等待起飞

Cloudflare 现在会开始疯狂工作：拉取代码 -> 安装 Node 环境 -> 执行构建命令 -> 分发到全球 CDN。

你会看到一个控制台日志在跑，大概等待 1-2 分钟。当看到 "Success! Your site is deployed" 的绿色提示时，点击那个链接（通常是 https://my-blog-xxx.pages.dev）

第五步：进阶优化（修复“最后更新时间”失效问题）

你可能会发现一个 BUG：当你查看网站时，所有文章的“最后更新时间”都显示为“刚刚”（即构建的那一刻），而不是你真正写文章的时间。

原因： Cloudflare 为了构建速度，默认只下载你仓库的最后一次提交记录（这叫浅克隆），导致它不知道文章的历史修改时间，以为所有文件都是新创建的。

解决方法：

在 Cloudflare 的项目页面，点击顶部的 Settings (设置) 选项卡。
在左侧菜单点击 Builds & deployments (构建和部署)。
找到 Build configurations (构建配置) 区域，点击右侧的 "Edit" (编辑) 按钮。
修改 Build command (构建命令)：
- 将原来的 npm run docs:build
- 修改为： git fetch --unshallow && npm run docs:build
- (这段代码的意思是：先强行把所有历史记录扒下来，然后再开始构建)
点击 Save (保存)
手动触发一次部署：
你可以回到 Deployments (部署) 选项卡，点击最新的那次部署右边的三个点，选择 Retry deployment (重试部署)。
或者随便修改一下你本地的一个文件（比如加个空行），推送到 GitHub，Cloudflare 就会自动触发新的构建。

等待这次构建完成后，你文章底部的“最后更新时间”就会恢复正常，显示真实的修改日期了

验证成果

打开那个链接，你应该能看到一个简洁漂亮的 VitePress 默认页面，上面写着 "VitePress" 或者 "Hello World"。

⑥实际笔记上传

现在的状态是：网站骨架已经搭好了，但内容还是默认的。

接下来的任务就是让电脑里的真实笔记能自动跑到这个网站上去，并且在菜单栏里能点出来。

第一步：验证“一键同步脚本” (测试你的自动化工作流)

我们先别急着改网页配置，先确保你的那个 .bat 脚本能正常工作

准备测试弹药：
去你的“原始内容库”：D:\PandaC\StudyNotes\MyKnowledge\Blog_Public
随便建个文件夹，比如叫 Coding。在里面新建一个 Markdown 文件，叫 Hello.md，随便写点什么（比如“这是我的第一篇自动同步笔记”）
(如果你之前已经建了，就改几个字，确保有变动)
发射！
找到你放在 D:\MyBlog 下的 deploy.bat 脚本。双击运行它。
观察黑框框：
有没有显示 Files : X (复制了几个文件)？
有没有显示 Pushing to GitHub？
最后有没有显示 Deployment Complete？
去 GitHub 查岗：
打开你的 GitHub my-blog 仓库页面。
刷新一下，看看是不是多了一个 docs 文件夹？
点进去看看你的 Hello.md 在不在里面。

如果这一步成功了，说明原始笔记地址->博客项目地址->上传云端已经打通了！ Cloudflare 会自动感应到这次推送，并开始构建（大概 1 分钟后生效）

第二步：配置菜单栏 (让笔记能被看见)

虽然笔记传上去了，但网站导航栏（Home, Examples）里还没它的入口，访客找不到。我们需要修改配置文件

打开配置文件：
用 VS Code 或记事本打开 D:\MyBlog\.vitepress\config.mjs。

修改导航栏 (nav)：

找到 themeConfig 下面的 nav 部分。我们需要加一个指向你刚才上传内容的链接。

把代码改成类似这样（注意格式）：（下面的示例是一个例子，实际不必照抄！！）

javascript

import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "PandaC's Blog",
  description: "A cool CS Student's portfolio",
  
  // 忽略死链检查（防止你还没传图片或链接导致报错）
  ignoreDeadLinks: true,

  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    
    // 1. 顶部导航栏配置
    nav: [
      { text: '首页', link: '/' },
      // 这里链接到你的第一篇笔记
      // 注意：路径对应的是 docs 目录下的文件夹名/文件名
      { text: '编程笔记', link: '/docs/01.Coding/Hello' }, 
      { text: 'VitePress示例', link: '/markdown-examples' }
    ],

    // 2. 左侧侧边栏配置
    sidebar: {
      // 当用户进入 /docs/ 目录时显示这个侧边栏
      '/docs/': [
        {
          text: '我的笔记库',
          items: [
            // 这里要手动添加你的文章列表，或者以后用插件自动生成
            // 格式：{ text: '显示的标题', link: '/docs/文件夹/文件名' }
            { text: 'Java 基础', link: '/docs/01.Coding/Hello' },
            // 如果你有第二篇，就加在这里，比如：
            // { text: '我的猫', link: '/docs/Visuals/MyCat' }
            { text: '我的猫', link: '/docs/02.Visuals/中央公园' }
          ]
        }
      ],

      // 当用户看示例页面时显示这个侧边栏
      '/': [
        {
          text: '示例菜单',
          items: [
            { text: 'Markdown Examples', link: '/markdown-examples' },
            { text: 'Runtime API Examples', link: '/api-examples' }
          ]
        }
      ]
    },

    // 3. 社交链接 (改成你自己的 GitHub)
    socialLinks: [
      // 这里把链接换成你自己的 GitHub 仓库地址
      { icon: 'github', link: 'https://github.com/pandac-blog/my-blog' } 
    ]
  }
})

修改后的重要提示：

关于路径的假设： 我在代码里写的链接是 /docs/01.Coding/Hello。这假设你的 Blog_Public 文件夹结构是这样的：

Plaintext

Blog_Public
└── 01.Coding
    └── Hello.md

*如果你建的文件夹不叫 Coding，或者文件名不叫 Hello.md，请务必把代码里的 /docs/Coding/Hello 改成你实际的路径！

然后保存文件，再次运行 deploy.bat，再去网页查看即可！

第三步：见证奇迹

等待 1-2 分钟后，刷新你的网站页面

看标题： 左上角是不是变成了 "PandaC's Blog"？
看菜单： 右上角是不是多了一个 “编程笔记” 的按钮？
点击它： 能不能跳转到你写的那个 Hello.md 页面？

项目维护

假如有一天，我的设备丢了、在线资源没了，甚至夸张一些我失忆了，我要怎么快速恢复我所创建过的所有内容？主要是博客网及其分享的内容。

==> 基于你现有的系统架构情况，我已经为你推导出了完美的灾后重建方案。

如果你的本地电脑丢失、Typora 源文件全毁，你只需要执行以下四步即可 100% 满血复活：

1. 找回四大核心基建账号 你不需要恢复任何本地文件，你真正需要的是账号密码：

GitHub：存放了你博客的所有 Markdown 纯文本、Vue 组件代码和 VitePress 配置文件。Cloudflare：掌控着你的自定义域名 (pandac-blog.com)、全球 CDN 分发、Zero Trust 加密规则以及 R2 视频存储桶。阿里云 (Aliyun OSS)：存放了你所有的摄影原图和 Markdown 引用图片。LeanCloud：存放了你待办清单 (TodoList) 的 Serverless 云端数据。

2. 代码与内容克隆 (Clone) 登录 GitHub，找回你的私有/公开仓库 my-blog。将其 git clone 到一台新电脑上。此时，你的所有公开笔记（原本在 Blog_Public 里的内容）、Vue 定制组件、样式表和打包脚本，已经全部回到了你的本地硬盘。

3. 静态资源免恢复 (Assets Isolation) 得益于你极为优秀的图床分离架构设计，你的 Markdown 笔记里全是绝对 URL 链接。只要你的阿里云 OSS 和 Cloudflare R2 账号不被注销，你几百兆的 4K 视频和图片根本不需要重新上传，网页一旦生成就能瞬间读取到它们。

4. 云端一键重建 (Re-Deploy) 即使你连 Node.js 和本地开发环境都不想配，你只需登录 Cloudflare 控制台，进入 Pages 项目，重新连接你的 GitHub my-blog 仓库，设置构建命令为 npm run docs:build（或者带上拉取历史的 git fetch --unshallow && npm run docs:build）。 Cloudflare 的云端容器会自动为你下载 VitePress 和所有依赖包（比如 three.js, matter-js），并在 1-2 分钟内将你的博客网（包括那些被加锁保护的日记区）在全球边缘节点上完全原样重现

到这里，一个基础的基于Vitepress框架的博客网已经搭建完成，并且维护方式也已明确。接下来要做的，就是网站样式的装修，然后好好使用博客网O,o啦

FileAuto

AutoPPT

PythonAuto

CuttingEdge

IndieProjects

①个人博客空间-建站与部署

项目介绍

确认方案

我的需求

技术方案

我的疑惑

方案定型

总结方案的可行性

项目构建

①初始化 VitePress

②规范笔记目录

③编写“一键同步脚本” (deploy.bat)

④准备Git仓库

准备流程

报错解决

⑤连接Cloudflare Pages

第一步：注册/登录 Cloudflare

第二步：创建 Pages 项目

第三步：配置构建环境 (关键！别填错)

第四步：等待起飞

第五步：进阶优化（修复“最后更新时间”失效问题）

验证成果

⑥实际笔记上传

第一步：验证“一键同步脚本” (测试你的自动化工作流)

第二步：配置菜单栏 (让笔记能被看见)

第三步：见证奇迹

项目维护

PandaC

AutoPPT

①个人博客空间-建站与部署 ​

项目介绍 ​

确认方案 ​

我的需求 ​

技术方案 ​

我的疑惑 ​

方案定型 ​

总结方案的可行性 ​

项目构建 ​

①初始化 VitePress ​

②规范笔记目录 ​

③编写“一键同步脚本” (deploy.bat) ​

④准备Git仓库 ​

准备流程 ​

报错解决 ​

⑤连接Cloudflare Pages ​

第一步：注册/登录 Cloudflare ​

第二步：创建 Pages 项目 ​

第三步：配置构建环境 (关键！别填错) ​

第四步：等待起飞 ​

第五步：进阶优化（修复“最后更新时间”失效问题） ​

验证成果 ​

⑥实际笔记上传 ​

第一步：验证“一键同步脚本” (测试你的自动化工作流) ​

第二步：配置菜单栏 (让笔记能被看见) ​

第三步：见证奇迹 ​

项目维护 ​

PandaC

①个人博客空间-建站与部署

项目介绍

确认方案

我的需求

技术方案

我的疑惑

方案定型

总结方案的可行性

项目构建

①初始化 VitePress

②规范笔记目录

③编写“一键同步脚本” (deploy.bat)

④准备Git仓库

准备流程

报错解决

⑤连接Cloudflare Pages

第一步：注册/登录 Cloudflare

第二步：创建 Pages 项目

第三步：配置构建环境 (关键！别填错)

第四步：等待起飞

第五步：进阶优化（修复“最后更新时间”失效问题）

验证成果

⑥实际笔记上传

第一步：验证“一键同步脚本” (测试你的自动化工作流)

第二步：配置菜单栏 (让笔记能被看见)

第三步：见证奇迹

项目维护