Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

前言

本文主要介紹如何在windows環境本地部署 docsify 這款以 markdown 為中心的文檔編輯器,并即時生成您的文檔博客網站,結合cpolar內網穿透還能將博客一鍵發布至公網允許所有人訪問,無需公網ip,也不用設置路由器那么麻煩。

Docsify它會智能地加載和解析您的 Markdown 文件,并將它們顯示為網站,無需構建,寫完文檔保存完直接同步發布,不同于gitBook、Hexo的地方是它不會生成靜態的.html文件,所有轉換工作都是在運行時。如果你想要開始使用他,只需要創建一個index.html就可以開始編寫文檔并直接部署在github Pages。

它的主要特性如下:

無需構建,寫完文檔直接發布(運行時markdown文檔轉換)容易使用并且輕量(壓縮后 ~21kB,當然這里不包括markdown文檔的大小)智能的全文搜索豐富的API支持Emoji,可以在文中添加表情兼容IE11支持服務端渲染SSR

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

接下來,講解如何在本地部署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官網下載安裝

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

安裝完后,接下來需要安裝Docsify本地全局工具

代碼語言:javascript代碼運行次數:0運行復制

npm i docsify-cli -g
Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

初始化Docsify本地項目

代碼語言:javascript代碼運行次數:0運行復制

docsify init ./docs
Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

啟用本地網頁預覽

代碼語言:javascript代碼運行次數:0運行復制

docsify serve docs
Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

2. 使用Docsify搭建個人博客

打開 此電腦——c盤——用戶——文檔——docs文件夾

初始化成功后,可以看到 ./docs 目錄下創建的幾個文件

index.html 入口文件README.md 會做為主頁內容渲染.nojekyll 用于阻止 GitHub Pages 忽略掉下劃線開頭的文件

直接編輯 docs/README.md 就能更新文檔內容,當然也可以[添加更多頁面。

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

制作一個個人文檔,我們只需要配置以下這幾個基本文件就可以:

文件作用

文件

基礎配置項(入口文件)

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 -->![logo](_media/icon.svg)# docsify <small>3.5</small>&gt; 一個神奇的文檔網站生成器。- 簡單、輕便 (壓縮后 ~21kB)- 無需生成 html 文件- 眾多主題[開始使用 Let Go](/README.md)
Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

3. 安裝Cpolar內網穿透工具

下面是安裝cpolar步驟:

點擊進入cpolar官網,點擊免費使用注冊一個賬號,并下載最新版本的Cpolar

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

4. 配置公網地址

接下來配置一下本地 Docsify 的公網地址,

登錄后,點擊左側儀表盤的隧道管理——創建隧道,

創建一個 個人博客網站 的公網http地址隧道:

隧道名稱:可自定義命名,注意不要與已有的隧道名稱重復 協議:選擇 http 本地地址:3000 域名類型:選擇隨機域名 地區:選擇China VIP

點擊創建

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

5. 配置固定公網地址

我們接下來為其配置固定的HTTP端口地址,該地址不會變化,方便分享給別人長期查看你的本地服務,而無需每天重復修改服務器地址。

登錄cpolar官網,點擊左側的預留,選擇保留二級子域名,設置一個二級子域名名稱,點擊保留,保留成功后復制保留的二級子域名名稱。本教程中我創建的是二級子域名是 myhugo1,大家可以自定義創建。

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網
Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

修改隧道信息,將保留成功的二級子域名配置到隧道中

域名類型:選擇二級子域名 Sub Domain:填寫保留成功的二級子域名

點擊更新(注意,點擊一次更新即可,不需要重復提交)

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

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

Windows系統使用Docsify文檔編輯器搭建個人博客并一鍵發布公網

? 版權聲明
THE END
喜歡就支持一下吧
點贊13 分享