使用 VuePress 博客搭建并使用 Github Action 部署

准备工作

• 安装 Node.js 环境
• 安装 Git
• 注册 Github 账号
• 安装 Visual Studio Code

创建项目

1. 创建一个文件夹，文件名不要有中文，为了方便后续的编辑，我使用 VS Code 打开文件夹

2. 使用 Ctrl+`​​ ​打开终端，键入一下命里使用 npm 进行初始化

   yarn init
   

3. 安装 VuePress 为本地依赖

   yarn add -D vuepress
   

4. 等待安装期间新建一个 docs 文件夹并创建一个.md 文件

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

5. 修改 package.json​ 文件，添加 script​​

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

6. 使用一下命令启动本地服务器

   yarn docs:dev
   

   命令成功运行后打开 http://localhost:8080/​，可以看到如下页面

   ​​

基本配置

创建项目后我们需要配置 Vuepress，我们需要在 docs​ 下新建 .vuepress​ 文件夹，然后在它下面新建 config.js​ 文件，此时的目录结构如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

​config.js ​是配置 VuePress 的必要文件，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello World',
  description: 'Just playing around'
  base: '/MyBlog/' // 部署到站点的基础路径
}

具体的配置请参考配置 | VuePress (vuejs.org)

使用 Github Page 部署

获取 Personal Access Token

1. 登录 Github，点击右上角的头像，然后依次点击 Settings→Developer settings→Personal Access Token→Token(classic)

   ​​

   ​

2. 勾选如下权限，点击页面最下方的 Generate token 按钮

   ​​​

3. 保存好生成的 token

   ​​

将代码推送到 Github 上

1. 使用 VS Code 初始化 Git 仓库

   ​​

2. 添加 .gitignore ​文件，忽略 node_modules ​文件夹

   ​​

3. 填写信息，提交代码

   ​

4. 发布仓库，注意这里选择公有仓库

   ​​

使用 Github Action 部署

1. 添加 Repository secret

   ​​

   ​​​

2. 点击 Action，选择新建一个自己的 workflow 配置文件

   ​​

   ​

3. 等待 Action 执行完成，来到 Settings→Pages，Build and deployment 如下设置

   ​​​

代码参考部署 | VuePress (vuejs.org)

name: Build and Deploy
# 在推送时触发
on: [push]
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        # Repository secret
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_REPO: TracyIverson/MyBlog
        TARGET_BRANCH: gh_pages
        BUILD_SCRIPT: yarn && yarn docs:build
        BUILD_DIR: docs/.vuepress/dist

相关链接

VuePress (vuejs.org)

‍