自動(dòng)開了這個(gè)號(hào)以后，陸陸續(xù)續(xù)寫了很多干貨文章，一方面是可以幫助自己梳理思路，另一方面也方便日后查找相關(guān)內(nèi)容。

但是，我想檢索某個(gè)關(guān)鍵詞是在之前哪篇文章寫過的，就有點(diǎn)捉急了。CSDN 還好，可以檢索到相關(guān)標(biāo)題，知乎的檢索就太差了，連標(biāo)題都無法精準(zhǔn)。

于是，一個(gè)需求出現(xiàn)了：把之前所有寫過的文章扒下來，做成一個(gè)自己的知識(shí)庫？然后，發(fā)布出去，方便自己，也共享他人。

如何實(shí)現(xiàn)？經(jīng)過一番調(diào)研，最終確定了如下方案：

• 本地搭建：Typro + PicGo + 圖床；
• 部署上線：Docsify + GitHub Pages 等托管平臺(tái)。

本次分享將記錄整個(gè)實(shí)現(xiàn)過程，以及踩過的坑，文章略長，全程干貨，希望給有類似需求的小伙伴一點(diǎn)幫助。

1. 本地知識(shí)庫搭建

由于平時(shí)的文章都是用在線的 Markdown 工具編寫，本地 Markdown 編輯器自然首推 Typora。

1.1 Typora 安裝和使用

首先，前往官網(wǎng)上找到對應(yīng)你系統(tǒng)的版本: typora官方中文站。

Typora 的界面簡潔明了，你可以專注于你的文本而不是復(fù)雜的排版，相信你編寫 Markdown 文本一定非常愉快。

關(guān)于 MarkDown 中的圖片，一般都是 ![](https://url.url)，我們需要首先保存到本地，為此可以先在 Typora 中進(jìn)行一番設(shè)置：依次點(diǎn)擊 文件 -> 偏好設(shè)置 -> 圖像，選擇 復(fù)制圖片到./assets文件夾，就可以自動(dòng)將圖片保存到當(dāng)前文件夾下的 ./assets 目錄下。

右上角支持知識(shí)庫檢索，實(shí)時(shí)渲染生成文章目錄大綱：

如果你只是需要一個(gè)本地知識(shí)庫，Typora 就完全可以滿足所需，下面的內(nèi)容可以不用看啦。

---

但是，如果你還想把知識(shí)庫部署上線，接下來就會(huì)遇到一個(gè)問題：圖片安放在哪？

1.2 圖床選擇和使用

互聯(lián)網(wǎng)上的圖片一般都會(huì)存放在專屬服務(wù)器上，尤其是當(dāng)你的圖片數(shù)量規(guī)模變大以后，你在網(wǎng)頁上看到的任何一張圖片，背后其實(shí)就是一條 url。

圖床 就是專門用來存放圖片的，不過目前市面上可以選擇的 圖床 可太多了，到底該選擇哪一個(gè)呢？

網(wǎng)上看了很多小伙伴的解決方案，下面我將先介紹下實(shí)測用過的一些圖床，以及踩過的坑，最后給出我最終的選擇：

• Gitee 圖床：個(gè)人倉庫最大支持 500M，現(xiàn)在不可以使用了，因?yàn)?Gitee 的圖片開啟了防盜鏈，無法在你的網(wǎng)頁中加載進(jìn)來。
• GitHub 圖床：除了國內(nèi)訪問速度是個(gè)問題外，非常完美，而且個(gè)人倉庫最大支持 1G 容量。訪問慢的問題可以通過鏡像的方式解決。但后面遇到的一個(gè)問題是：PicGo 上自動(dòng)上傳時(shí)，如果是同名文件就會(huì)上傳失敗，難以實(shí)現(xiàn)自動(dòng)化。這個(gè)問題的解決方案是：在 PicGo 中設(shè)置上傳時(shí)自動(dòng)以時(shí)間戳命名，不過這樣會(huì)產(chǎn)生大量重復(fù)圖片，1G 空間怕是很快就爆了。
• 七牛云等云存儲(chǔ)平臺(tái)：七牛云雖然有 10G 免費(fèi)空間，但需要有在國內(nèi)備案的域名，必須要買域名+服務(wù)器，否則一個(gè)月之后就無法使用它的測試域名。
• 個(gè)人開發(fā)者的圖床：都有一些限制，沒找到合適的😂
  • https://tu.my/：可以手動(dòng)上傳，單次上傳不超過100張。
  • https://imgchr.com/：每小時(shí)限制 8 張。
• 國內(nèi)云廠商的對象存儲(chǔ)：阿里云/騰訊云等免費(fèi)試用后需要付費(fèi)；
• 國外云廠商的對象存儲(chǔ)：
  • Google 云的對象存儲(chǔ)：免費(fèi)空間 5 G，每月 1G 的出站流量；
  • Oracle 云的對象存儲(chǔ)：免費(fèi)空間 20 G，每月限制 50000次 API 調(diào)用，需要把桶設(shè)置為公共的，才可以訪問；而且同名文件會(huì)自動(dòng)替換，上傳速度很快；訪問速度也還可以，部分有延時(shí)。
  • Cloudflare R2對象存儲(chǔ)：免費(fèi)空間 10 G，上傳等 A 類操作每月100萬次，下載等 B 類操作每月1000萬次，需要綁定一張外幣信用卡。

對比來看，還是 Oracle 云的對象存儲(chǔ)免費(fèi)空間更大，而 Cloudflare R2 的調(diào)用次數(shù)更加慷慨，最終先選擇了 Oracle 云的對象存儲(chǔ)作為我的圖床。

當(dāng)然，在正式使用之前，你還需要驗(yàn)證下選擇的圖床得到的 url 是否開啟了防盜鏈。

怎么驗(yàn)證？

給大家分享一個(gè)最簡單的方式：如下圖所示，隨便找一個(gè)在線的 markdown 編輯器，然后按照圖片格式輸入，看看能否在右側(cè)渲染出來：

選擇好圖床后，最好是配合 PicGo 來使用，接下來我們一起看下這款 Typora 排版工具的完美搭檔。

1.3 PicGo 安裝和使用

PicGo 是一個(gè)開源的圖床工具，加上插件，可以完美適配各種圖床。大家可以前往官方倉庫的 Releases 中下載：https://github.com/Molunerfinn/PicGo/releases。

界面非常簡單，你只需要根據(jù)你選擇的圖床進(jìn)行適配就可以了，下面介紹幾個(gè)常見圖床的使用：

1.3.1 GitHub 圖床

首先，需要在你的 GitHub 上新建一個(gè)倉庫，分支名在 GitHub 上新建倉庫時(shí)默認(rèn)為 main，必要時(shí)調(diào)整為你新建的分支名。

下面的 設(shè)定 Token 在哪獲取？

在你的 GitHub 主頁依次選擇【Settings】-最下方的【Developer settings】-【Personal access tokens】-【Generate new token】，填好名稱，過期時(shí)間最長可以選擇一年，然后點(diǎn)擊【Generate token】生成一個(gè) Token。

Token 只會(huì)顯示一次，先保存下來，再配置到 PicGo 中。

最后的設(shè)置自定義域名，其作用是加速 GitHub 圖片的訪問，在圖片上傳后，PicGo 會(huì)按照(自定義域名+儲(chǔ)存路徑+圖片名)的方式生成訪問鏈接，返回給你。

我們來總結(jié)下上面幾個(gè)字段的填法：

• 設(shè)定倉庫名：按照 用戶名/項(xiàng)目名 的格式填寫
• 設(shè)定分支名：main or master
• 設(shè)定Token：粘貼上面生成的 Token
• 指定存儲(chǔ)路徑：想要儲(chǔ)存的路徑，如 imgs，會(huì)在你項(xiàng)目下創(chuàng)建一個(gè)名為 imgs 的文件夾，圖片將會(huì)儲(chǔ)存在此文件夾中。
• 設(shè)定自定義域名：有兩種方式可以實(shí)現(xiàn)加速。
  • 使用 jsDelivr 加速：設(shè)置為 https://cdn.jsdelivr.net/gh/用戶名/項(xiàng)目名，上傳完畢后，通過 https://cdn.jsdelivr.net/gh/用戶名/項(xiàng)目名/圖片名 訪問上傳的圖片。
  • 使用鏡像加速：設(shè)置為 https://mirror.ghproxy.com/https://raw.githubusercontent.com/用戶名/項(xiàng)目名/master/。

1.3.1 Gitee 圖床（不推薦）

PicGo 本身不支持 Gitee 圖床，因此需要在 PicGo 中安裝插件。搜索框中搜一下 gitee，然后任選一個(gè)即可。

**要注意的是：**插件安裝需要依賴 node.js 環(huán)境，這個(gè)需要前往 node.js 官網(wǎng)，下載對應(yīng)操作系統(tǒng)的進(jìn)行安裝。Windows 的比較簡單，下載完成之后雙擊安裝包，即可進(jìn)行安裝。安裝完成之后，打開 cmd 輸入 node -v 驗(yàn)證一下，輸出版本號(hào)就是安裝成功。

安裝完成后，在圖床設(shè)置中就可以看到 gitee 的選項(xiàng)，配置和上面的 GitHub 圖床類似，不再贅述了。

不過，因?yàn)?Gitee 的圖片開啟了防盜鏈，所以 Gitee 圖床還是放棄使用吧。

1.3.3 自定義圖床

如果你的圖床不在 PicGo 官方支持之列，那么就需要安裝另外一個(gè)插件。

什么插件？

插件設(shè)置那里搜索 web-uploader 進(jìn)行安裝即可，安裝完成后，在圖床設(shè)置中就可以看到 自定義Web圖床 的選項(xiàng)，根據(jù)你圖床提供的 API 進(jìn)行填寫即可。

1.3.4 圖床測試

最后，設(shè)定好之后，來到上傳區(qū)，選擇你的圖床，上傳一張圖片，測試一下是否能上傳成功。

1.3.5 PicGo 集成到 Typora

PicGo 的圖床準(zhǔn)備好之后，我們需要在 Typora 中進(jìn)行一番設(shè)置：依次點(diǎn)擊 文件 -> 偏好設(shè)置 -> 圖像，找到最下面的 上傳服務(wù)，選擇 PicGo(app)，路徑選擇你的安裝地址，最后點(diǎn)擊驗(yàn)證圖片上傳選項(xiàng)，驗(yàn)證一下能否上傳正常。

如果上傳失敗了怎么辦？

PicGo 的上傳日志一般保存在：C:\Users\12243\AppData\Roaming\picgo\picgo.log，可以前往查看具體的報(bào)錯(cuò)信息。

然后，我們到上面的 插入圖片時(shí)...，選擇 上傳圖片，這樣你每次在文檔中插入圖片，它會(huì)自動(dòng)給上傳到圖床，然后返回一個(gè) url 插入到文檔中，非常方便。

當(dāng)然，也可以在你的文檔中，依次選擇 格式 -> 圖像 -> 上傳所有本地圖片，就會(huì)把文檔中所有圖片一鍵上傳到圖床。

至此，你的本地知識(shí)庫基本就搭建完成了，后續(xù)往里增加內(nèi)容將會(huì)變得 so easy~

2. 在線知識(shí)庫部署

如何把本地的知識(shí)庫部署上線，和你的小伙伴分享？

前幾天，我們一起盤點(diǎn)了：小白搭建靜態(tài)網(wǎng)站，都有哪些建站工具？

今天這個(gè)需求不就用上了。

那么多建站工具，我該選哪個(gè)呢？

對于知識(shí)庫這樣一個(gè)簡單需求，當(dāng)然首選 docsify。為啥?

和 GitBook 以及 Hexo 等建站工具不同的是，它會(huì)智能地加載和解析 Markdown 文件，而無需生成 html 文件，所有轉(zhuǎn)換工作都在運(yùn)行時(shí)。此外，我認(rèn)為 Docsify 最大的優(yōu)點(diǎn)有以下幾個(gè)方面：

• 無需安裝任何依賴，無需編譯，完全運(yùn)行時(shí)驅(qū)動(dòng)。
• 界面清新，看著就很爽，多個(gè)主題可供選擇
• 插件生態(tài)豐富

2.1 docsify 安裝和使用

官方文檔：https://docsify.js.org/#/zh-cn/

2.1.1 docsify 安裝

docsify 安裝需要依賴 node.js，相信你在上一步按照 PicGo 插件時(shí)已經(jīng)裝好了 node.js。

準(zhǔn)備好 node.js 環(huán)境后，在終端中采用 npm 一鍵安裝：

npm install -g docsify-cli

上述指令中，-g 代表全局安裝，因?yàn)槲覀冃枰玫?docsify 的場景還挺多，所以就選擇全局安裝了。

怎么知道這個(gè)全局安裝的包放在哪了？

npm root -g

這會(huì)返回全局安裝目錄的路徑。默認(rèn)情況下會(huì)放在你的 C 盤：C:\Users\<YourUsername>\AppData\Roaming\npm。

如果不想你的 C 盤很快爆滿的話，最好給它挪個(gè)位置~

這時(shí)，你可以修改 npm 的全局安裝位置。首先新建一個(gè)目錄，然后在終端中配置 npm 使用新的目錄：

npm config set prefix D:\npm-global

可以看到文件夾下多了一個(gè) node_moudules，可執(zhí)行文件也在當(dāng)前目錄下：

為了系統(tǒng)自動(dòng)識(shí)別到 docsify 命令，你還需要添加新的路徑到系統(tǒng)環(huán)境變量中。具體步驟如下：

• 右鍵點(diǎn)擊“此電腦”或“計(jì)算機(jī)”，選擇“屬性”。
• 點(diǎn)擊“高級系統(tǒng)設(shè)置”。
• 在“系統(tǒng)屬性”窗口中，點(diǎn)擊“環(huán)境變量”。
• 在“系統(tǒng)變量”中找到 Path，然后點(diǎn)擊“編輯”。
• 添加新的路徑 D:\npm-global。

對于新手小白來說，還會(huì)遇到一個(gè)問題：npm 下載太慢啦~

這是因?yàn)?npm 默認(rèn)從國外的 https:/registry.npmjs.org/ 服務(wù)器進(jìn)行下載，不信你試試看下面這個(gè)指令：

// 查看當(dāng)前下載地址
npm config get registry

所以你需要給它換個(gè)國內(nèi)的鏡像。

// 設(shè)置淘寶鏡像的地址
npm config set registry https://registry.npmmirror.com/

再次安裝 docsify，有沒有快到飛起？

2.1.2 docsify 啟動(dòng)

docsify 安裝好之后，啟動(dòng)知識(shí)庫只需要一個(gè)命令（在你的當(dāng)前知識(shí)庫文件夾下執(zhí)行）：

docify init 

如果文件夾下已經(jīng)有文件，也沒關(guān)系，選擇 yes，會(huì)初始化3個(gè)文件，其中 index.html 就是最終渲染的初始網(wǎng)頁：

接下來，還是一鍵命令完成部署：

docsify serve# 輸出如下
Serving D:\data\projects\knowledgebase now.
Listening at http://localhost:3000

打開上述鏈接，你會(huì)看下如下頁面：

這些文字內(nèi)容是哪來的呢？

還記得剛才生成的三個(gè)文件中的 README.md，打開看看吧。

所以，你只需要編輯這個(gè) README.md，就可以實(shí)現(xiàn)你的內(nèi)容展示了。

你不需要?dú)⒌?serve 指令，docisfy 支持修改 README.md 時(shí)，網(wǎng)頁端實(shí)時(shí)更新。

接下來我們來說說這個(gè) index.html 中的一些具體設(shè)置，將你的網(wǎng)頁打造的更加酷炫、高級一些。

2.1.3 docsify 基礎(chǔ)操作

網(wǎng)站主題修改:

在 index.html 中：

<!--這個(gè)鏈接就是主題的選擇-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">

官網(wǎng)支持的主題在：https://cdn.jsdelivr.net/npm/docsify@4/lib/themes/，都去試試吧，看看自己更喜歡哪個(gè)~

封面設(shè)置:

只需在 window.$docsify 中加入一行:

window.$docsify = {coverpage: true,}

然后，創(chuàng)建一個(gè) _coverpage.md 文件，編寫 markdown 內(nèi)容并保存：

![logo](media/logo_thumbnail.png)
# 猴哥的AI知識(shí)庫 <small>2024</small>> 用心做內(nèi)容，不辜負(fù)每一份關(guān)注。適合人群：- AI 愛好者
- AI 小白[GitHub](https://github.com/hougeai/knowledgebase)
[Get Started](README.md)

頂部導(dǎo)航欄設(shè)置:

只需在 window.$docsify 中加入:

window.$docsify = {repo: 'https://github.com/hougeai/knowledgebase', // 倉庫鏈接，會(huì)顯示在右上角GitHub圖標(biāo)loadNavbar: true,}

docsify 會(huì)默認(rèn)加載 _navbar.md，所以需要新建一個(gè) _navbar.md，然后填入你想要在導(dǎo)航欄要展示的內(nèi)容：

- [1.Linux筆記](docs/1.Linux筆記/README.md)
- [2.玩轉(zhuǎn)云服務(wù)](docs/2.玩轉(zhuǎn)云服務(wù)/README.md)
- [3.AI筆記](docs/3.AI筆記/README.md)
- [4.Python筆記](docs/4.Python筆記/README.md)
- [5.效率工具](docs/5.效率工具/README.md)
- [6.少兒編程](docs/6.少兒編程/README.md)

這樣你在網(wǎng)站上就會(huì)看到：

側(cè)邊欄設(shè)置:

只需在 window.$docsify 中加入一行:

window.$docsify = {loadSidebar: true}

然后，創(chuàng)建一個(gè) _sidebar.md 文件，編寫你想要展現(xiàn)的目錄內(nèi)容并保存。

2.1.4 docsify 插件配置

docsify 的生態(tài)非常豐富，開發(fā)者搞了很多插件，為你的知識(shí)庫插上三頭六臂，變得更為智能，而這些插件就是一個(gè)個(gè) javascript 腳本，你只需要在 index.html 中插入即可。

這里給大家推薦幾個(gè)最常用到的。

1. 搜索插件

隨著文章的增多，搜索功能就顯得尤其必要，你只需要在 index.html 的如下位置填入：

window.$docsify = {search: {paths: 'auto',placeholder: 'Type to search',noData: '找不到結(jié)果',depth: 3,},}

然后在最下方引入插件腳本：

<!-- 搜索插件 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

此時(shí)，在你的網(wǎng)站左上角就可以看到搜索欄：

2. 右側(cè)目錄插件

我的文章很多偏實(shí)操，所以內(nèi)容比較長，如果能夠在右側(cè)顯示文章目錄，支持滾動(dòng)高亮，點(diǎn)擊跳轉(zhuǎn)等，顯然更符合當(dāng)下流行的文檔網(wǎng)站布局，類似下面這樣。

這時(shí)你只需要一個(gè)插件，叫 toc (Table of Content)。不過社區(qū)中有兩種實(shí)現(xiàn)：

<script src="https://cdn.jsdelivr.net/npm/docsify-plugin-toc@1.3.1/dist/docsify-plugin-toc.min.js"></script>
<!-- <script src="https://unpkg.com/docsify-toc@1.0.0/dist/toc.js"></script> -->

一開始我是采用的第二行的插件，后來發(fā)現(xiàn)它和 sidebar(也就是左側(cè)目錄) 會(huì)出現(xiàn)沖突，看了下報(bào)錯(cuò)應(yīng)該是插件內(nèi)部的 bug。所以又找到了第一行的插件，再配置下 window.$docsify，完美實(shí)現(xiàn)上圖中的效果！

window.$docsify = {toc: {tocMaxLevel: 5,target: 'h1, h2, h3, h4, h5, h6',ignoreHeaders: ['<!-- {docsify-ignore} -->', '<!-- {docsify-ignore-all} -->']},}

3. 代碼復(fù)制和高亮插件

技術(shù)文章很多都有代碼，為了實(shí)現(xiàn)代碼一鍵復(fù)制和高亮，類似如下效果：

你只需要插入如下插件：

<!-- 代碼復(fù)制 -->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<!-- 代碼高亮 --> 
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-shell-session.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-http.min.js"></script>

2.2 遠(yuǎn)程倉庫建立

本地測試沒什么問題后，接下來我們就需要把它托送到云端了。

因?yàn)橹R(shí)庫一定是會(huì)不斷更新的，所以最好用 git 來維護(hù)一個(gè)遠(yuǎn)程倉庫。

2.2.1 本地 git 初始化

這里值得注意的是，如果你在本地存了很多圖片，最好不要把他們推送上去。

拿我的來舉例：項(xiàng)目中每個(gè)子文件夾都有存放圖片的 assets 文件夾，現(xiàn)在需要
要在 .gitignore 中忽略所有子文件夾中的 assets 文件夾，可以項(xiàng)目根目錄下創(chuàng)建 .gitignore ，然后填入以下規(guī)則：

**/assets/

• **/ 表示匹配任意層級的目錄。
• assets/ 確保只忽略名為 assets 的文件夾。

這樣，所有子文件夾中的 assets 文件夾都會(huì)被 Git 忽略。

然后一鍵三連，完成項(xiàng)目初始化：

git init
git add .
git commit -m 'first commit'

這樣本地倉庫就建好了，接下來你需要的是一個(gè)遠(yuǎn)程倉庫。

2.2.2 關(guān)聯(lián)遠(yuǎn)程倉庫

這里我們選擇在 GitHub 上新建遠(yuǎn)程倉庫，因?yàn)楦鞔缶W(wǎng)頁部署平臺(tái)對 GitHub 的支持最為友好。

注意：上面的 Private 要改為 Public，需要是公開倉庫才可以部署到 GitHub Pages。

接下來，在本地終端中進(jìn)行賬戶設(shè)置，填入你的 GitHub 的注冊名稱和郵箱：

# git 全局設(shè)置
git config --global user.name "your_user_name"
git config --global user.email "xxx@xx.com"
# 如果只需要設(shè)置當(dāng)前項(xiàng)目
git config user.name "your_user_name"
git config user.email "xxx@xx.com"

將本地倉庫推送到遠(yuǎn)程倉庫：

git remote add origin https://github.com/xxx/xxx.git
git push -u origin "master"

上面的 origin 是你在本地給遠(yuǎn)程倉庫取的名字，一般用不到它。如果將來需要?jiǎng)h除和它的關(guān)聯(lián)，才會(huì)用到它：

git remote -v
git remote remove origin

2.3 部署工具選擇

GitHub 遠(yuǎn)程倉庫有了之后，我們就要選擇一個(gè)工具將網(wǎng)站部署上線。都有哪些選擇呢？

• 公有云主機(jī) / VPS：買域名，買服務(wù)器，需要一筆不菲的開銷；
• Github/Gitee/Gitlab Pages 等靜態(tài)網(wǎng)站生成器：完全免費(fèi)，支持持續(xù)集成
• Netlify/Zeabur 等托管平臺(tái)：有一定免費(fèi)額度，支持自定義二級域名。

綜合來看，對于簡單的知識(shí)庫網(wǎng)站而言，后面兩種方案完全可以滿足需求。

下面我們就一起實(shí)操下，分別將網(wǎng)站部署到：

• Gitee Pages + Github Pages
• Netlify + Zeabur

2.4 網(wǎng)站部署

2.4.1 Gitee Pages

如果你需要部署在 Gitee Pages 上，首先需要在 Gitee 新建一個(gè)遠(yuǎn)程倉庫并和本地倉庫進(jìn)行關(guān)聯(lián)，當(dāng)然如果已經(jīng)有了 GitHub 遠(yuǎn)程倉庫，也可以選擇 fork 過來。然后在項(xiàng)目首頁如下位置找到 Gitee Pages ：

遺憾的是：
因服務(wù)維護(hù)調(diào)整，Gitee Pages 暫停提供服務(wù)，給您帶來不便深感抱歉，感謝對 Gitee Pages 服務(wù)的支持。

看來國內(nèi)審核壓力也給到 Gitee 了~

2.4.2 GitHub Pages

進(jìn)入你的遠(yuǎn)程倉庫首頁，在 Settings -> Pages 中，選擇你的分支 master，選擇在根目錄部署，這個(gè)主要根據(jù)你的 index.html 所在的位置進(jìn)行選擇。

到這里，一個(gè)擁有 github.io 二級域名的 page 就已經(jīng)建好了：

訪問地址：https://hougeai.github.io/knowledgebase

是不是很簡單？

如果您想擁有一個(gè)個(gè)性化的域名怎么辦？

你得掏腰包去域名服務(wù)商買一個(gè)心儀的域名。如果你只是想拿來玩玩，當(dāng)然也有免費(fèi)域名可以注冊，可以參考這篇：【保姆級教程】免費(fèi)域名注冊 & Cloudflare 域名解析。

拿到域名之后，還需要進(jìn)行域名解析。

具體而言，在域名解析服務(wù)器中添加一條 DNS 記錄，參考官方文檔，github 可以用的 IP 地址如下：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

以我的舉例：參考上篇教程進(jìn)行域名解析，前往 cloudfare 官網(wǎng)，添加一條 DNS 記錄：

再前往 github pages 配置頁，填入你的域名，等待 DNS 解析成功。

最后，回到 github pages 配置頁上方，打開你的專屬鏈接看看吧~

訪問地址：https://kb.houge.us.kg/#/：

如果您希望 GitHub Pages 在倉庫代碼更新后能夠自動(dòng)更新？

GitHub Actions 來了解下：通過設(shè)置自動(dòng)化流程，在依賴倉庫代碼更新后自動(dòng)觸發(fā) GitHub Pages 的更新。GitHub Actions 就是 GitHub 推出的持續(xù)集成服務(wù)。

首先，需要配置下項(xiàng)目的 Actions：

其中

• Actions permissions：一定要選擇 Allow all actions and reusable workflows， 否則你將無法使用別人的 Action。
• 最下面的 Workflow permissions，如果你的項(xiàng)目需要 build，則要給讀寫權(quán)限，如果只是靜態(tài)網(wǎng)頁，保持默認(rèn)的讀權(quán)限即可。

然后，開始配置 Actions 工作流。

官方的 actions 都放在 https://github.com/actions 里面。

我們這個(gè)項(xiàng)目只需要簡單的自動(dòng)更新頁面，點(diǎn)擊 set up a workflow yourself。

在其中填入：

name: Deploy to GitHub Pageson:push:branches:- master  # 或者你使用的其他分支jobs:deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v4- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pages@v3id: deploymentwith:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./  # 使用根目錄，或替換為你的 HTML 文件所在目錄

其中，根據(jù) peaceiris/actions-gh-pages@v3 官方使用指南：
secrets.GITHUB_TOKEN 不需要手動(dòng)生成，runner 會(huì)自動(dòng)生成。

最后，點(diǎn)擊右上角 Commit Changes，提交至倉庫。倉庫根目錄下會(huì)生成一個(gè) .github/workflows 文件夾。

但是，這個(gè) workflow 卻失敗了，是第二個(gè) job 執(zhí)行出了問題。

無奈之下，只能把這個(gè) workflow 關(guān)掉了。

后來發(fā)現(xiàn)，pages 默認(rèn)就有一個(gè) workflow，叫 pages-build-deployment，會(huì)根據(jù)你的 push 進(jìn)行重新部署，無需新建 workflow。不得不說，GitHub 真的很良心，你想到的它都已經(jīng)給做到了。

2.4.3 Netlify

傳送門：https://vercel.com/

當(dāng)前免費(fèi)額度： 300 分鐘每月的計(jì)算時(shí)長和 100 GB 每月的流量。因?yàn)槲覀冞@個(gè)項(xiàng)目只是一個(gè)靜態(tài)網(wǎng)頁，無需計(jì)算，所以應(yīng)該只要不超過 100 GB 的訪問流量就是 OK 的。

注冊賬號(hào)后，新建一個(gè)項(xiàng)目，選擇從 GitHub 引入:

然后，輸入一個(gè)你想要的域名，檢查下是否可用：

點(diǎn)擊最下方的部署，稍等片刻，出現(xiàn)下面界面，說明已經(jīng)部署成功：

訪問地址（國內(nèi) IP 可訪問）：https://hougeai.netlify.app/

搞定！

2.4.4 Zeabur

傳送門：https://zeabur.com/

Zeabur 目前的限制是：

• 對于 Serverless Plan 的用戶，前10GB 流量免費(fèi)，Developer Plan 和。Team Plan 則為100GB 免費(fèi)
• Serverless Plan 是無需付費(fèi)的的，但只能用于部署靜態(tài)網(wǎng)頁。

zeabur 只能基于 Github 進(jìn)行部署。注意如果你不想升級為付費(fèi)用戶的話，只能選擇 Developer Plan 和 Team Plan 以外的地區(qū)的機(jī)器進(jìn)行部署，如果長時(shí)間無法構(gòu)建成功，可以換一個(gè)地區(qū)試試。

構(gòu)建成功后，在下面的網(wǎng)絡(luò)中點(diǎn)擊生成一個(gè)域名。

回到上方，查看部署狀態(tài)：

訪問地址（國內(nèi) IP 可訪問）：https://hougeai.zeabur.app/

注意：Zeabur 會(huì)根據(jù)你的代碼結(jié)構(gòu)自動(dòng)檢測代碼用的框架，所以如果只是一個(gè)靜態(tài)網(wǎng)站的話，不要在根目錄下放 xx.py 文件，否則它會(huì)識(shí)別為一個(gè) python 項(xiàng)目，導(dǎo)致你的 index.html 部署失敗。

寫在最后

至此，這篇長文終于寫完了。相信看到這里的你，一定也遇到過下面這些問題：

• 文章太多找不到?
• 圖片上傳太麻煩?

從本地知識(shí)庫到在線部署，從 Typora 到 Docsify，從 GitHub Pages 到 Netlify，終于把知識(shí)庫搞上線了。

如果本文對你有幫助，不妨點(diǎn)個(gè)免費(fèi)的贊和收藏備用。你的支持是我創(chuàng)作的最大動(dòng)力。