Chuanbao

Appearance

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

chuanbaozheng.com

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

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

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

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

好的，咱们开始：

  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

  1. npm run dev （复制粘贴进去）+ (回车)； 这一步是启动本地预览。终端会给出一个地址（通常是 http://localhost:5173）。把这个地址复制到浏览器打开，你就会看到一个清新、带侧边栏的个人网站原型了！如果这一步遇到错误（npm : 无法加载文件

  2. E:\softwares\New Folder\npm.ps1，因为在此系统上禁止运行脚本）；请看文末；有troubleshooting

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

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

  5. 下一步，创建对应的文件

配置好了路径，你需要在 my-blog 根目录下创建对应的文件夹和文件，网页才能显示内容： 新建文件夹 log，在里面新建 today.md。 新建文件夹 notes，在里面新建 programming.md。 现在回到浏览器刷新一下，你会发现侧边栏已经完全按照你的逻辑排好了！（如果没有刷新出来；大概率是因为路径问题；可以问Gemini帮你修改代码） 16. 如果需要图片；在 my-blog 根目录下创建一个文件夹，命名为 public（VitePress 专门存放资源的地方）。 找一张图片（比如 test.jpg）丢进去。 注意：路径写 /test.jpg 就行，不需要写 public。

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

npm run dev

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

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

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

  2. 回到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 （推送）

  3. 如果需要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，点击浏览器授权即可）

  1. 绑定 Vercel (实现免费公网访问) 1.前往 Vercel 官网，用你的 GitHub 账号 直接登录

    2. 点击 **Add New** -> **Project**   （右上角）

3. 你会看到刚才创建的 `my-blog` 仓库，点击 **Import**。

4. **重要设置：** Vercel 通常会自动识别 VitePress。你只需要确保 `Framework Preset` 选的是 **Other** 或 **VitePress**，然后点击 **Deploy**。

  2. 记住这三个命令，每当你本地的文件更改之后；运行这三个；才能在Vercel 看到更新：

    1. git add .

    2. git commit -m "更新了今天的学习笔记" （里面的中文是你的程序变化comments）

    3. git push

  3. 确认有没有部署成功的方法

回到你的 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 等所有文件夹。

  1. 第二步；配置 Obsidian 像网页一样工作
    1. Files & Links（文件与链接）：
    • Default location for new attachments：改为 Same folder as current file（这样图片会存在笔记旁边，网页才能找到）。
    1. Use [[Wikilinks]]：关闭它（重要！网页只认标准 Markdown 链接 [描述](路径)，不认双括号 [[]]）。
    2. Editor（编辑器）：
    • 开启 "Default view mode" 为 Live Preview，这样你写公式和蛋白质结构笔记时会有即时预览。
    1. 安装插件 Obsidian： GitHobs
  2. 最后在 https://dash.cloudflare.com/ 上购买域名，并且在Vercel上绑定一下即可。（可以问Gemini 具体实操方法；很简单；有问题的话可以联系我）

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;
}

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

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

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

/* --- 首页 Hero 部分：强制缩小字体 --- */

/* 调整主标题 (Chuanbao's Space) */
.VPHero .name {
  font-size: 38px !important;     /* 稍微再小一点点，看是否生效 */
  line-height: 44px !important;
}

/* 调整副标题 (Recording and extending...) */
.VPHero .text {
  font-size: 26px !important;    
  line-height: 32px !important;
}

/* 调整底部描述文字 */
.VPHero .tagline {
  font-size: 16px !important;
  color: var(--vp-c-text-2) !important;
}
/* =========================================
   3. 暗黑模式与全局细节调整
   ========================================= */

.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;
}

/* 全局过渡动画 */
*, *::before, *::after {
  transition: background-color 0.4s ease, color 0.4s ease !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"
  }
}

另一个版本供你参考 精简版-零基础-如何8个小时内拥有自己的个人网站

💡 写给读者的话 ​

“你一定可以的！”

chuanbaozheng77@gmail.com

Copyright © 2026-2026 Chuanbao