保航 發表於 2021-5-25 12:41:00

使用 github/gitee 静态网页服务部署 excalidraw

<p>最近发现了非常棒的绘图网站 Excalidraw,但是官网 https://excalidraw.com 被墙了。</p>
<p>然后我想自己部署它,奈何自己没有服务器。不过 excalidraw 是 react 项目,可以通过静态网页服务(github pages 或 gitee pages)部署。</p>
<h2 id="需要的工具">需要的工具</h2>
<ul>
<li>npm 以及 nodejs(版本 <span class="math inline">\(\ge 14.0.0\)</span>)</li>
<li>yarn</li>
</ul>
<h2 id="本地">本地</h2>
<p>首先到 excalidraw 的 github 仓库 https://github.com/excalidraw/excalidraw (gitee 有镜像 https://gitee.com/mirrors/Excalidraw ),克隆到本地。</p>
<pre><code class="language-plain">$ git clone https://gitee.com/mirrors/Excalidraw.git
</code></pre>
<p>然后到文件夹里,下载依赖。</p>
<pre><code class="language-plain">$ cd Excalidraw
$ npm install
</code></pre>
<p>本地部署。</p>
<pre><code class="language-plain">$ npm start
</code></pre>
<p>这时候到浏览器访问 localhost:3000 如果能加载成功就好了。</p>
<h2 id="部署到-github--gitee">部署到 github / gitee</h2>
<p>因为最近 gitee pages 整改,不能使用,我以 github 为例。</p>
<p>首先你需要一个新的账户,或者 <code>*.github.io</code> 还没有用的账户。(因为 excalidraw 里面有很多地方直接调用 <code>/</code>,如果是 <code>*.github.io/仓库名/</code> 的域名会出锅。)</p>
<p>新建仓库,名字为 <code>账户名.github.io</code>。</p>
<p>解下来我参考了 将react项目部署到Github pages</p>
<p>安装 gh-pages 插件。</p>
<pre><code class="language-plain">$ npm install gh-pages --save
</code></pre>
<p>修改 package.json 里的三个地方:</p>
<pre><code class="language-plain">"private": true,
"homepage": "./",
"scripts": {
   ...
   deploy": "gh-pages -d build"
}
</code></pre>
<p>git 添加 github 仓库链接,最后</p>
<pre><code class="language-plain">$ npm run build
$ npm run deploy
</code></pre>
<h2 id="成果">成果</h2>
<p>我部署的</p><br><br>
来源:https://www.cnblogs.com/renamoe/p/14806372.html
頁: [1]
查看完整版本: 使用 github/gitee 静态网页服务部署 excalidraw