前言
本文主要介紹如何在windows環境本地部署 docsify 這款以 markdown 為中心的文檔編輯器,并即時生成您的文檔博客網站,結合cpolar內網穿透還能將博客一鍵發布至公網允許所有人訪問,無需公網ip,也不用設置路由器那么麻煩。
Docsify它會智能地加載和解析您的 Markdown 文件,并將它們顯示為網站,無需構建,寫完文檔保存完直接同步發布,不同于gitBook、Hexo的地方是它不會生成靜態的.html文件,所有轉換工作都是在運行時。如果你想要開始使用他,只需要創建一個index.html就可以開始編寫文檔并直接部署在github Pages。
它的主要特性如下:
無需構建,寫完文檔直接發布(運行時markdown文檔轉換)容易使用并且輕量(壓縮后 ~21kB,當然這里不包括markdown文檔的大小)智能的全文搜索豐富的API支持Emoji,可以在文中添加表情兼容IE11支持服務端渲染SSR

接下來,講解如何在本地部署Docsify。
1. 本地部署Docsify
本篇文章安裝環境:windows10
Docsify 項目github地址:GitHub – docsifyJS/docsify: ? A magical documentation site generator.
Docsify官方文檔教程:https://docsify.js.org/#/zh-cn/
準備工具: node.js、Typora、cpolar內網穿透
Node.js (官網):https://nodejs.org/zh-cn
Typora(官網):https://typoraio.cn
首先查看node.js是否已安裝
代碼語言:JavaScript代碼運行次數:0運行復制
node -v
查看npm是否已安裝
代碼語言:javascript代碼運行次數:0運行復制
npm -v
如未安裝,進入到node.js官網下載安裝

安裝完后,接下來需要安裝Docsify本地全局工具
代碼語言:javascript代碼運行次數:0運行復制
npm i docsify-cli -g

初始化Docsify本地項目
代碼語言:javascript代碼運行次數:0運行復制
docsify init ./docs

啟用本地網頁預覽
代碼語言:javascript代碼運行次數:0運行復制
docsify serve docs

2. 使用Docsify搭建個人博客
初始化成功后,可以看到 ./docs 目錄下創建的幾個文件
index.html 入口文件README.md 會做為主頁內容渲染.nojekyll 用于阻止 GitHub Pages 忽略掉下劃線開頭的文件
直接編輯 docs/README.md 就能更新文檔內容,當然也可以[添加更多頁面。

打開 README文檔,做為主頁內容渲染

在這個文檔中進行修改,設計自己的個人博客,修改標題,添加文章內容,并保存

制作一個個人文檔,我們只需要配置以下這幾個基本文件就可以:
文件作用
文件
基礎配置項(入口文件)
index.html
封面配置文件
_coverpage.md
側邊欄配置文件
_sidebar.md
導航欄配置文件
_navbar.md
主頁內容渲染文件
README.md
瀏覽器圖標
favicon.ico
還有很多配置項可以參考docsify文檔中的定制化-配置項—小節,定制的東西越多,維護的難度就越大。側邊欄、導航欄和封面都建議采用默認的文件渲染:
這里舉例官網的封面配置文件
封面配置文件(_coverpage.md)
封面的生成同樣是從 markdown 文件渲染來的。開啟渲染封面功能后在文檔根目錄創建 _coverpage.md 文件。渲染效果如本文檔。
index.html
代碼語言:javascript代碼運行次數:0運行復制
<!-- index.html --><script> window.$docsify = { coverpage: true }</script><script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script><!-- _coverpage.md --># docsify <small>3.5</small>> 一個神奇的文檔網站生成器。- 簡單、輕便 (壓縮后 ~21kB)- 無需生成 html 文件- 眾多主題[開始使用 Let Go](/README.md)

繼續回到我們剛才搭建的頁面,打開一個新的瀏覽器,輸入localhost:3000,或者本機IP地址:3000

這樣我們就在本地搭建了一個簡單的個人文檔博客,博客排版風格也可以自己隨意設計,但是目前我們已經在本地搭建好了博客網站,如果沒有公網IP的話,只能在本地局域網環境使用,有一定的局限性。如果出門在外想遠程訪問使用的話,可以結合cpolar內網穿透生成公網地址,免去了本地重新部署過程,只需要使用公網地址直接進就可以訪問本地部署的Docsify,隨時管理網站。
3. 安裝Cpolar內網穿透工具
下面是安裝cpolar步驟:
點擊進入cpolar官網,點擊免費使用注冊一個賬號,并下載最新版本的Cpolar

登錄成功后,點擊下載Cpolar到本地并安裝(一路默認安裝即可)本教程選擇下載Windows版本。

Cpolar安裝成功后,在瀏覽器上訪問http://localhost:9200,使用cpolar賬號登錄,登錄后即可看到Cpolar web 配置界面,結下來在web 管理界面配置即可。

4. 配置公網地址
接下來配置一下本地 Docsify 的公網地址,
登錄后,點擊左側儀表盤的隧道管理——創建隧道,
創建一個 個人博客網站 的公網http地址隧道:
隧道名稱:可自定義命名,注意不要與已有的隧道名稱重復 協議:選擇 http 本地地址:3000 域名類型:選擇隨機域名 地區:選擇China VIP
點擊創建

隧道創建成功后,點擊左側的狀態——在線隧道列表,查看所生成的公網訪問地址,有兩種訪問方式,分別是http和https。

使用任意一個上面Cpolar生成的公網地址,在電腦或任意設備在瀏覽器進行登錄訪問,即可成功看到 本地博客網站 界面,這樣一個可以遠程訪問的公網地址就創建好了,使用了Cpolar的公網域名,無需自己購買云服務器,即可在公網訪問本地部署的服務了!

5. 配置固定公網地址
我們接下來為其配置固定的HTTP端口地址,該地址不會變化,方便分享給別人長期查看你的本地服務,而無需每天重復修改服務器地址。
登錄cpolar官網,點擊左側的預留,選擇保留二級子域名,設置一個二級子域名名稱,點擊保留,保留成功后復制保留的二級子域名名稱。本教程中我創建的是二級子域名是 myhugo1,大家可以自定義創建。


返回登錄Cpolar web ui管理界面,點擊左側儀表盤的隧道管理——隧道列表,找到所要配置的隧道 myblog ,點擊右側的編輯:

修改隧道信息,將保留成功的二級子域名配置到隧道中
域名類型:選擇二級子域名 Sub Domain:填寫保留成功的二級子域名
點擊更新(注意,點擊一次更新即可,不需要重復提交)

更新完成后,打開在線隧道列表,此時可以看到公網地址已經發生變化,地址名稱也變成了固定的二級子域名名稱的域名:

最后,我們使用固定的公網地址在任何瀏覽器打開訪問,可以看到成功訪問使用Docsify搭建好的本地博客網站,這樣一個固定且永久不變的二級子域名公網地址就設置好了。
