超详细！！！最新的VuePress + Github Pages + Github Actions实现博客自动部署

超详细！！！VuePress + Github Pages + Github Actions实现博客自动部署

本文着重讲述如何使用通过

Github Actions

将

VuePress

项目部署自动在

Github Pages

上。每一位开发者有一个自己的博客网站是一件很酷的事情，由于最近想整理一下在学习前端过程中的学习心得、体会等内容，因此一直想搭建一份自己的博客系统，用于后期的知识点回顾。其实在此之前，有使用hexo进行博客的搭建，但是Vue写多了以后，想用VuePress也搭建一个，并作为后期文档维护的网站。

在这里打个小广告。我的博客是在一位开源大佬的基础上搭建的，内容包含了HTML、CSS、JS/TS、VUE、REACT等一些列前端技术点，面试技巧等内容。由于之前的大佬不维护了，因此我借鉴过来并且继续与时俱进的维护内容，内容免费，仅作为学习参考，感兴趣的可以去看看，谢谢大家！！！去看看

一、准备一个VuePress静态页面

在完成部署前，需要准备一个使用VuePress搭建的项目，如果这一步大家还没完成或者想回顾一下的话，可以参考我的这一篇文章，详细介绍了如何使用VuePress搭建一个博客项目。传送门

二、搭建一个Github Pages页面

GitHub Pages 是 GitHub 提供的一项服务，允许用户直接在 GitHub 仓库中托管静态网站。这意味着你可以使用它来创建和发布个人项目、文档或博客等内容，并且这些内容将被托管在 GitHub 的服务器上。

注意：

1、我们只能为每个 GitHub 帐户创建一个用户或组织站点，也就是大家熟知的，仓库的名字必须是

<username>.github.io

或者对于组织来说是

<organizationname>.github.io

这种类型的仓库，这种仓库只能有一个；

2、项目站点没有限制，URL一般来说都是

<username>.github.io/<project-name>

。项目页面用于展示特定项目的文档或信息。

本文主要讲解一下第一种，仓库的名字必须是

<username>.github.io

的个人用户站点。

创建仓库

在个人的主页，先点右上角的加号，然后点击

New repository

按钮。

进入这个页面后进行仓库创建，这里为了让大家看的更明白一点进行了页面的翻译，如果是英文的页面内容也是一样的。

这里存储库的名称格式需要为

<username>.github.io

，添加README.md文件。其他的描述、是否公开等都可以根据自己的需要进行选择。

这一步很关键，仓库名称一定一定一定是

<username>.github.io

这种格式，否则不会生效。

仓库创建成功后，依次点击Settings→Pages→Visit site，打开访问已发布的网站。

我这里的Source选择的是分支，如果希望从其他的分支构建页面，可以在Branch中进行切换。在

Custom domain

中可以配置自己的域名进行访问。这些都根据个人需要进行配置。

三、配置Github Actions

1、生成Token

要部署 Actions，那么它就需要有能够操作我们仓库的权限，因此需要提前设置个人访问令牌（Github personal access）。

首先点击个人的头像，点击

Settings

进入设置。

往下滑动，找到

Developer settings

依次点击，进行token的创建

这里也是为了大家查看进行了翻译哈，笔记那里就是这个令牌的用途，到期那里就选择

No expiration

，也就是无期限的意思。最后就是选权限，一般来讲这里选

repo

（回购）就够了，但是如果你不确定，那就全都选上也行。然后点击最下方的

Generate Token

，会生成一个令牌。

注意这里它只会出现一次，一旦刷新该网页就不见了，所以最好把它复制到你的备忘录备份一下，而且我们待会也是需要用到这个 Token 的。

2、设置 Secrets

上一步，我们已经生成了一个令牌，现在需要将这个令牌与你创建的Pages仓库进行绑定。

在创建的仓库中，依次点击

Settings

=>

Actions

=>

New repository secret

将上一步生成的token复制进行并保存。

3、设置Actions

进入项目的的

Actions

选项，然后新建一个

workflow

（我是因为已经建立过了，所以才是下面的界面），默认新建的

workflow

名字是

main.yml

这个可以自己自定义，根据你自己喜好来就行了。

进入到这个页面以后往下拉，找的

pages

中的

Static Html

并进行选择。

如果你是其他的模板就选择其他的类型。

这时候会生成一个static.yml的文件，该文件会保存在项目的

.github/workflows

目录下。我把这个文件的名字改成了deploy.yml，你不想改也没事。

不过这个yml文件的内容需要修改，根据我下发提供的代码来哦！！！

4、配置yml文件

为了让大家更好的理解这个yml文件，我先给大家简单讲讲这个yml文件的语法，感兴趣的小伙子可以直接去看官方文档。

Yml文件的关键部分

1. name: - 工作流的名称。
2. on: - 触发工作流的事件，如 push 和 pull_request。
3. jobs: - 工作流中的一系列作业（job）。
4. runs-on: - 指定作业运行的操作系统环境。
5. steps: - 每个作业包含的一系列步骤。

YAML 语法要点

• 缩进：YAML 使用缩进来表示层次关系。通常使用两个空格进行缩进。
• 键值对：使用冒号后跟一个空格来分隔键和值。
• 数组：使用减号 - 来表示数组或列表。
• 映射：使用冒号 : 来表示映射或字典。

特殊关键字

• uses: - 表示使用某个 GitHub Action。
• run: - 表示执行一个命令或一组命令。
• with: - 提供给 Action 的参数。
• if: - 控制步骤是否执行的条件。

关键配置范例详解

name: Example Workflow # 工作流的名称,如果省略，则使用当前文件名run-name: Deploy by @${{ github.actor }}# 从工作流生成的工作流运行的名称，如果省略，则使用提交时的commit信息on:# 触发工作流的事件push:branches:[ main ]# 当推送至 main 分支时触发pull_request:branches:[ main ]# 当创建针对 main 分支的拉取请求时触发jobs:# 定义工作流中的作业build:# 作业的名称runs-on: ubuntu-latest # 指定运行环境# 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。steps:# 作业中的步骤-name: Checkout code # 检出代码uses: actions/checkout@v3 # 一般直接使用别人预先设置好的Actions 如使用actions/checkout@v3-name: Set up Python
        uses: actions/setup-python@v4
        with:python-version:'3.9'# 设置 Python 版本-name: Install dependencies
        run:|
          python -m pip install --upgrade pip
          pip install -r requirements.txt # 安装依赖项-name: Run tests
        run:|
          python test.py # 运行测试脚本-name: Deploy
        if: success() # 如果所有先前的步骤成功，则执行部署run:|
          echo "Deploying to production..." # 部署到生产环境

通过以上内容的了解与学习，大家可以尝试写一下我们部署Github Pages需要的yml，下面我也给出了完整的案例供大家学习参考。

我这里将打包后的文件放到了

FrontPages

分支中，如果没有这个分支的话，大家记得创建一下，然后在Settings中修改一下部署的分支为

FrontPages

。如果不想创建新的分支也行，那就把打包出来的文件放到dist文件夹中，Settings中要指定到这个dist文件夹。

下面请看代码

# 工作流的名称name: Build and deploy 
# 从工作流生成的工作流运行的名称run-name: Deploy by @${{ github.actor }}# 触发工作流的事件on:push:branches:[ main ]# 当 main 分支有新的推送时，此工作流会被启动。workflow_dispatch:# 或者手动触发工作流时，此工作流会被启动。# 当前流程要执行的任务jobs:build:# 这部分指定了作业将在 ubuntu-latest 环境下运行。runs-on: ubuntu-latest
    # 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。steps:-name: checkout # 检出代码-uses: actions/checkout@v2 # 使用 actions/checkout action 检出代码到工作空间。# 这一步安装 Node.js v16。-name: Use Node.js
        uses: actions/setup-node@v1
        with:node-version:'16'# 缓存 npm node_modules-name: Cache dependencies
        uses: actions/cache@v3
        id: npm-cache
        with:path:|
             ~/.npm**/node_moduleskey: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json')}}restore-keys:|
            ${{ runner.os }}-npm-cache-# 安装依赖 npm-name: Install dependencies
        # 如果没有命中缓存才执行 npm installif: steps.npm-cache.outputs['restore-keys'] == ''
        run: npm install
     # 运行构建脚本-name: Run Build Script
        run: npm run build
        
      -name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:# env:# 部署到 FrontPages 分支BRANCH: FrontPages
          # 部署目录为 VuePress 的默认输出目录FOLDER: docs/.vuepress/dist
          # 当前仓库的密钥SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_PRIVATE_KEY }}

yml文件配置好后，确保这个文件的位置是在

.github/workflows/

下。

然后可以点击仓库中的Actions查看进度，如果变成红色的那就是出错了，可以点进去查看错误原因，如果是绿色的话，那就是部署成功的。

等部署完成以后，点击最新的流程结果，可以看到如下内容，然后点击那个链接就可以看到部署的结果啦。

恭喜你，已经完成了人生成就——独立部署一个静态页面。继续加油吧！都看到这里了，麻烦点个赞吧！谢谢支持！！！