Vitepress（二）：部署到GithubPages和GiteePages_vitepress部署

写在前面

如果你啥前端也不会，我建议你直接抄这个代码，你只需要下载这个代码，然后切换到 web 分支（ 如果你不会切换分支请自行百度或者使用 GPT ），安装依赖运行即可：

https://gitee.com/zhangshuai6/zhangshuai6/tree/web/

怎么样发布你的 vitepress 博客就是本教程讲解的内容

什么是Git Page

github Pages可以被认为是用户编写的、托管在github上的静态网页。

github pages有300M免费空间，资料自己管理，保存可靠；

gitee pages 同理，只是它托管在国内的 gitee 平台

实现项目自动推送到Github

首先新建一个自己的项目用于存放github pages的内容

格式是 自己github的id.github.io ,比如我的:

之后将刚刚写好的vitepress源项目推送到main分支，再创建一个master分支用于保存推送的网页

回到刚刚的项目里，编写一个自动部署脚本deploy.sh，他做两件事件

1. 将项目build成一个可以发布的网页的形式
2. 将build出来的代码推送到项目的master分支中

脚本的内容如下，该脚本存放在项目最外层，与docs文件夹处于同一级：

# 忽略错误
set -e

# 构建
npm run docs:build

# 进入待发布的目录
cd docs/.vitepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果部署到 https://<USERNAME>.github.io
git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果你是windows操作系统，想要运行这个脚本，请先下载并且配置git bash

官网 https://gitforwindows.org/ 安装教程很多我就不给了

之后运行再cmd里，输入如下命令执行脚本

./deploy.sh
1

如果运行成功那么项目将会被推送到你刚刚创建项目的中

用Github Pages部署项目

我们已经有了可以自动更新的项目，我们需要将项目部署到公网，让大家看到我们搭建的博客

点开刚刚创建的项目，点击setting按钮，进入pages界面

选择Deploy from a branch就是从一个分支中部署项目，选择master分支，如果选择（/root）文件夹就是根目录，然后点击save即可

等待一段事件后，我们的项目跑起来了，你可以在 自己github的id.github.io 查看到刚刚发布的项目

这个项目是实时更新的不需要你重新部署操作，你要做的就是更新你的master分支即可

以下是作者的项目： https://aiai0603.github.io/

如何用刚刚完成的Vitepress项目更新博客

完成搭建以后接下来要做的很简单了

1. 完成一篇md格式的文章，放在对应的文件夹下面
2. 更新你的路由和侧边栏，将刚刚完成的文章放上去
3. 调用sh脚本，把刚刚写完的内容build后推送到master
4. 等待片卡 github pages就会自动更新，点击网站查看即可
5. 记得将自己的源程序实时更新到main分支中，将源代码开源和托管也是一个好习惯

改用 GITEE PAGES

虽然 github pages 很好用，但是它有一个问题就是，github pages 的服务器架设在外网，所以不使用 VPN 的话打开速度非常的缓慢，因此想要更加良好的体验的话，我们可以选择使用国内的 Gitee pages。

我们简单来演示一下，还是新建一个项目，命名的规范和我们 git pages 是一样的，我们使用 id.gitee.io 来命名我们的项目，如何我们创建一个 web 分支来存储我们的源代码，master 分支来保存我们的项目。参考作者的库：

https://gitee.com/zhangshuai6/zhangshuai6

之后我们点开服务，找到 Gitee Pages 这一项，我们选择 master 分支作为我们的部署分支，部署目录不填写然后点击部署即可，具体的操作和 Github 大同小异


最后我们需要修改我们的脚本，我们需要先将我们的项目的远程仓库设置为当前的仓库，我们进入 docs/.vitepress/dist 目录，然后编写在命令行输入：

git remote add https://gitee.com/zhangshuai6/zhangshuai6.git
1

之后我们改写我们的脚本，你可以运行一次查看运行效果，如果成功推送说明你的服务已经成功搭建了，这里是作者的博客：https://zhangshuai6.gitee.io/

set -e
npm run docs:build
cd docs/.vitepress/dist
git init
git add -A
git commit -m 'deploy'

git push -f orgin master
cd -
1
2
3
4
5
6
7
8
9

好了至此你已经有了一个可以使用更新的简单博客了！

但是我们面临几个问题：

• 每次都要改侧边栏，太麻烦了
• 界面不能定制，我想更加炫酷一点怎么办，我不想只写md文件

ok！接下来的教程中我们将逐步解决问题