如何免費從 0 構(gòu)建快速文檔網(wǎng)站

時間：2023-05-24 11:54:02 | 來源：網(wǎng)站運營

時間：2023-05-24 11:54:02 來源：網(wǎng)站運營

如何免費從 0 構(gòu)建快速文檔網(wǎng)站：背景圖片使用了John Schnobrich 拍的照片

這一篇文章聊一聊如何做一個文檔網(wǎng)站，免費并且加載速度較快，是我在做 http://usetable-ahooks.js.org/ 的一些經(jīng)驗，可以多多交流。

做文檔網(wǎng)站，主要分成四部分來講，分別是

• 選擇文檔構(gòu)建器，我們選擇了 dumi
• 選擇靜態(tài)文件托管服務(wù)器，我們選擇了 surge
• 選擇域名，我們選擇使用了 js.org
• 選擇 CDN，我們選擇用了 http://unpkg.zhimg.com/

文檔構(gòu)建器

dumi 擁有完善的構(gòu)建能力，從開發(fā)階段到打包階段。我們只需要按照它的規(guī)范寫文檔，基本上可以自動完成一個漂亮的本地文檔網(wǎng)站。

dumi 的配置 publicPath 支持我們配置 CDN 路徑，這個方便我們下面把一些靜態(tài)文件換成 CDN 路徑。

靜態(tài)文件托管

surge 使用起來也是比較方便的，第一步你下載 surge 包

npm install surge -g然后在你當(dāng)前目錄執(zhí)行 surge

surge ./dist --domain <your-domain-name>.surge.shdist 是 dumi 默認(rèn)打包生成的文件夾，并且可以自定義 domain 名稱，比如我這邊就叫做 usetable-ahooks.surge.sh ，推上去之后你就會發(fā)現(xiàn)你可以通過 usetable-ahooks.surge.sh 訪問到你的文檔了。

但是這個時候路由還是有問題，當(dāng)你直接訪問你的網(wǎng)站多級目錄的時候就出現(xiàn)找不到對應(yīng)頁面，因為這個時候路由不是你的 js 來控制而是 surge.sh 來控制，而 dumi 默認(rèn)打包之后是一個 SPA，路由只能用本地的 js 來控制。不過這個問題 surge 提出了一個解法，Adding a 200 page for client-side routing。

所以我在構(gòu)建成功之后寫了一個腳本，把 dumi 生成的 index.html copy 一份到 200.html，與 index.html 同一級。代碼也是很簡單，可以看這里。

const fse = require('fs-extra'); fse.copySync('./dist/index.html', './dist/200.html');這個時候路由都是 umi 來控制了。不過你可能想要換個裝逼點的域名，比如 http://xxx.js.org，好像是比 xxx.surge.sh 更有前端味道。

域名

你可以到 js.org Github 倉庫上提 PR，他們處理效率很快，基本上如果符合他們的規(guī)范的話基本上一天就可以搞定。詳情可以參考我之前配置的 usetable-ahooks.js.org PR。

CDN

其實上面已經(jīng)完成了一個免費網(wǎng)站的建立了，但是你會發(fā)現(xiàn)訪問你的網(wǎng)站還是很慢，基本上有時候想要 30 秒才能出來頁面，首屏實在太久了。

分析的原因是打包出來的 umi.js 壓縮之后有 700 K，加載速度太慢，影響了頁面渲染速度。畢竟我們直接把靜態(tài)文件放在 surge 上面了，國內(nèi)訪問速度還是比較慢。

所以轉(zhuǎn)換了另外一個思路，就是 surge 只是托管 html，其它靜態(tài)資源比如 js、css、svg 托管在一些 CDN 平臺上。第一個想到的是 unpkg.com，直接同步 npm 包到 CDN 上，然后搜了一把居然有國內(nèi)鏡像，unpkg.zhimg.com，基本上 700 K 的 js 可以在 400 毫秒內(nèi)返回，這個真的太棒了。

因為 http://unpkg.zhing.com 是直接去同步 npm 包的，所以我把 dist 文件夾里面的內(nèi)容寫了一個腳本同步到 npm，npm 包的版本都是時間戳，這樣子每次推上去都是最新的包，然后結(jié)合剛才說的 dumi 配置 publicPath，把 html 內(nèi)嵌的靜態(tài)文件全部設(shè)置到 CDN 上，具體的代碼可以查看 useTable/scripts 。

最后

最后把剛才要處理的事情寫成一個命令，結(jié)合 package.json 的 script，可以做到一鍵更新文檔。

{ "scripts": { // 以時間戳作為版本，發(fā)布 dist 目錄內(nèi)容到 npm 上 "cdn": "node ./scripts/cdn", // copy index.html 到 200.html，解決路由問題 "surge": "node ./scripts/surge", // 生成時間戳的版本號，這個版本號跟上面發(fā)布 npm 的版本號一致，并且構(gòu)建文檔 "docs:build": "node ./scripts/version && dumi build && npm run cdn && npm run surge", // 發(fā)布到 surge "docs:pub": "surge ./dist --domain usetable-ahooks.js.org; surge ./dist --domain usetable-ahooks.surge.sh", // 入口 "docs:deploy": "npm run docs:build && npm run docs:pub", }}使用的時候就直接 npm run docs:deploy 就行了。據(jù)不完全統(tǒng)計，之前 30 秒的速度，有了國內(nèi) CDN 能力加持之后，速度可以提升到 3 秒以內(nèi)，如果第二次訪問的話，加上 HTTP 一些強緩存之后基本可以在 1 秒內(nèi)打開頁面。

最后是網(wǎng)站長的樣子

更多信息可看

• 官網(wǎng) https://usetable-ahooks.js.org/
• Github https://github.com/ahooksjs/useTable/