最近发现了非常棒的绘图网站 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