写在前面
如果你啥前端也不会,我建议你直接抄这个代码,你只需要下载这个代码,然后切换到 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,他做两件事件
- 将项目build成一个可以发布的网页的形式
- 将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 -
如果你是windows操作系统,想要运行这个脚本,请先下载并且配置git bash
官网 https://gitforwindows.org/ 安装教程很多我就不给了
之后运行再cmd里,输入如下命令执行脚本
./deploy.sh
如果运行成功那么项目将会被推送到你刚刚创建项目的中
用Github Pages部署项目
我们已经有了可以自动更新的项目,我们需要将项目部署到公网,让大家看到我们搭建的博客
点开刚刚创建的项目,点击setting按钮,进入pages界面
选择Deploy from a branch就是从一个分支中部署项目,选择master分支,如果选择(/root)文件夹就是根目录,然后点击save即可
等待一段事件后,我们的项目跑起来了,你可以在 自己github的id.github.io 查看到刚刚发布的项目
这个项目是实时更新的不需要你重新部署操作,你要做的就是更新你的master分支即可
以下是作者的项目: https://aiai0603.github.io/
如何用刚刚完成的Vitepress项目更新博客
完成搭建以后接下来要做的很简单了
- 完成一篇md格式的文章,放在对应的文件夹下面
- 更新你的路由和侧边栏,将刚刚完成的文章放上去
- 调用sh脚本,把刚刚写完的内容build后推送到master
- 等待片卡 github pages就会自动更新,点击网站查看即可
- 记得将自己的源程序实时更新到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
之后我们改写我们的脚本,你可以运行一次查看运行效果,如果成功推送说明你的服务已经成功搭建了,这里是作者的博客: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 -
好了至此你已经有了一个可以使用更新的简单博客了!
但是我们面临几个问题:
- 每次都要改侧边栏,太麻烦了
- 界面不能定制,我想更加炫酷一点怎么办,我不想只写md文件
ok!接下来的教程中我们将逐步解决问题