使用 github/gitee 靜態網頁服務部署 excalidraw

最近發現了非常棒的繪圖網站 Excalidraw，但是官網 https://excalidraw.com 被牆了。

然后我想自己部署它，奈何自己沒有服務器。不過 excalidraw 是 react 項目，可以通過靜態網頁服務（github pages 或 gitee pages）部署。

需要的工具

• npm 以及 nodejs（版本 \(\ge 14.0.0\)）
• yarn

本地

首先到 excalidraw 的 github 倉庫 https://github.com/excalidraw/excalidraw （gitee 有鏡像 https://gitee.com/mirrors/Excalidraw ），克隆到本地。

$ git clone https://gitee.com/mirrors/Excalidraw.git

然后到文件夾里，下載依賴。

$ cd Excalidraw
$ npm install

本地部署。

$ npm start

這時候到瀏覽器訪問 localhost:3000 如果能加載成功就好了。

部署到 github / gitee

因為最近 gitee pages 整改，不能使用，我以 github 為例。

首先你需要一個新的賬戶，或者 *.github.io 還沒有用的賬戶。（因為 excalidraw 里面有很多地方直接調用 /，如果是 *.github.io/倉庫名/ 的域名會出鍋。）

新建倉庫，名字為 賬戶名.github.io。

解下來我參考了 將react項目部署到Github pages

安裝 gh-pages 插件。

$ npm install gh-pages --save

修改 package.json 里的三個地方：

  "private": true,
  "homepage": "./",  
  "scripts": {
     ...
     deploy": "gh-pages -d build"
  }

git 添加 github 倉庫鏈接，最后

$ npm run build
$ npm run deploy

成果

我部署的