本文具体介绍了一起在 Github Pages 和 Vercel 上布置静态页面的流程方法。
本文将不会涉及且基于读者已熟知并树立以下环境：
- 开发环境（Node.js/Git/VSCode…）
- Github 账号
- 科学上网
在 Github 上开发和布置静态页面
创立项目并连接到长途库房
比方，咱们期望“从零开端”创立自己的博客体系，那么无妨从简单的前端项目开端：
$ pnpm create vite <project name> --template vue
# <project name> 为自定义的项目称号，下同
这里，咱们创立了一个 Vite 项目，前端技术栈选用 Vue 。
进入到方才创立的 <project name> 目录下，并初始化本地库房：
$ cd <project name>
$ git init
# 主分支更名（可选）
$ git branch -M main
# 暂存所做的修改
$ git add .
# 提交代码
$ git commit -m 'chore: project initialized'
一个本地的前端项目就创立好了，咱们能够经过 git 在本地管理代码。
接下来，咱们登录 Github 在咱们的账号下创立一个 Repo :
暂且将该 Repo 保持与本地共同的命名。
当创立完成时，咱们能够获得该长途库房的地址：git@github.com:<user or team name>/<project name>.git 。其间，<user or team name> 为创立该 Repo 的用户名或团队称号， <project name> 为该项目称号。
然后，咱们就能够将本地库房与长途库房连接起来，在本地项目路径下执行:
$ git remote add origin git@github.com:<user or team name>/<project name>.git
$ git push -u origin <main branch name>
# <main branch name> 是本地库房中主分支称号，一般更改后为 main ，更改之前默认为 master
至此，咱们就将本地和长途的库房进行了连接，能够便利地经过 git pull 和 git push 拉取和推送代码了。
运用 Github Actions 和 Github Pages 构建和布置静态页面
在项目的长途库房中，创立一个新的分支 gh-pages （也能够是其他姓名）：
这个分支的作用是承载编译后的静态页面文件，因此，该分支不需要同步到本地库房。
接着，来到长途库房的 Settings 页面，点击 Pages 选项卡：
如上图所示，配置无误后可进行后续操作。
到 Github 中的个人 Settings 页面，进入 Personal access tokens ：
生成一个适宜的 access token ，并将它设置到项目库房的 secrets 中，以便利咱们在 actions 中调用，并确保灵敏信息不暴露给其他用户：
长途库房的配置基本完成，让咱们回到本地项目。
在项目文件夹中创立文件 .github/workfolws/pages.yml ，文件内容如下：
name: pages
# 在 main 分支被推送代码时触发 actions
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
# 检出库房代码
- name: Checkout
uses: actions/checkout@v3
# 装置 node.js 环境
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: latest
# 装置 pnpm
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: latest
run_install: false
# 查看和设置 pnpm 缓存
- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- name: Setup pnpm cache
uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
# 装置项目依靠
- name: Install dependencies
run: pnpm install
# 构建项目
- name: Build
run: pnpm build
# 将构建后的文件布置到 gh-pages 分支
- name: Deploy
uses: crazy-max/ghaction-github-pages@v3
with:
target_branch: gh-pages
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
然后，咱们提交代码，并推送代码到长途库房的 main 分支，然后咱们就能够去长途库房的 actions 中查看构建过程：
构建完成后， Github Pages 会将静态文件布置到页面服务器，接着，咱们能够打开链接 <user or team name>.github.io/<project name>/ 进行查看。
在 Vercel 上布置静态页面
Vecel 能够直接用 Github 的账号登录：
在控制台创立一个新项目，假如没有在 Github 中没有装置 Vercel 使用，会弹出如下图所示的弹窗：
点击需要与 Vercel 相关的账号与团队，会进入具体配置页面：
能够挑选绑定一切的库房，也能够挑选绑定部分库房。
装置完成后，就能够 import 对应的库房了：
最终，点击 Deploy 就能够进行布置了：
此时 Vercel 会拉取长途库房的代码并构建，最终布置到 Verccel 的页面服务器上。
Vercel 分配域名的规则是 <project name>[-<random word>].vercel.app 。
当 Github 长途库房的对应分支上有 commit 时，则会触发 Vercel 的构建和布置。
在 Vercel 的项目设置中，能够更改长途库房对应的分支，绑定自有域名和自定义构建指令等操作。
总结
经过 Github Actions 能够将代码构建并布置到 Github Pages 上；一起，也能够经过 Vercel 来布置相同的页面。两者都能够经过向相关的分支 commit 代码来触发构建和布置。
如对该文章涉及到的论题感兴趣，可重视
【开源说】微信公众号
回复【重视】或【作者】
长按二维码加老友，备注【开源说】
