如何自己創(chuàng)建網(wǎng)站？文檔是幫助用戶使用開(kāi)源項(xiàng)目的一個(gè)重要部分，但它并不總是開(kāi)發(fā)人員的首要任務(wù)，因?yàn)樗麄兛赡芨P(guān)心如何使他們的應(yīng)用程序更好地使用它。這就是為什么開(kāi)發(fā)人員可以更容易地發(fā)布文檔。在本教程中，我將向您展示一種方法：如何自己創(chuàng)建網(wǎng)站。

如何使用docsify和GitHub頁(yè)面創(chuàng)建文檔網(wǎng)站？

默認(rèn)情況下，githubpages會(huì)提示用戶使用Jekyll，一個(gè)支持HTML、CSS和其他web技術(shù)的靜態(tài)網(wǎng)站生成器。Jekyll可以從以降價(jià)格式編碼的文檔文件生成一個(gè)靜態(tài)網(wǎng)站，GitHub將自動(dòng)識(shí)別它們。MD或。降價(jià)擴(kuò)展。這是一個(gè)很好的設(shè)置，但我想試試別的。

幸運(yùn)的是，githubpages支持HTML文件，這意味著您可以使用docsify等其他站點(diǎn)生成工具在這個(gè)平臺(tái)上創(chuàng)建一個(gè)網(wǎng)站。Docsify是一個(gè)擁有MIT許可證的開(kāi)源項(xiàng)目，它可以很容易地在githubpages上創(chuàng)建一個(gè)有吸引力的***文檔網(wǎng)站。

文件

安裝docsify有兩種方法：

Docsify推薦NPM，但我將使用第二個(gè)選項(xiàng)。如果要使用NPM，請(qǐng)按照快速入門指南中的說(shuō)明進(jìn)行操作。

我已經(jīng)在項(xiàng)目的GitHub頁(yè)面上發(fā)布了這個(gè)示例的源代碼。您可以單獨(dú)下載這些文件，也可以通過(guò)以下方式克隆存儲(chǔ)庫(kù)。

然后CD進(jìn)入docsifydemo目錄。

如果您克隆我的GitHub存儲(chǔ)庫(kù)并切換到docsifydemo目錄，您應(yīng)該會(huì)看到以下文件結(jié)構(gòu)：

文件內(nèi)容包含在ClonedWithub中

這基本上只是一個(gè)普通的HTML文件，但是看看這兩行：

這些行使用內(nèi)容交付網(wǎng)絡(luò)（CDN）的URL來(lái)提供CSS和JavaScript腳本來(lái)將站點(diǎn)轉(zhuǎn)換為docsify站點(diǎn)。只要包含這些行，就可以將常規(guī)GitHub頁(yè)面轉(zhuǎn)換為文檔頁(yè)面。

body標(biāo)記后的***行指定要呈現(xiàn)的內(nèi)容：

Docsify使用單頁(yè)應(yīng)用程序（SPA）呈現(xiàn)請(qǐng)求的頁(yè)面，而不是刷新新頁(yè)面。

***，查看腳本塊中的行：

在此區(qū)塊中：

您可以在docsify文檔的配置部分找到所有選項(xiàng)。

它使用markdown的鏈接格式來(lái)創(chuàng)建導(dǎo)航。請(qǐng)注意，tomcat、cloud和Java等鏈接是縮進(jìn)的；這意味著它們?cè)诟告溄酉鲁尸F(xiàn)為子鏈接。

圖像自述文件.md像和圖像這樣的文件與存儲(chǔ)庫(kù)的結(jié)構(gòu)有關(guān)，但所有其他的降價(jià)文件都與docsify網(wǎng)頁(yè)相關(guān)。

根據(jù)您的需要，請(qǐng)隨意修改您下載的文件。接下來(lái)，將這些文件添加到GitHub存儲(chǔ)庫(kù)中，啟用githubpages，并完成項(xiàng)目。

創(chuàng)建示例GitHub存儲(chǔ)庫(kù)，并使用以下GitHub命令簽出、提交和推送代碼：

設(shè)置githubpages頁(yè)面。在新的GitHub存儲(chǔ)庫(kù)中，單擊“設(shè)置”：

設(shè)置鏈接到Sub

向下滾動(dòng)直到看到githubpages：

GithubPages設(shè)置

“查找”部分：

GithubPages設(shè)置

單擊“源”下的下拉菜單。通常，您會(huì)將其設(shè)置為“主分支”，但如果您愿意，也可以使用其他分支：

設(shè)置SourceToMasterBranch

就這樣！現(xiàn)在應(yīng)該有一個(gè)鏈接到githubpages的頁(yè)面。單擊此鏈接將帶您到那里，然后使用docsify呈現(xiàn)它：

鏈接到SubpagesDocssite

應(yīng)該是這樣的：

示例Docsifysiteongitubpage

如何自己創(chuàng)建網(wǎng)站？通過(guò)編輯HTML文件和一些降價(jià)文本，您可以使用docsify創(chuàng)建一個(gè)外觀漂亮的文檔網(wǎng)站。你覺(jué)得怎么樣？請(qǐng)留言并分享其他可以與githubpages一起使用的開(kāi)源工具。