02-2026 年个人博客搭建，搭建属于自己的平台

AI悦创原创2026/1/31大约 11 分钟...约 3224 字

1. 所需环境

安装 Nodejs：网站运行的本质软件；
安装 VScode：网站配置、更新部署等操作软件；
安装 Typora：网站文章编写软件；（唯一的付费软件，可以选择支持盗版～）
安装 Snipaste：截图、贴图软件，文章编写中图片操作的主力软件；（强力推荐每台电脑都默认安装此软件！）
安装 Git：用于和 Github 进行交互操作；（推送代码等）
注册 GitHub 账号：用于网站部署、存储代码等；（作用很强大，必须注册拿下！）
配置 GitHub 的 SSH，参考教程：https://bornforthis.cn/blog/2024/7month/git-ssh.html
「可选」购买域名，便于大家访问网站；
- 域名越直白越好；
- 越短越好；
- 可以参考：
  - AI悦创：bornforthis.cn；
  - 谷歌：google.com；
  - 淘宝：taobao.com；
  - 飞书：feishu.cn；
  - 抖音：douyin.com；
  - 京东：jd.com；
  - 微博：weibo.com；
- 域名是可以随时修改，但是我们一般不推荐修改，为什么？——身份标识，例子：大家都知道淘宝域名（taobao.com），突然有一天淘宝换域名了，很多人都只停留在原本的域名，而不知道最新域名。

Github 注册

访问此链接进行注册：https://github.com/signup?source=login

自己按照流程，一步步注册即可！

2. 购买域名

Step 1：访问阿里云万网：https://wanwang.aliyun.com/
Step 2：注册阿里云账号；
Step 3：🔍搜索你想要的域名，看是否🉑买；
Step 4：购买时会提示需要“创建信息模版”，按指引创建即可：
Step 5：选择立即实名认证即可，按指引操作即可：
Step 6：等待审核通过即可；

3. 本地网站初始化

3.1 启动终端

使用终端进入到目标路径，也就是你想把网站放在哪里。（换句话说：哪个磁盘、哪个文件夹。）

Windows

Mac

假设放在电脑的桌面，我们可以在电脑桌面上创建一个新文件夹叫做：WebSite。（不要包含空格，因为很多编程项目对带有空格的名称处理，容易出问题。）
鼠标选中新创建的文件夹（WebSite），鼠标右键——>最底部的“服务”——>选择“新建位于文件夹位置的终端窗口”：

3.2 在终端初始化网站

我们使用的是开源主题：https://theme-hope.vuejs.press/zh/
点击：快速上手
点击：创建项目
在终端输入主题文档提供的命令进行初始化网站：pnpm create vuepress-theme-hope my-docs
终端界面（上一步启动的终端），把命令改成：pnpm create vuepress-theme-hope .：
键盘上下键选择“简体中文”，随后回车↩︎键：
选择 pnpm：
选择 vite：
按下图进行设置即可：
- 应用名称：需要使用纯英文编写，自己的网站名称；
- 设置应用描述：自己的网站信息介绍，自己编写；
- 其它按图片编写即可；
按照下面继续设置即可：
自己选择是否查看 demo 示例：
如何停止：使用 Ctrl + C 进行停止🤚

3.3 使用 Vscode 打开本网站项目

启动终端，使终端在网站文件夹下。使用前面的终端也是可以的，需要停止运行网站。

操作方法

鼠标选中新创建的文件夹（WebSite），鼠标右键——>最底部的“服务”——>选择“新建位于文件夹位置的终端窗口”：

直接输入：code . 这样就可以直接启动 VScode。

已经成功使用 VScode 启动网站项目：

3.4 网站启动本地预览（网站本地启动）

方法一：使用终端

启动终端，并保证终端路径在网站目录下，输入以下命令 pnpm run docs:dev 进行运行：

执行使用浏览器访问：

➜  Local:   http://localhost:8081/
➜  Network: http://192.168.3.198:8081/

默认是：

➜  Local:   http://localhost:8080/
➜  Network: http://192.168.3.198:8080/

我是因为启动了别的网站，所以启动就自动变成：8081。

方法二：使用 VScode 终端

直接在 VScode 做成“资源管理器”的空白位置，鼠标右键选择：在集成终端中打开

要学会总结，接下来的步骤就如法炮制了。输入启动命令：pnpm run docs:dev，故而方法二的本质就是“使用的还是终端，只不过是借助 VScode 去调用（启动）终端”。

提问：现在我为什么使用的端口是：8082（你如果按教程走，应该是 8081）？

其实原因前面讲过了，原本的端口被占用，只能进行使用下一个端口。

我们如何恢复使用默认端口 8080 呢？——关闭多余的网站不就行了。

那么，我们应该如何把多余启动的网站进行关闭呢？

3.5 关闭本地启动的网站

方法一：直接叉掉终端，但是需要又得启动终端；
方法二：在目标终端使用 Ctrl + C 即可退出。

3.6 配置网站

3.6.1 设置网站基本信息

文件路径：src/.vuepress/config.ts

待修改如下

import { defineUserConfig } from "vuepress";

import theme from "./theme.js";

export default defineUserConfig({
  base: "/",

  lang: "zh-CN",
  title: "博客演示",
  description: "vuepress-theme-hope 的博客演示",

  theme,

  // 和 PWA 一起启用
  // shouldPrefetch: false,
});

我的修改示例

import { defineUserConfig } from "vuepress";

import theme from "./theme.js";

export default defineUserConfig({
  base: "/",

  lang: "zh-CN",
  title: "AI悦创·Python一对一辅导",
  description: "跟 AI悦创一起学习 Python 编程，实现你的编程梦想！官方网站：https://bornforthis.cn",

  theme,

  // 和 PWA 一起启用
  // shouldPrefetch: false,
});

4. 网站部署

4.1 GitHub 创建特定仓库

Step 1：新建仓库

输入仓库名称：huangjiarongbao.github.io；
一个 GitHub 账号，只能创建一个这样的特定仓库，不过有其它方法绕开限制，后期分享。
仓库介绍；
仓库必须公开，不能私有。如果想要私有，得用其它方法保护源代码。
原因很简单：因为免费版必须公开。
随后点击： Create repository 即可；

切换到 SSH：

4.2 本地电脑网站，绑定远程 GitHub 仓库（首次推送）

补充：主题目前初始化自带 GitHub 部署脚本存在问题，需要使用如下内容直接覆盖。路径：.github/workflows/deploy-docs.yml

name: 部署文档

on:
  push:
    branches:
      - main

permissions:
  contents: write

jobs:
  deploy-gh-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
          # 如果你文档需要 Git 子模块，取消注释下一行
          # submodules: true

      - name: 安装 pnpm
        uses: pnpm/action-setup@v2
        with:
          run_install: true
          version: 10.5.2 # 指定 pnpm 版本，可以修改为最新的稳定版本

      - name: 设置 Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: pnpm


      - name: 构建文档
        env:
          NODE_OPTIONS: --max_old_space_size=8192
        run: |-
          pnpm run docs:build
          > src/.vuepress/dist/.nojekyll

      - name: 部署文档
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: src/.vuepress/dist

打开网站终端（终端所在路径需要在网站当中），输入如下命令：

git init  # 初始化仓库
git add . # . 代表添加所有文件夹、文件
git commit -m "first commit"  # "first commit" 可以随便改，代表本次做了哪些修改，做个备注。不改，一直用这个也是可以的。
git branch -M main
git remote add origin git@github.com:huangjiarongbao/huangjiarongbao.github.io.git  # 用你自己的，每个 GitHub 都有自己的 
git push -u origin main

一条一条执行命令，即可。提交成功参考：

(base) ➜  WebSite git init
Initialized empty Git repository in /Users/huangjiabao/Desktop/WebSite/.git/
(base) ➜  WebSite git:(main) ✗ git add .
(base) ➜  WebSite git:(main) ✗ git commit -m "first commit"
[main (root-commit) 2051f89] first commit
 47 files changed, 5661 insertions(+)
 create mode 100644 .DS_Store
 create mode 100644 .github/workflows/deploy-docs.yml
 create mode 100644 .gitignore
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml
 create mode 100644 src/.vuepress/config.ts
 create mode 100644 src/.vuepress/navbar.ts
 create mode 100644 src/.vuepress/public/CNAME
 create mode 100644 src/.vuepress/public/assets/icon/apple-icon-152.png
 create mode 100644 src/.vuepress/public/assets/icon/chrome-192.png
 create mode 100644 src/.vuepress/public/assets/icon/chrome-512.png
 create mode 100644 src/.vuepress/public/assets/icon/chrome-mask-192.png
 create mode 100644 src/.vuepress/public/assets/icon/chrome-mask-512.png
 create mode 100644 src/.vuepress/public/assets/icon/guide-maskable.png
 create mode 100644 src/.vuepress/public/assets/icon/ms-icon-144.png
 create mode 100644 src/.vuepress/public/assets/images/cover1.jpg
 create mode 100644 src/.vuepress/public/assets/images/cover2.jpg
 create mode 100644 src/.vuepress/public/assets/images/cover3.jpg
 create mode 100644 src/.vuepress/public/favicon.ico
 create mode 100644 src/.vuepress/public/logo.png
 create mode 100644 src/.vuepress/public/logo.svg
 create mode 100644 src/.vuepress/sidebar.ts
 create mode 100644 src/.vuepress/styles/config.scss
 create mode 100644 src/.vuepress/styles/index.scss
 create mode 100644 src/.vuepress/styles/palette.scss
 create mode 100644 src/.vuepress/theme.ts
 create mode 100644 src/README.md
 create mode 100644 src/demo/README.md
 create mode 100644 src/demo/disable.md
 create mode 100644 src/demo/encrypt.md
 create mode 100644 src/demo/layout.md
 create mode 100644 src/demo/markdown.md
 create mode 100644 src/demo/page.md
 create mode 100644 src/intro.md
 create mode 100644 src/posts/apple/1.md
 create mode 100644 src/posts/apple/2.md
 create mode 100644 src/posts/apple/3.md
 create mode 100644 src/posts/apple/4.md
 create mode 100644 src/posts/banana/1.md
 create mode 100644 src/posts/banana/2.md
 create mode 100644 src/posts/banana/3.md
 create mode 100644 src/posts/banana/4.md
 create mode 100644 src/posts/cherry.md
 create mode 100644 src/posts/dragonfruit.md
 create mode 100644 src/posts/strawberry.md
 create mode 100644 src/posts/tomato.md
 create mode 100644 tsconfig.json
(base) ➜  WebSite git:(main) git branch -M main
(base) ➜  WebSite git:(main) git remote add origin git@github-work:huangjiarongbao/huangjiarongbao.github.io.git
(base) ➜  WebSite git:(main) git remote add origin git@github-work:huangjiarongbao/huangjiarongbao.github.io.git
(base) ➜  WebSite git:(main) git push -u origin main
Enumerating objects: 62, done.
Counting objects: 100% (62/62), done.
Delta compression using up to 10 threads
Compressing objects: 100% (57/57), done.
Writing objects: 100% (62/62), 591.97 KiB | 1.93 MiB/s, done.
Total 62 (delta 6), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (6/6), done.
To github-work:huangjiarongbao/huangjiarongbao.github.io.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.
(base) ➜  WebSite git:(main)

Tips：github-work 是我自己一台电脑，配置多个 SSH 的标记，无需 care。

4.3 激活 GitHub 部署

4.3.4 尝试访问部署网站

域名已经给出：https://huangjiarongbao.github.io/

4.4 更新网站

4.4.1 方法一「推荐」

使用 VScode 进行提交即可，点击 VScode 左侧的 git 管理按钮：

省略一张图片，

4.4.2 方法二

git add . # . 代表添加所有文件夹、文件
git commit -m "first commit"  # "first commit" 可以随便改，代表本次做了哪些修改，做个备注。不改，一直用这个也是可以的。
git push -u origin main

4.6 域名解析

4.6.1 阿里云解析 GitHub 网站

Step 1：访问阿里云域名解析网站：https://dnsnext.console.aliyun.com/authoritative

Step 2：点击：添加记录

Step 3：添加解析 1

Step 4：添加解析 2

上面完成了阿里云域名要做的，现在我们来完成 GitHub 要做的。

4.6.2 创建域名解析文件「`CNAME`」

在路径：src/.vuepress/public 下创建 CNAME 。

保存后，推送到 GitHub 仓库。

推送到 GitHub 后，会自动执行更新部署。

等待检测完成后，点击：

5. 网站更多配置

5.1 更新属于自己的 logo

可以借助 AI 设计生成属于自己的网站 logo，并把 logo 放入 src/.vuepress/public。MacOS 记得使用快捷键：Command + Shift + 。 即可显示隐藏文件、文件夹。

接着我们需要在 VScode 中进行配置 logo，配置文件路径：src/.vuepress/theme.ts。

注意：在我们的网站当中，所有 / 代表从 public 开始。

也就是：/my-logo.png 其实网站会执行成：src/.vuepress/public/my-logo.png

FAQ

Q1：修改网站未生效

一般我们所做的任何修改，Vuepress 主题都能自动热重载（重新加载运行，实在理解不了，可以理解成：自动重启。）但是在某些情况下：新建文章、修改侧边栏图标等情况下，最新的效果无法在网页上体现出来。此时，解决的方法就是：手动关闭和启动一下。

如果手动关闭与启动之后，问题依然存在。表明所做的修改存在问题，需要撤销修改，试一试别的。

要取消时，弹出的优惠

公众号：AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦，包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Web、Linux」，招收学员面向国内外，国外占 80%。全部都是一对一教学：一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然，还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线，随时响应！微信：Jiabcdefh

C++ 信息奥赛题解，长期更新！长期招收一对一中小学信息奥赛集训，莆田、厦门地区有机会线下上门，其他地区线上。微信：Jiabcdefh

方法一：QQ

方法二：微信：Jiabcdefh

更新日志

2026/2/6 12:24

查看所有更新日志

04a38-https://bornforthis.cn/于 2026/2/6
e578e-image-20260206115136234于 2026/2/6
de10e-image-20260206113216330于 2026/2/6
3cc2d-image-20260206112739501于 2026/2/6
2ea84-不同项目 → 不同 SSH Host → 不同 SSH Key → 不同 GitHub 账号于 2026/2/3
21f71-(base) ➜ WebSite git init Initialized empty Git repository in /Users/huangjiabao/Desktop/WebSite/.git/ (base) ➜ WebSite git:(main) ✗ git add . (base) ➜ WebSite git:(main) ✗ git commit -m "first commit" [main (root-commit) 2051f89] first commit 47 files changed, 5661 insertions(+) create mode 100644 .DS_Store create mode 100644 .github/workflows/deploy-docs.yml create mode 100644 .gitignore create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 src/.vuepress/config.ts create mode 100644 src/.vuepress/navbar.ts create mode 100644 src/.vuepress/public/CNAME create mode 100644 src/.vuepress/public/assets/icon/apple-icon-152.png create mode 100644 src/.vuepress/public/assets/icon/chrome-192.png create mode 100644 src/.vuepress/public/assets/icon/chrome-512.png create mode 100644 src/.vuepress/public/assets/icon/chrome-mask-192.png create mode 100644 src/.vuepress/public/assets/icon/chrome-mask-512.png create mode 100644 src/.vuepress/public/assets/icon/guide-maskable.png create mode 100644 src/.vuepress/public/assets/icon/ms-icon-144.png create mode 100644 src/.vuepress/public/assets/images/cover1.jpg create mode 100644 src/.vuepress/public/assets/images/cover2.jpg create mode 100644 src/.vuepress/public/assets/images/cover3.jpg create mode 100644 src/.vuepress/public/favicon.ico create mode 100644 src/.vuepress/public/logo.png create mode 100644 src/.vuepress/public/logo.svg create mode 100644 src/.vuepress/sidebar.ts create mode 100644 src/.vuepress/styles/config.scss create mode 100644 src/.vuepress/styles/index.scss create mode 100644 src/.vuepress/styles/palette.scss create mode 100644 src/.vuepress/theme.ts create mode 100644 src/README.md create mode 100644 src/demo/README.md create mode 100644 src/demo/disable.md create mode 100644 src/demo/encrypt.md create mode 100644 src/demo/layout.md create mode 100644 src/demo/markdown.md create mode 100644 src/demo/page.md create mode 100644 src/intro.md create mode 100644 src/posts/apple/1.md create mode 100644 src/posts/apple/2.md create mode 100644 src/posts/apple/3.md create mode 100644 src/posts/apple/4.md create mode 100644 src/posts/banana/1.md create mode 100644 src/posts/banana/2.md create mode 100644 src/posts/banana/3.md create mode 100644 src/posts/banana/4.md create mode 100644 src/posts/cherry.md create mode 100644 src/posts/dragonfruit.md create mode 100644 src/posts/strawberry.md create mode 100644 src/posts/tomato.md create mode 100644 tsconfig.json (base) ➜ WebSite git:(main) git branch -M main (base) ➜ WebSite git:(main) git remote add origin git@github-work:huangjiarongbao/huangjiarongbao.github.io.git (base) ➜ WebSite git:(main) git remote add origin git@github-work:huangjiarongbao/huangjiarongbao.github.io.git (base) ➜ WebSite git:(main) git push -u origin main Enumerating objects: 62, done. Counting objects: 100% (62/62), done. Delta compression using up to 10 threads Compressing objects: 100% (57/57), done. Writing objects: 100% (62/62), 591.97 KiB | 1.93 MiB/s, done. Total 62 (delta 6), reused 0 (delta 0), pack-reused 0 (from 0) remote: Resolving deltas: 100% (6/6), done. To github-work:huangjiarongbao/huangjiarongbao.github.io.git * [new branch] main -> main branch 'main' set up to track 'origin/main'. (base) ➜ WebSite git:(main)于 2026/2/2
4a7ab-https://us06web.zoom.us/j/89616236436于 2026/2/2
913ce-的于 2026/2/2
4c24e-KLF9ZA6R于 2026/2/2
aa53c-Key is already in use于 2026/2/2
dabc4-我这个退货说两个订单！但是你们系统把它合并成同一个退货快递，导致超出。需要处理一下于 2026/2/1
7c2f1-我这个退货说两个订单！但是你们系统把它合并成同一个退货快递，导致超出。需要处理一下于 2026/2/1
26dee-openclaw于 2026/2/1
a6ed0-image-20260201111714605于 2026/2/1
02974-image-20260201111714605于 2026/2/1
f0ca2-「常见问题」于 2026/2/1
db929-➜ Local: http://localhost:8081/ ➜ Network: http://192.168.3.198:8081/于 2026/2/1
11c7d-鼠标选中新创建的文件夹（WebSite），鼠标右键——>最底部的“服务”——>选择“新建位于文件夹位置的终端窗口”：于 2026/1/31
f68c3-鼠标选中新创建的文件夹（WebSite），鼠标右键——>最底部的“服务”——>选择“新建位于文件夹位置的终端窗口”：于 2026/1/31
c9419-02-Blog-build.md于 2026/1/31
5a4d4-image-20260131150801525于 2026/1/31
4f5ab---- title: 01-2026 年个人博客搭建，搭建属于自己的平台 icon: blog date: 2026-01-31 14:20:34 author: AI悦创 isOriginal: true sticky: false star: false article: true timeline: true image: false navbar: true sidebarIcon: true comment: true lastUpdated: true editLink: true backToTop: true toc: true于 2026/1/31
fa5dc-image-20260131145637221于 2026/1/31

贡献者

AndersonHJB