跳到主要内容

多平台发布

有的时候,出于好奇与对未知的渴求,我们很希望能将一个Docusaurus站点实例在多个静态网站发布平台同时发布,例如同时发布在Github Pages和Netlify上

本文将实现如下目标:

  • 只建立一个代码仓库
  • 同时在两个平台发布站点
  • 不引入任何外部插件和代码支持
  • 本实践适用大部分静态网站生成器

使用环境变量在多平台进行发布​

任何的静态网站生成器都有一项很重要配置,即baseUrl,baseUrl决定了网站的路由结构,由于不同的静态网站发布平台提供的域名不同,因此只需针对不同发布平台,动态传入baseUrl并构建对应的部署即可

多平台发布实践​

考虑到目前大多数静态网站生成器都支持环境变量,因此我决定使用环境变量动态传入baseUrl并在docusaurus.config.js文件中使用该变量

docusaurus.config.js
baseUrl:process.env.BASE_URL || '/'

在GitHub Page中引入环境变量​

Github Pages支持两种引入环境变量的方式:

  • 设置：在repo的设置界面中可以设置运行Workflow时所用的环境中的环境变量和密钥
  • 定义：在Workflow文件中可以定义指定环节使用的环境变量

两者的的区别在于当仓库开源时,如果将调用API所使用的密钥直接放到工作流文件中,则有泄露的风险,而设置中的Secret只有自己能看到

我们选择在工作流文件中定义环境变量:

Deploy.yml
jobs:
  build:
    name: 构建 Docusaurus
    runs-on: ubuntu-latest
    env:
      BASE_URL: '/ProjectName/'

在Netlify中引入环境变量​

在Site configuration -> Environment variables中可以设置环境变量

这里需要将路径两端的引号去掉,因为Netlify会自动在两端加入引号

注意

环境变量的更新不会立刻起效,需要在Deploy时选择Clear cache and deploy site