GitHub Actions 是 GitHub 的持续集成服务。
Netlify 是静态网站自动部署平台，是目前比较简单的自动化部署方案。
部署静态网站到 Netlify 上有两种方法。
-
第一种是不用 GitHub actions，直接使用 netlify 连接到我们的GitHub仓库，netlify 会自动为我们设置好 CI/CD pipeline，只要我们 push 到相应的 branch 上，netlify 就会自动完成部署。我们也可以在 site setting 里对部署进行更多的设置。
-
第二种是不直接连接 Github repo 到 Netlify，用 GitHub Actions 设置CI/CD workflow。
为什么用 Github Actions
首先，Netlify 的免费额度一个月只有300分钟 build time，如果我们有多个部署环境，经常部署的话，这点时间可能不够用。如果使用 GitHub Actions，会有2000分钟的build time。其次，如果不使用 GitHub Actions，我们对 build process 没有什么选择，只能使用 Netlify 自带的设置，灵活性比较低。
使用 GitHub Actions 部署到 Netlify
（这里的 React App 是我使用 create-react-app --use-npm 创建的全新的 React App）
主要有3步：
- 创建 Netlify site
- 获取
NETLIFY_AUTH_TOKEN和NETLIFY_SITE_ID - 设置 GitHub Actions
第一步
首先，登陆 Netlify。
new site from Git，我们要自己 setup CI/CD，不想让 Netlify 直接连接到GitHub，所以要先拖拽一个空文件夹到虚线框里面，创建一个啊 disconnected Netlify Site，之后我们会通过 Github actions 上传我们的 build 到 Netlify。
完成上传后，我么看到 Netlify Site 页面。
第二步
接下来，需要获取两个 secret，为之后需要用到的 Netlify CLI actions 提供身份验证。
第一个是 NETLIFY_AUTH_TOKEN，在 Netlify 页面右上角点击 User settings -> Applications -> Personal access tokens 中点击 New access token，创建之后先不要关闭这个页面，等下要复制粘贴。
第二个是 NETLIFY_SITE_ID，在 Neilify Site 的 Setting 中，Site Information 下面有一个 API ID 就是我们的 NETLIFY_SITE_ID。
然后在 GitHub Repo 的 设置中添加这两个 secrets。
第三步
最后，在 GitHub Repo 中选择 Actions，然后点击 Set up a workflow yourself。
在编辑器中粘贴下面的简易workflow。
name: Production workflow
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v1
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
- run: npm install
- run: npm run build --if-present
- name: Deploy to netlify
uses: netlify/actions/cli@master
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
with:
args: deploy --dir=build --prod
secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'
这里我们使用了 netlify 官方的 cli actions：netlify/actions/cli@master
然后点击右上角 start commit。
回到 Netlify Site 页面，点击链接就可以看到我们的网站了！
