因为编译结果是一堆纯静态的 html 文件 和 js ，没有任何动态服务器生成的内容。
所以，一般的 html 文件如何部署，博客就是如何部署的。
官方文档
https://theme-hope.vuejs.press/zh/get-started/deploy.html
基本原理就是：
pnpm run build 之后
...小于 1 分钟
这个篇章会讲解如何自定义自己的图标
这里我们会用到一个网站：
https://www.iconfont.cn/
如下图所示：
你可以挑选自己喜欢的图标并命名加入到你的项目中去，然后你可以获得 例如:
icon-git
icon-vscode
icon-basic
...小于 1 分钟
整个站站点的修改分为以下几个部分
插件式美化
src/.vuepress/client.ts
文件内容
import { defineClientConfig } from 'vuepress/client';
import { onMounted } from 'vue';
import { defineAsyncComponent } from 'vue';
import 'vuepress-theme-hope/presets/bounce-icon.scss'; // 为页面图标添加鼠标悬停的跳动效果。
const TopNavBeautify = defineAsyncComponent(() => import('./components/TopNavBeautify.vue'));
const HeroBG = defineAsyncComponent(() => import('./components/HeroBG.vue'));
const HeroHitokoto = defineAsyncComponent(() => import('./components/HeroHitokoto.vue'));
const NavMusic = defineAsyncComponent(() => import('./components/NavMusic.vue'));
const PrintVersion = defineAsyncComponent(() => import('./components/PrintVersion.vue'));
const CommentHideBtn = defineAsyncComponent(() => import('./components/CommentHideBtn.vue'));
const MyIcon = defineAsyncComponent(() => import('./components/MyIcon.vue'));
const BlogBg = defineAsyncComponent(() => import('./components/BlogBg.vue'));
const BlogBeautify = defineAsyncComponent(() => import('./components/BlogBeautify.vue'));
const PreviewImage = defineAsyncComponent(() => import('./components/PreviewImage.vue'));
export default defineClientConfig({
enhance({ app, router, siteData }) {
app.component('MyIcon', MyIcon);
},
setup() {
onMounted(() => {});
},
rootComponents: [
TopNavBeautify,
HeroBG,
HeroHitokoto,
NavMusic,
PrintVersion,
CommentHideBtn,
BlogBeautify,
BlogBg,
PreviewImage,
// ...
],
});...大约 2 分钟
...小于 1 分钟
一般的工作流以及需要用到的命令：
#将当前目录变成仓库
git init
#克隆远端仓库到本地
git clone <远程仓库地址>
#仅克隆某一个分支
git clone --single-branch -b <分支名称> <远程地址>
#查看当前工作区状态
git status
#该文件的修改添加到暂存区
git add <filename>
#暂存所有更改
git add .
#将未提交的修改保存起来
git stash
#拉取远端的更改到本地
git pull
#提交当前所有暂存
git commit –m <注释说明>
#切换工作分支
git checkout <分支名>
#新建分支
git checkout -b <分支名>
#将新建的分支推送到远端
git push --set-upstream origin <分支名>
#将一个分支合并到当前工作分支
git merge <分支名>
#查看分支所有分支包括远程分支
git branch -a
#回退版本
git reset HEAD^ 回退到上个版本
git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前
git reset --hard commit_id
#删除远端分支
git push origin :<分支名>
#删除本地分支
git branch -d <分支名>
#将当前分支的 commit 推送到远端
git push...大约 1 分钟
有一些工作流比较复杂，同时涉及到多条命令，除非是自动化工作流，否则使用命令不仅难以记忆，操作效率也会很慢。
而且 文件会改动对比 这种事情用 图形化展示也会比较好一点。
GitHub Desktop
由 GitHub 开发的完全免费且开源的可自定义的 GUI 客户端程序。提供 Windows 和 macOS 版本。界面非常简洁，功能也非常实用。
...小于 1 分钟
...小于 1 分钟
想一想这一篇应该怎么去讲解。
在任意位置新建文件 demo.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<style>
.content {
color: red;
border: 3px solid black;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="content">Hello World , 这里是第一个 html 网页</div>
<button onclick="SayHello()">点我say hello</button>
</body>
</html>
<script>
function SayHello() {
alert('Hello World');
}
</script>...大约 3 分钟
一般情况下，WSL2 的 IP 地址每次启动时都会改变，如果想要在 wsl2 中使用 Windows 系统的代理来进行科学上网，可以使用如下代码。
进入 WSL 在 ~/.bashrc 文件中添加如下指令
host_ip=$(cat /etc/resolv.conf | grep "nameserver" | cut -f 2 -d " ")
export ALL_PROXY="http://$host_ip:10809"...大约 1 分钟
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Git 与常用的版本控制工具 CVS, Subversion, SVN 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。
...大约 1 分钟