vuepress搭建个人博客+Github Actions 自动部署（详细）

历经网上各种教程，实践之后进行总结记录，免得隔天就忘。

---

前言

记录一下这几天使用vuepress搭建一个简单博客，然后利用github action自动化部署到远程仓库上，最终实现：在本地push代码到远程仓库的时候，能够自动发布到xxx.github.io的站点，就可以直接通过xxx…github.io来访问博客了。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.VuePress使用（不使用vuepress的可以跳过）

第一步：创建并进入vuepress-starter文件夹

mkdir vuepress-starter && cd vuepress-starter

第二步：使用包管理器进行初始化（会出现一些设置，直接全部回车就行，当然如果你想设置我也不拦着，反正我是直接回车了）

yarn init # npm init

第三步：局部安装VuePress（官方不推荐全局安装）

yarn add -D vuepress # npm install -D vuepress

第四步：创建docs文件夹，并且在docs文件夹下创建内容为’# Hello World’ 的README.md文件

mkdir docs && echo '# Hello World' > docs/README.md

第五步：在package.json中添加一些scripts。
可以直接在终端输入命令操作，也可以打开vscode直接操作。
前者可以在终端输入下列命令进入package.json，见下图

vim package.json

按下键盘i键，进入编辑状态(看左下角的区别)，把下面的scripts代码添加到package文件

 "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

添加完代码，按下Esc键，再输入:wq 退出并保存（要用英文键盘）

第六步：在本地启动

yarn docs:dev # npm run docs:dev

启动就可以在本地使用http://localhost:8080/看到页面了

启动完还未结束，配置自动部署前还需要进行如下操作：
（1）在docs文件下创建.vuepress文件夹，这个文件夹用于存放全局配置什么的，然后在docs/.vuepress/下创建config.js ，config.js配置文件的入口文件

// config.js
module.exports = {
    base: "/vuepress-starter/"
}

在vscode打开刚刚的项目以上操作很快就可以完成，如果想要在终端操作的话：

mkdir .vuerpess && cd .vuepress
vim config.js

依次输入上面的两行命令，按下i键，进入编辑状态，编辑完成，按下Esc键，再:wq保存退出即可。
（2）执行build（第一次需要，只是为了有个dist文件，不然首次自动构建会失败），或者应该也可以之间在.vuepress/下创建一个dist文件夹

yarn docs:build

build完成之后可以在.vuepress/下看到dist文件夹。

补充：如果是单纯想写博客，更注重内容创作的小伙伴推荐使用，如果只是想学习一下github自动发布，可以不使用vuepress，推点自己喜欢的内容上去就好了。

2.Github Actions 自动部署（详细）

这里自动部署的意思就是下次只需要push代码就可以直接看到效果了
可以有两种做法，第一种是将源码和显示页面放在不同的仓库来实现，第二种是将源码和显示页面都在同一个仓库来实现。（两者只是存放源码和展示页面的仓库不同，部署的过程和方式都是相同的）

部署过程：

（1）建立一个仓库（假设命名为vuepress-blog），用来存放项目源码。
（2）在部署的目标仓库创建gh-pages分支，如下图所示，输入gh-pages然后回车就可以创建分支了（如果是部署在当前仓库，就在当前仓库创建，如果是其它仓库，就去其它仓库创建）

这个时候其实就可以访问gh-pages了

（3）将源码上传到当前仓库vuepress-blog

git init
git add .
git commit -m "xxxx"
git add remote origin git@github.com:[userName]/vuepress-blog.git
git push

（4）开始使用Github Action实现自动部署

• 第一步：创建action：每个仓库都有一个Actions，点进去，New
  workflow，这个过程就是创建一个后缀为.yml的文件，这个文件想怎么命名都可以，yml文件的内容就需要根据自己的需求进行改动了。

配置deploy.yml

如果是部署到当前仓库的gh-pages分支，deploy.yml的内容如下：

# This is a basic workflow to help you get started with Actions

name: Build and deploy

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: "14"
          
      # 缓存 node_modules
      - name: Cache dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
            
      # 如果缓存没有命中，安装依赖，根据实际来改，也可以是npm，这里是用的yarn
      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn
 
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 部署到 gh-pages 分支
          BRANCH: gh-pages
          # 部署目录为 VuePress 的默认输出目录，这里需要根据项目的目录进行修改
          FOLDER: docs/.vuepress/dist

补充：ACCESS_TOKEN的创建

点击头像—>settings—>Developer settings—>Personal access tokens，创建的时候名称是ACCESS_TOKEN

如果是部署到另外的仓库（建议另外的仓库命名命名为userName.github.io），只需要把上面deploy.yml的内容最下面的部分改成如下：
把

换成

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        env:
         # 部署到你的目标仓库，这里就是你的仓库名
          REPO: git@github.com:owner/repo.git
          # 部署到 gh-pages 分支
          BRANCH: gh-pages
          # 部署目录为 VuePress 的默认输出目录
          FOLDER: docs/.vuepress/dist
          # 当前仓库的密钥
          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_PRIVATE_KEY }}

补充：获取DEPLOY_PRIVATE_KEY的方式：

cd ~/.ssh 进入.ssh文件
ls 查看当前.ssh文件下的目录，其中id_rsa是私钥，id_rsa.pub是公钥。
cat id_rsa 进入id_rsa文件，复制里面的内容就是DEPLOY_PRIVATE_KEY
然后在对应的仓库进行配置，注意创建的时候名称是DEPLOY_PRIVATE_KEY，如图所示：

两个插件的地址：

https://github.com/s0/git-publish-subdir-action
https://www.npmjs.com/package/github-pages-deploy-action**

非自动部署到github，本地自动构建（deply.sh配置）

还有一种不是自动部署，也就是先在本地打包，然后再push到远程仓库发布到，过程也比较简单：在本地的项目建立一个deply.sh文件。
deploy.sh文件内容如下：（这里是在网上查到的）

#!/usr/bin/env sh
 
# 当发生错误时中止脚本
set -e
 
# 构建
npm run build
 
# cd 到构建输出的目录下
cd 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
 
cd -