详细版-零基础-如何8个小时内拥有自己的个人网站

chuanbaozheng.com

20260325 今天决定建立自己的个人网站； 原因是昨天我老婆做了一个网站；我做自己网站的心思最早始于硕士期间。等由于一些知识壁垒加上拖延，迟迟没有做。

于是；像一个积累到一定程度的火山，我决定今天摸索一下。 毕竟早上起来；自己一点都不知道；对自己的面临的敌人和困难没有任何的概念。 Anyways；尽然我可以；你都看到这里了，相信自己，你一定也可以！

下面是 需要的工具列表， 如果你还没有，现在在你开始制作网址之前；先把下面的网址；账号，等等注册一下。 创造网站是主要是以下 的pipeline： 本地写代码 -> 推送到 GitHub -> Vercel 自动部署 -> 全球生成网址。

Number	Tools	link	comments	翻译成人话
	Computer		有一个可以创建文件夹的电脑
1	Genimi	https://gemini.google.com/	optimize codes
2	Github	https://github.com/	本地构建的代码上传到Github；下一个软件(Vercel)就能够调用
3	Vercel	https://vercel.com	用于部署网站；把github上存的内容发布到万维网上
4	Windows PowerShell	免安装，window电脑上自带的软件	这个不用安装	需要了解一些基础的command line
5	Obsidian	https://obsidian.md/	这个能够和Windows PowerShell联动；实现把你刚更新的内容上传到Github上
6	Git	https://git-scm.com/download/win	代码搬运工；这个可以晚点安装。在第17步的时候	不急

好的，咱们开始：

1. 先安装一个软件， 目的是你在正式上传你的网站之前，能够本地预览： https://nodejs.org/
2. 这个下载安装完毕后； 按电脑的 win键（四个小方块）；搜索Windows PowerShell；打开你会发现下面的情形：比如： PS C:\Users\chuan>
3. 你输入 cd Desktop （进入桌面文件夹）(这一步如果遇到错；你可以问Gemini 让它帮你解决)
4. mkdir my-blog （创建一个名字叫my-blog的文件夹）
5. cd my-blog （进入my-blog的这个文件夹）
6. 进入这个文件夹后，下面咱们要在这个黑色的窗口里安装并初始化一个软件（VitePress）
7. npm init -y （复制粘贴进去）+ (回车)
8. npm add -D vitepress vue （复制粘贴进去）+ (回车)
9. npx vitepress init （复制粘贴进去）+ (回车)
10. npx vitepress init （复制粘贴进去）+ (回车) ；你会遇到下面的一些选择。

Where should VitePress initialize the config? -> 输入 ./ (回车) Site title: -> 输入你的网站名字（如：XX的学习空间） Site description: -> 输入描述（如：记录成长，每日打卡） Theme: -> 选择 Default Theme Use TypeScript? -> No (新手建议选 No) Add VitePress npm scripts? -> Yes

11. npm run dev （复制粘贴进去）+ (回车)； 这一步是启动本地预览。终端会给出一个地址（通常是 http://localhost:5173）。把这个地址复制到浏览器打开，你就会看到一个清新、带侧边栏的个人网站原型了！如果这一步遇到错误（npm : 无法加载文件 E:\softwares\New Folder\npm.ps1，因为在此系统上禁止运行脚本）；请看文末；有troubleshooting

12. Ok； 下一步 在你的 my-blog 文件夹里，找到 .vitepress/config.mjs (或者 .ts) 文件。用记事本 （这个文件夹是隐藏文件；如果你找不到问Gemini如何找到它）

13. 当你打开config.mjs 这个文件后 ；让Gemini 帮你生成代码；把代码复制进去

14. 下一步，创建对应的文件 配置好了路径，你需要在 my-blog 根目录下创建对应的文件夹和文件，网页才能显示内容： 新建文件夹 log，在里面新建 today.md。 新建文件夹 notes，在里面新建 programming.md。 现在回到浏览器刷新一下，你会发现侧边栏已经完全按照你的逻辑排好了！（如果没有刷新出来；大概率是因为路径问题；可以问Gemini帮你修改代码）

15. 如果需要图片；在 my-blog 根目录下创建一个文件夹，命名为 public（VitePress 专门存放资源的地方）。 找一张图片（比如 test.jpg）丢进去。 注意：路径写 /test.jpg 就行，不需要写 public。

16. 保存文件后，回到你的 PowerShell 窗口，再次输入：

npm run dev

如果这次成功了，你会看到一个绿色的 http://localhost:5173。点开它，你的第一个网页就出现了！ 17. 下载并安装 Git for Windows ；下载后一路点击“Next”安装即可；安装完后，在 VS Code 终端输入 git --version，看到版本号即成功

18. 在 GitHub 创建仓库 (Repository)；目的是创建一个你的本地代码的中转站；

    1. 登录你的 GitHub
    2. 点击右上角的 + -> New repository。
    3. 名字起为 my-blog，选 Public，然后点 Create repository。

19. 回到powershell； 1.运行 git init （初始化） 2. git add . （把所有文件添加进去； 不要漏掉那个点） 3. git commit -m "first commit" （提交记录） 4. git remote add origin https://github.com/你的用户名/my-blog.git （关联远程仓库 (记得替换下面这行里的用户名)） 5. git push -u origin master （推送）

20. 如果需要Git实名认证 （如果没有这一步直接跳到步骤28） 在powershell里

git config --global user.email "你的邮箱@example.com" （复制粘贴；不要删去双引号 “”） git config --global user.name "你的名字" 复制粘贴；不要删去双引号 “”）

git commit -m "第一次打卡发布" （发布你的本地代码） 22. 下一步 把这箱代码“搬”到 GitHub 上 1. git remote add origin https://github.com/你的用户名/my-blog.git （关联你的仓库（注意把“你的用户名”换成真实的） 2. git push -u origin master （# 推送（Windows 可能会弹出一个窗口让你登录 GitHub，点击浏览器授权即可）

23. 绑定 Vercel (实现免费公网访问) 1.前往 Vercel 官网，用你的 GitHub 账号 直接登录 2. 点击 Add New -> Project （右上角） 3. 你会看到刚才创建的 my-blog 仓库，点击 Import。 4. 重要设置： Vercel 通常会自动识别 VitePress。你只需要确保 Framework Preset 选的是 Other 或 VitePress，然后点击 Deploy。
24. 记住这三个命令，每当你本地的文件更改之后；运行这三个；才能在Vercel 看到更新：
    1. git add .
    2. git commit -m "更新了今天的学习笔记" （里面的中文是你的程序变化comments）
    3. git push
25. 确认有没有部署成功的方法 回到你的 Vercel Dashboard：

• 成功了： 你会看到你的项目卡片上有一个 “Ready” 的绿色标签，并且有一个预览图（是你网站的样子）。
• 正在跑： 如果看到 “Building” 或蓝色进度条，说明它正在努力。
• 失败了： 会显示红色的 “Error” 或 “Failed”。

高阶用法： 22. 和Obsidian 联动；当你部署成功后和obsidian联动能够大幅提高你的更新效率；此刻你应该已经安装了Obsidian；具体步骤如下第一步： 1. 在 Obsidian 中“接管”你的博客 2. 打开 Obsidian。 3. 点击左下角的 "Open another vault"（打开另一个库）。 4. 点击 "Open folder as vault"。 5. 选择你的根目录：C:\Users\chuan\my-blog。 - 现在，你在左侧能看到 logs、learning、.vitepress 等所有文件夹。

23. 第二步；配置 Obsidian 像网页一样工作
    1. Files & Links（文件与链接）：
    • Default location for new attachments：改为 Same folder as current file（这样图片会存在笔记旁边，网页才能找到）。
    2. Use [[Wikilinks]]：关闭它（重要！网页只认标准 Markdown 链接 [描述](路径)，不认双括号 [[]]）。
    3. Editor（编辑器）：
    • 开启 "Default view mode" 为 Live Preview，这样你写公式和蛋白质结构笔记时会有即时预览。
    4. 安装插件 Obsidian： GitHobs

Windows PowerShell 里用到command line： ls 展示当前文件夹的内容 cd 进出某一个文件夹； 比如： cd C:\Users\chuan\my-blog ;意思就是进入到这个路径里一个叫my-blog的文件夹；

npm : 无法加载文件 E:\softwares\New Folder\npm.ps1，因为在此系统上禁止运行脚本 解决方法：修改执行策略 以管理员身份运行 PowerShell： 点击 Windows 开始菜单。 搜索 PowerShell。 右键点击 “Windows PowerShell”，选择 “以管理员身份运行”（这一步非常重要）。 输入以下命令并回车： PowerShell Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser 确认修改： 终端会询问你是否确认，输入 Y 然后回车。 现在回到你的项目文件夹 关闭刚才那个管理员窗口，回到你之前的普通 PowerShell 窗口（即 C:\Users\chuan\my-blog 那个路径），重新尝试：

PowerShell （复制粘贴进去）+ (回车) npm init -y （复制粘贴进去）+ (回车)

如果这次成功了，你会看到屏幕上弹出一串关于 package.json 的文本，这意味着你的“地基”已经打好了。 接下来继续执行之前的步骤：

安装 VitePress 和 Vue

npm add -D vitepress vue （复制粘贴进去）+ (回车) npx vitepress init （复制粘贴进去）+ (回车)

这一步是启动本地预览。终端会给出一个地址（通常是 http://localhost:5173）

---

最后 我贴出来我正在用的代码， /config.mts /custom.css /index.md /index.ts /package.json供你们参考：

• /config.mts (网站的最高指挥部。侧边栏长什么样、网站叫什么名字、顶部导航栏去哪里，都在这里配置。) import { defineConfig } from 'vitepress' import { generateSidebar } from 'vitepress-sidebar'

export default defineConfig({ // 1. 基础配置 title: "Chuanbao", description: "蛋白质设计与实验笔记",

// 🌟 自定义域名必备：设置站点地图，让 Google 更好搜到你 sitemap: { hostname: 'https://chuanbaozheng.com' },

// 🌟 确保 base 为根目录，这样自定义域名的图片/样式才不会错位 base: '/',

appearance: true, lastUpdated: true,

themeConfig: { // 1. 顶部导航栏配置 nav: [ { text: '首页', link: '/' }, { text: '关于我', link: '/about-me' }, { text: '打卡记录', link: '/logs/2026/2026-03/03-25' } ],

// 2. 侧边栏自动生成
sidebar: generateSidebar([
  {
    documentRootPath: '/',
    scanStartPath: 'logs',
    resolvePath: '/logs/',
    useTitleFromFileHeading: true,
    useFolderTitleFromIndexFile: true, // 如果文件夹里有 index.md，用它的标题
    collapsed: true,
    hyphenToSpace: true,
    sortMenusByName: true
  }
]),

// 3. 文章大纲与目录
outline: {
  label: '本页目录',
  level: [2, 3] 
},
aside: true,

// 4. 社交链接
socialLinks: [
  { icon: 'github', link: 'https://github.com/superaseraser' },
  { icon: 'linkedin', link: 'https://www.linkedin.com/in/chuanbao-zheng-05a081202/' }
],

// 5. 页脚与更新时间
lastUpdatedText: '最后更新时间',
footer: {
  message: 'chuanbaozheng77@gmail.com',
  copyright: `Copyright © 2026-${new Date().getFullYear()} Chuanbao`
}

} })

• /custom.css (负责“好看”。控制颜色、字体大小、切换黑白模式时的动画效果。没有它，网站就是素颜。)

/* ========================================= 布局修正：导航链接靠左，社交/搜索靠右 ========================================= */

/* 1. 调整导航栏容器，允许内容向左对齐 */ .VPNavBar .content-body { display: flex !important; justify-content: flex-start !important; }

/* 2. 核心：将菜单推向左侧，并把剩余空间留给右侧 / .VPNavBarMenu { flex-grow: 0 !important; margin-right: auto !important; / 🌟 关键：推开右侧所有内容 / margin-left: 32px !important; / 与左侧 Logo/标题的间距 */ }

/* 3. 确保搜索框、外观切换和社交链接在最右边 */ .VPNavBarSearch, .VPNavBarAppearance, .VPNavBarSocialLinks { flex-grow: 0 !important; margin-left: 12px !important; }

/* 4. 优化移动端：在手机上保持汉堡菜单在右边 */ @media (max-width: 959px) { .VPNavBar .content-body { justify-content: space-between !important; } }

/* ========================================= 之前你提供的丝滑过渡代码（保持不变） ========================================= */ :root { --vp-c-brand: #3451b2; --vp-c-brand-next: #5672cd; transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; }

.dark { --vp-c-bg: #1b1b1f !important; --vp-c-bg-alt: #161618 !important; --vp-c-bg-elv: #202127 !important; --vp-c-text-1: rgba(255, 255, 255, 0.87) !important; }

/* ... ... */

• /index.md (你的首页内容。打开 chuanbaozheng.com 第一眼看到的文字和按钮，都写在这里。)

---

layout: home hero: name: "Chuanbao's Space" text: "Bio-Design & Digital Life" tagline: 记录每一个成功搭建环境的小瞬间 image: src: /test-cat.png alt: 我的测试猫 actions: - theme: brand text: About me link: /about-me

- theme: brand
  text: 开始阅读
  link: /logs/today
- 

features:

• icon: 🧬 title: 蛋白质设计 details: 记录 Rosetta, AlphaFold 和结构生物学的点点滴滴。 link: /logs/learning/protein-design/protein-design
• icon: 🔬 title: 实验技能 details: 湿实验操作规范与避坑指南。 link: /logs/learning/lab-skills/lab-skills
• icon: 📚 title: 读书笔记 details: 把看过的书沉淀为成长的养料。 link: /logs/learning/books/books

---

• /index.ts (属于主题的入口文件。通常用来引入上面的 custom.css，把装修方案正式应用到房子上。)

import DefaultTheme from 'vitepress/theme' import './custom.css' // 引入你刚才复制的丝滑 CSS

export default { extends: DefaultTheme, }

• /package.json (记录了网站需要哪些“零件”（插件）以及怎么启动、怎么构建（Build）的指令。)

{ "name": "my-blog", "version": "1.0.0", "type": "module", "scripts": { "dev": "vitepress dev", "build": "node node_modules/vitepress/bin/vitepress.js build", "preview": "vitepress preview" }, "dependencies": { "vitepress": "latest", "vitepress-sidebar": "^1.33.1", "vue": "latest" } }