VuePress部署GitHub、Gitee遇到的那些坑

前言

最近在用Vuepress的vuepress-theme-reco搭建我的个人博客个人博客，并部署到GitHub或者Gitee的GitPages的过程中，遇到到了各种各样的坑。为了解决这些坑，我通过加群交流，网上搜寻花费了不少 精力来解决，为了避免大家和我踩同样的坑，我通过此篇博文，特地将遇到的问题和解决方案记录下来，与大家分享。

总结一下，遇到的问题分为两类：1、路径问题 2、部署问题

如果感兴趣的同学，欢迎来我的博客留言和交流。点击我的个人博客即可访问。

部署问题

1.修改base

如果我们的博客部署的是.github.io（即github中与自己用户名同名的仓库），github会自动将其部署为GitPages。若我们想部署到github或者gitee的其他仓库，**则我们必须指定base，base的属性名必须和仓库名同名，否则博客首页会出现404问题。**如下两图所示，我Gitee的仓库名为Blog，则base必须配置为:

 base: '/blog/',

2.deploy.sh

deploy.sh其实是一个Linux/Unix系统的shell脚本文件，其文件内容如下

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd dist

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

git config --global user.name "xxx"
git config --global user.email "[email protected]"

# 填写你需要发布的仓库地址
git push -f https://gitee.com/xxx/xxxx.git master

cd -

将这些命令写成脚本文件，是为了节省每次修改和添加博客内容，并重新部署到GitPages上的时间。但是在Windows自带的终端运行，会出现如下报错，因为Windows自带的终端无法运行Linux的shell文件。

bash不是内部或外部命令

解决方法

这时，我们想到，其实Git 是 [Linus Torvalds](https://baike.baidu.com/item/Linus Torvalds/9336769) 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。自然git bash终端可以使用shell脚本文件。所以，我们可以通过git bash 到deploy.sh目录下，运行改shell文件，方便我们博客的部署。如下图：

路径问题

1、博文和摘要中图片的路径问题

首先，要想添加摘要，需要在markdown整个正文的上方，YAML Front Matter注释下方，添加:::tip:::，并在其中填写想要添加的摘要内容，可以是图片或者文字内容。图片可以通过下方的方式，统一大小并指定路径。

<img src="./images/vuepress.jpg" width="100%" height="100%"/>

摘要将会显示在首页和文章的顶部，正是由于这两处都会显示，而首页和文章两个编译后生成的HTML文件路径不用，也就导致了我们需要对两处的图片采取不同的路径。但是摘要的路径又只能在对应文章的markdown文件的’:::tip:::'中指定一次，那我们该如何是好呢？

若指定相对路径则部署到gitpages后，首页的摘要图片就不会显示。（其实主要是指定base之后造成的，若不指定base应该就不会出现这样的问题。）

如上两图所示，文章和摘要中的图片地址是不同的。

解决方法

我发现了一种简单粗暴的解决方法，就是除了在.vuepress的public文件的images中放上摘要图片，同时可以在和博文markdown文件相同目录下，再建立一个images文件夹并且放上摘要图片。路径如下图：