前言

如果没有搭建本地的博客请参考快速搭建自己的博客(一)先搭建本地vuepress博客。
如果你搭建完了本地vuepress的博客，下一步就是快速部署了，本章将讲述如何通过github能快速提供对外的访问地址。

初始化Git仓库

如果你的项目已经上传到github中的仓库上了请忽略这章节。

创建 Git 仓库

首先需要你把本地项目提交到github上

在 Repository name 填入blog，其他保持默认设置，点击 Create repository 按钮，就成功地创建了一个新的 Git 仓库：

将本地项目推送到github仓库

将本地项目推送到新建的仓库上

在本地项目根目录在终端依次执行以下命令：

# 目的就是将本地项目推送到git仓库上

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

git push -f <自己的git地址> master

初始化部署分支

打包

# 将项目打包
npm run docs:build

进入dist文件夹

位置 docs/.vuepress/dist，在该文件夹目录下调用cmd终端：

在终端中依次执行如下命令

# 目的就是将dist目录作为新的gh-pages分支推送到git仓库上
git init
git add -A
git commit -m 'deploy'

git push -f <自己的git地址> master:gh-pages

返回 Git 仓库

查看gh-pages分支

先看看自己有没有gh-pages 分支，并且分支上有刚刚推送的dist文件夹下的内容：

点击settings -> pages

访问显示如下结果即为部署完成：

以上个人博客就算是对外部署完了。

优化部署

针对每次打包部署都会删除dist文件夹所以其内的 .git 也会删除掉，这样每次都需要执行git init 等等，才能推送到远端分支。所以做一下优化。

创建 sh 脚本文件

根目录新建 deploy-gh.sh 文件，内容如下：

#!/usr/bin/env sh

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

# 生成静态文件
# npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

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

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

# 把上面的 <USERNAME> 换成你自己的 Github 用户名，<REPO> 换成仓库名，比如我这里就是：
git push -f git@github.com:Hello-GBY/blog.git master:gh-pages

cd -

修改package.json

package.json 的 scripts 中新加一条命令 deploy-gh

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy-gh": "npm run docs:build && bash ./deploy-gh.sh"
  },

打开Git Bash Here

在项目根目录上鼠标左键会出现Git Bash Here，点击在终端执行一下命令

# 执行 npm run deploy-gh

快速搭建自己的博客(二)

前言