部署vuepress 博客到GitHub

部署vuepress 博客到GitHub

前面搭建项目就不写了，照着官网或其他人的博客搭建一下，就安装官网推荐的目录和不做其他修改。

我主要是部署的时候踩了很多坑，有的是建.github.io这种仓库，要使用GitHub的token，配置.travis.yml文件之类的，我之前用hexo建博客已经取了这个名字，以及对git操作不熟，就花了比较久的时间才弄好，记录一下~

1、首先确定你的项目是否满足以下条件：

• 文档放置在项目的 docs 目录中

• 使用的是默认的构建输出位置

• VuePress 以本地依赖的形式被安装到你的项目中，在根目录的 package.json文件中有如下两段代码：

"devDependencies": {
   "vuepress": "^1.5.2"
 },
 "scripts": {
   "docs:dev": "vuepress dev docs",
   "docs:build": "vuepress build docs",

2、在github上创建一个名为 myblog 的仓库（这里直接建仓库，不必建.github.io那种），并将你的代码提交到github上。 上传本地项目GitHub参考这篇：

通过 Git 将代码提交到 GitHub（上）

这里只需要把yarn docs:built 构建后生成的项目传到github即可，其他的不用上传。

按照我的本地项目和远程仓库就是(在 git bash 中操作）：

1.git clone https://github.com/renyalove/mybolg.git

2.手动复制myBlog/doc/.vuepress中的dist文件夹到 clone下来的mgblog文件夹里。

3. git add .

4. git commit -m '提交我的代码'

5. git log 可查看提交日志

6. git push origin master 上传到远程仓库中

7. 刷新github就可以看到提交成功了

3、在 docs/.vuepress/config.js 文件中设置正确的 base。(这个base就是我的仓库的名字)

如果打算发布到 https://.github.io//（也就是说你的仓库在 https://github.com//），则将 base 设置为 //，此处我设置为 /myblog/ 。

description: '练习文档',
 base: '/myblog/', 

4、在项目根目录中，创建一个如下的 deploy.sh 脚本文件，请自行修改github仓库地址

#!/usr/bin/env sh
​
# 确保脚本抛出遇到的错误
set -e
​
# 生成静态文件
npm run docs:build
​
# 进入生成的文件夹
cd docs/.vuepress/dist
​
git init
git add -A
git commit -m 'deploy'
​
# 如果发布到 https://.github.io/
git push -f [email protected]:renyalove/myblog.git master:gh-pages

cd -

5、双击 deploy.sh 运行脚本(或命令行执行./deploy.sh)，会自动在我们的 GitHub 仓库中，创建一个名为 gh-pages 的分支，而我们要部署到 GitHub Pages 的正是这个分支。

钮后，静静地等待它部署完成即可。

image.png

6、这是最后一步了，在 GitHub 项目点击 Setting 按钮，找到 GitHub Pages - Source，选择 gh-pages 分支，点击 Save 按

image.png

• 部署效果预览：https://renyalove.github.io/myblog/

• GitHub仓库地址：https://github.com/renyalove/myblog