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/',

VuePress部署GitHub、Gitee遇到的那些坑_第1张图片
VuePress部署GitHub、Gitee遇到的那些坑_第2张图片

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不是内部或外部命令

VuePress部署GitHub、Gitee遇到的那些坑_第3张图片

解决方法

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

VuePress部署GitHub、Gitee遇到的那些坑_第4张图片
VuePress部署GitHub、Gitee遇到的那些坑_第5张图片

路径问题

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

VuePress部署GitHub、Gitee遇到的那些坑_第6张图片

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

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

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

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

VuePress部署GitHub、Gitee遇到的那些坑_第7张图片

VuePress部署GitHub、Gitee遇到的那些坑_第8张图片

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

解决方法

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

VuePress部署GitHub、Gitee遇到的那些坑_第9张图片

你可能感兴趣的:(vue.js,前端,程序人生,经验分享)