之前写过一篇文章介绍如何把单页应用部署到 AWS S3,但毕竟 S3 是中心化的,不够具有区块链精神,而且需要付费。最近发现一个更好用的工具,使用去中心化的IPFS作为存储,更重要的是免费的。这个就是 Protocol Labs 推出的Web3.Storage

创建 API token

Web3.Storage 使用 API 来管理文件,所以首先要创建一个 API token。注册登录之后点按钮创建就好,记下生成的 API token。

在仓库中添加 Action

然后在 GitHub 的 Action 里创建一个 workflow,文件内容像下面这样写,其中 API token 以变量形式写入。

name: deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: setup node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: cache
        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

      - name: install pacakges
        run: yarn

      - name: build
        run: yarn build

      - name: upload artifact
        uses: actions/upload-artifact@v2
        with:
          name: static
          path: build/

  deploy-web3:
    environment: main
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: download artifact
        uses: actions/download-artifact@v2
        with:
          name: static
          path: build
      - name: upload to web3
        uses: web3-storage/add-to-web3@v1.0.0
        with:
          path_to_add: build
          web3_token: ${{ secrets.WEB3_KEY }}
          web3_api: https://api.web3.storage
          wrap_with_directory: false

配置 API token

最后 GitHub 仓库的设置里找到 Secrets,把前面记录的 API token 添加进去,name 与在上一步的变量保持一致,前面例子中是WEB3_KEY

提交代码

提交代码到 main 分支,就会自动部署到 Web3.Storage 了。workflow 的日志里可以看到部署成功后的 url。

注意每次部署之后的 url 都是不一样的,需要用最新的 url 访问。这一点略有不便,希望可以加上绑定域名的功能吧。