使用GithubActions发布Vue网站到GithubPage
偶然看到一个介绍使用GitHubAction做的百度贴吧自动签到,然后一路顺藤摸瓜看到了阮一峰大神写的GitHub Actions 入门教程中介绍,示例中介绍了把React项目发布到GitHub Pages,我就想能不能把vue的项目发布到GitHub Pages呢(主要是不会React)。 说干就干。
创建vue项目
这个不讲了用vue-cli一个命令就可以了。现在我已经创建了一个ts模板的项目(js项目是一样的),项目名称叫vue-github-actions-demo,结构如下。你们初始化的项目可能有些文件没有,如果是我后面添加发布流程文件我会讲到,如果是vue原生文件的差异不影响发布流程。
创建配置文件
从cli3开始取消了自动创建配置文件,这里需要手动创建配置文件,创建配置文件主要是因为我的githubPage主页,已经有一个网站了(https://dashenxian.github.io),所以我只能用项目地址访问https://dashenxian.github.io/vue-github-actions-demo/,如果这里我不加这个二级目录,vue对js文件的文件引用就有问题。如果你想用你的githubPage主页访问,这一步骤可以跳过,但是需要把项目名称改成你的github用户名称。 在根目录下创建vue.config.js文件,添加如下代码:
//vue.config.js
module.exports = {
// 选项...
publicPath: process.env.NODE_ENV === 'production'
? '/vue-github-actions-demo/'
: '/'
}
创建workflow(工作流程)
在根目录逐级创建.githubworkflows目录,在workflows下创建yml工作流程文件,文件名称可以随意,githubActions会执行全部的yml流程。 输入以下代码:
name: GitHub Actions Build and Deploy Demo
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout ?️
uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Install and Build ? # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: | #注意我这里是使用的yarn管理包,如果你使用的npm,请换成npm的命令:npm install和npm run build
yarn
yarn build
- name: Deploy ?
uses: JamesIves/github-pages-deploy-action@3.6.2
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} #secrets.ACCESS_TOKEN是项目配置的密钥
BRANCH: gh-pages # The branch the action should deploy to.
FOLDER: dist # The folder the action should deploy.
CLEAN: true # Automatically remove deleted files from the deploy branch
推送项目到GitHub
把项目代码推送到github,这里可以用vs打开项目文件夹,vs的团队管理中可以直接推送到github,当然你也可以选择其他方式,比如vscode或者命令。
配置项目密钥
现在你的项目已经推送到github,在GitHub中定位到项目
- 找到Settings配置,按下图步骤添加密钥,如果你还没有密钥,按第二步生成密钥后再添加。
- 没有密钥按下图步骤生成密钥
配置GitHubPage
仍然在项目的Settings配置页面,找到GitHub Pages选项(在页面靠近最底部),按下图配置。
完成
现在你修改代码并推送到项目仓库,点击项目的Actions应该就能看到自动生成正在运行了。 等到运行完成通过,在GitHubPage就能看到熟悉的vue启动页面。
参考资料
- nginx反向代理https网站 并实现网站的注册和登录功能
- 通过nginx GeoIP模块 限制某些国家地区访问网站
- CDN加速下通过nginx获取网站访客真实ip
- linux centos7服务器使用密钥登录ssh同时禁止root密码登录
- linux nginx服务器安装verynginx防止CC攻击
- linux nginx安装HttpGuard防止CC攻击
- wordpress您的主机禁用了mail()函数 SMTP邮件通知解决方法
- 我的编程之路:知识管理与知识体系
- UTF-8 为什么会比 UTF-16 浪费?
- 码农也要学算法
- 19 个常用的 JavaScript 简写方法
- 从零开始写 PHP 扩展
- Linux 基础:文件查找 find
- 区块链入门教程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法