引言

Vercel 是一个静态网站托管项目,而且有很多东西自动化完成,反正就是非常的方便和省事,我的港美股平台推荐网页就是使用 Vercel 托管的,访问速度很快吧。

Vercel 托管 GitHub 个人项目是免费的,不管私有还是开源,这还是比较良心的,但是组织项目是收费的,需要在 Vercel 创建 Team 才能使用,但是吧价格太贵了,对于目前没有收入的我来说有点承受不起,于是就找到了一种方式可以免费托管 GitHub 组织项目代码的方式。

操作步骤

本地环境搭建

本地先有 Nodejs 环境,然后执行下面代码安装 Vercel

1
npm i -g vercel

搭建项目

然后就开始本地搭建项目了,不管你是博客还是文档都可以,支持的 template 有很多。

比方说我想搭建一个文档,我就找到了官方的文档示例项目代码,下载了一份直接就可以用了。

创建 Velcel 项目

在网页上我们只能通过导入 GitHub 项目的方式创建 Velcel 项目,免费版不能在线使用 GitHub 组织的代码,所以我们要使用命令行创建。

在上一步准备好的项目根目录执行 vercel 命令,然后按照提示一路操作就可以了,选项我都是选默认的,这个要按照项目情况选。

然后使用 cat 命令获取 orgIdprojectId 的值

1
cat .vercel/project.json

添加 GitHub Actions

在当前项目添加 Github Action 部署文件 .github/workflows/deploy.yml,实现自动化部署,代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
name: deploy website preview
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: amondnet/vercel-action@v20
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod' #Optional
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID_STATIC }}
      - name: preview-url
        run: |
          echo ${{ steps.vercel-action.outputs.preview-url }}

根据你的需求需要适当的修改。

添加 GitHub Actions secrets

给 GitHub Actions 添加环境变量,在 GitHub 项目的设置里面找到相应的位置创建,我们只需要创建三个值:

  • VERCEL_ORG_ID:前面获取到的 orgId
  • VERCEL_PROJECT_ID_STATIC:前面获取到的 projectId
  • VERCEL_TOKEN:在 Velcel 手动创建 token

然后每次 push 代码,Velcel 就会自动部署了。

最后

这几步虽然操作起来不算麻烦,但是也费时间,有能力的朋友尽量还是购买 Vercel Pro 吧。

最后感谢 Vercelamondnet/vercel-action 提供的服务。