部署在Github Pages

部署到Github Pages后就能将这个博客上线让大家访问啦。

部署到Github Pages前需要先了解Git。教程点这里

1.创建Git本地仓库

在博客的主目录，先删除.git文件夹，然后打开Git Bash，分别输入下面三条命令

git init
git add .
git commit -m "first commit"

2. 创建Github仓库

打开Github，点击右上角的“+”，点击New repository，输入存放vuepress博客的仓库名称。然后拉到下方点击Create repository。

仓库创建完成，会出现使用该仓库的提示。由于我们已经有对应的本地仓库了，所以要使用第二个方式，分别复制该三条命令到Git Bash中执行。

3. 设置基础路径

如果你想要把博客部署在https://<用户名>.github.io（需要仓库名与用户名相同），那么设置base为 / ，base默认为 / ，所以可以不用设置；如果想要部署在https://<用户名>.github.io/<仓库名>/,那么 base 应该被设置成 '/<仓库名>/'。base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中。

打开/docs/.vuepress 下的config.js。在里面找到base这一行：将其修改为

	base: '/<你的GitHub仓库名>/',

设置完后再git push一次。

4. 开启Github Pages

打开在Github中该仓库的页面，点击Settings，再点击左侧的pages

设置部署的分支为gh-pages，根目录为/(root)。

稍等片刻，你的Github Pages的访问地址就会出现在上方的绿色框中啦。点击即可访问。

到这里，恭喜你的Vuepress博客在Github Pages部署成功！可以把访问地址发给亲朋好友了！

5. 编辑deploy.sh实现手动一键部署

打开主目录下的deploy.sh

#!/usr/bin/env sh

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

#------------------------------------------

#url访问目录，这个是你 github 仓库的名字
#initDist "module.exports = '/Frank-Notes/'"

# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist

# deploy to github
if [ -z "$GITHUB_TOKEN" ]; then
  # 手动部署
  msg='deploy'
  githubUrl=git@github.com:Master-Frank/Frank-Notes.git
else
  # 自动部署
  msg='来自github actions的自动部署'
  githubUrl=https://Master-Frank:${GITHUB_TOKEN}@github.com/Master-Frank/Frank-Notes.git
  git config --global user.name "Master-Frank"
  git config --global user.email "1486493017@qq.com"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github


cd - # 退回开始所在目录
rm -rf docs/.vuepress/dist

其中有下面几项需要修改：

• （第20行左右）githubUrl=git@github.com:<你的GitHub名称>/<仓库名称>.git
• （第24行左右）githubUrl=https://<你的GitHub名称>:${GITHUB_TOKEN}@github.com/<你的Github名称>/<仓库名称>.git
• git config --global user.name "<你的GitHub名称>"
• git config --global user.email "<你的邮箱>"

修改完后保存，先在主目录打开git bash，运行sh deploy.sh。如果看到结果如下图，进度为100%，则deploy.sh配置成功。

写完文章也可以直接双击deploy.sh文件，会自动一键部署。

6. Github Actions实现自动部署

使用上一步中的手动部署有两个问题，一方面启动运行的过程是在自己的电脑执行的，占用自己电脑上的资源；一方面只推送了网页文件到gh-pages分支，没有推送博客文件到main分支。使用Github Actions就能解决这两个问题。

6.1 生成token

点击右上角头像，Settings

点击左侧的Developer settings。

点击左侧的Personal access tokens。

点击右上的Generate new token。

设置token的名字，勾选repo，然后拉到最底下点击Generate token

创建成功后会生成一段token，这段token只显示一次，一定要注意保存！！！

6.2 配置secrets

在Github的仓库中打开Settings，选择左边的Secrets，点击右上的New repository secret。

然后在Name输入ACCESS_TOKEN（一定要一样），Value中填上一步生成的token，点击Add secret。

6.3 使用Github Actions自动部署

添加完成后点击上方的Actions，看看有没有名称是CI的workflow。如果有，那么到此已经配置完成。

之后只需要在Git Bash中执行下面命令

git add .
git commit -m "更新文章"
git push -u origin main

将代码推送到GitHub仓库的master分支，Github Actions就会自动执行，部署到Github Pages啦。

要查看执行Github Actions自动部署的日志可以打开Actions，选择CI，点击最近一次的执行记录。

打开后点击下图红框位置 两次。

自动部署的日志就在这里啦。如果构建部署出现问题，主要看其中run deploy.sh中的日志。