掘金
首頁
探索掘金
搜索
lvhanghmm的頭像

Gopal lv-4
2021年03月09日 閱讀 9930
關(guān)注

【工具】10分鐘快速搭建屬于自己的文檔網(wǎng)站
前言
很多同學(xué)都希望能夠擁有自己的一個文檔系統(tǒng)，去記錄/總結(jié)自己所學(xué)到的知識。

本文就來介紹一下 Docsify + Github Page 的方式，旨在快速搭建屬于自己的文檔網(wǎng)站

本文的 Demo 代碼可以通過 Github 查看，演示看這里

準(zhǔn)備工作
全局安裝 docsify-cli 工具，并創(chuàng)建文檔項(xiàng)目目錄

npm i docsify-cli -g
mkdir my-docs
cd my-docs
復(fù)制代碼
初始化項(xiàng)目
docsify init ./docs
復(fù)制代碼
成功后會生成一個 docs 的文件夾，并且里面有三個文件

index.html 入口文件。后面我們的配置很多都是在這里配置
README.md 會做為主頁內(nèi)容渲染
.nojekyll 用于阻止 GitHub Pages 忽略掉下劃線開頭的文件
啟動項(xiàng)目
docsify serve docs
復(fù)制代碼
通過運(yùn)行 docsify serve 啟動一個本地服務(wù)器，可以方便地實(shí)時預(yù)覽效果。默認(rèn)訪問地址 http://localhost:3000 。下面的內(nèi)容時間上是 README.md 中的內(nèi)容

簡單的配置
接下來就是配置我們的文檔了

配置側(cè)邊欄
在 index.html 中，新增配置 loadSidebar: true

window.$docsify = {
name: '',
repo: '',

• loadSidebar: true
  }
  復(fù)制代碼
  在 docs 中新建一個文件 _sidebar.md，寫入

• JavaScript

  • 閉包
  • 原型

• CSS

  • 布局
    復(fù)制代碼
    同時在 docs 中新建 closure.md 、prototype.md和 layout.md三個 Markdown 文件

可以在 closure.md 中寫入如下，查看效果

介紹閉包

什么是閉包

哈哈哈哈

閉包的作用是什么

復(fù)制代碼

自動生成目錄
可以根據(jù)標(biāo)題生成目錄，這個在文章很長的時候很有用，直接演示配置和效果

window.$docsify = {
name: '',
repo: '',
loadSidebar: true,

• subMaxLevel: 2
  }
  復(fù)制代碼

插件的使用
基礎(chǔ)的配置已經(jīng)完成了，當(dāng)然還有其他更多的功能配置，這里不再細(xì)說。Docsify 還提供了豐富的插件，接下來我們看看

全文搜索
配置非常簡單

復(fù)制代碼
查看效果

圖片縮放
Docsify 是需要插件才能實(shí)現(xiàn)圖片縮放的，但其實(shí)也很簡單，如下

<script>window.$docsify = {name: '',repo: '',loadSidebar: true,subMaxLevel: 2,search: 'auto'} </script> <!-- Docsify v4 --> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

復(fù)制代碼
支持 CodePen 插入
隨便找到一個 CodePen，打開，找到 Embed，點(diǎn)擊進(jìn)入

image.png

點(diǎn)擊 iframe,copy 里面的代碼。粘貼到你的 markdown 文件中

就可以查看 CodePen 的了

更多的插件實(shí)現(xiàn)方案
Docsify 還提供了 Gitalk 評論插件等。更多請看官方文檔，這里不再贅述。

部署
你不需要一臺服務(wù)器(當(dāng)然也可以)，我們直接部署到 Github Page 中。先上傳我們的代碼到 Github。這里不再演示這一步，請讀者自行完成

找到 Settings

找到 GitHub Pages，選擇 main 和 docs 文件夾，點(diǎn)擊 save

稍等一會，就會生成我們的文檔地址了，可以點(diǎn)擊這里查看本文的演示效果

總結(jié)
本文從 0 到 1 介紹以 Docsify + Github Page 的方式，快速搭建屬于自己的文檔系統(tǒng)，并部署到線上。當(dāng)然文章提到的只是 Docsify 的一小部分功能，趕興趣的可以去官方查看

文章分類
前端
文章標(biāo)簽

前端

Git

Gopal lv-4
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
發(fā)布了 68 篇專欄 · 獲得點(diǎn)贊 5,872 · 獲得閱讀 256,354
關(guān)注
安裝掘金瀏覽器插件
打開新標(biāo)簽頁發(fā)現(xiàn)好內(nèi)容，掘金、GitHub、Dribbble、ProductHunt 等站點(diǎn)內(nèi)容輕松獲取。快來安裝掘金瀏覽器插件獲取高質(zhì)量內(nèi)容吧！

水庫浪子的頭像
水庫浪子
web前端工程師
大佬請教一個問題 github pages我push完代碼后發(fā)現(xiàn)線上的代碼沒有及時更新 這個問題怎么解決呢
25天前

水庫浪子
web前端工程師
就是github上的代碼已經(jīng)是最新的了 但是github pages生成的線上地址頁面沒有更新 不知道是什么原因
25天前

lexmin lv-1
前端開發(fā)工程師 @ 上海海典軟件
回復(fù) 水庫浪子: github pages部署有延遲，建議用vercel，直接導(dǎo)入git項(xiàng)目就行了，0配置。
13天前

水庫浪子
web前端工程師
回復(fù) lexmin: 大佬有相關(guān)文章推薦嗎
13天前

lexmin lv-1
前端開發(fā)工程師 @ 上海海典軟件
回復(fù) 水庫浪子: 剛寫了一篇，求三連。https://juejin.cn/post/6951789326782955534/juejin.cn
10天前
1326chen的頭像
1326chen
java
確實(shí)是干貨，好玩，但一直顯示read me. md的內(nèi)容，是要重啟服務(wù)么，貌似也沒用，看怎么解決，謝謝？
1月前

1326chen
java
解決了，寫錯了一個字母，不好意思，非常感謝
1月前
聽雨巷賣杏花的頭像
聽雨巷賣杏花 lv-1
前端
部署gitlab怎么操作啊？我按照文檔加了配置文件。但是怎么才能看到我的文檔頁面？
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
也有類似的入口的，會不會是因?yàn)槟銢]有權(quán)限呢？
1月前

聽雨巷賣杏花 lv-1
前端
回復(fù) Gopal: 不知道咋弄了😂
1月前
weiwuxian的頭像
weiwuxian
提交了修改后端的代碼,網(wǎng)站內(nèi)容怎么同步更新?
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
這里使用的服務(wù)是 Github Page，不需要自己寫服務(wù)。
更新的內(nèi)容，直接 push 到遠(yuǎn)程分支，就會自動部署更新了
1月前
依然呀的頭像
依然呀
切圖仔
收藏了
1月前
王阿覺的頭像
王阿覺
全棧工程師 @ 東莞湖里逛科技有限公司
為啥有個騰訊云
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
啥騰訊云？
1月前

王阿覺
全棧工程師 @ 東莞湖里逛科技有限公司
回復(fù) Gopal: 你看你的第一張圖底部
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
回復(fù) 王阿覺: 拿的網(wǎng)圖，沒留意...下次注意...
1月前
Hey_Jude的頭像
Hey_Jude
· @ 上海浦東
我是用docsify+gitee pages做的😃
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
嗯嗯
1月前

星際why lv-1
前端摸魚怪 @ 尋尋覓覓尋不到
你好，gitee上面怎么部署的呢
1月前

Hey_Jude
· @ 上海浦東
回復(fù) Gopal: 代碼倉庫里面，有一個服務(wù)，服務(wù)里面有一個Gitee Pages
1月前
HIPI的頭像
HIPI lv-2
摸魚前端 @ 點(diǎn)擊查看
像這種轉(zhuǎn)換工作在運(yùn)行時的文檔生成器，搜索是硬傷，因?yàn)槭强縨arkdown源文件進(jìn)行的搜索，一旦你的搜索包含了Markdown的語法符號，你將是什么也搜不到！舉個例子你在 官方文檔搜索 可以添加 是沒有搜索結(jié)果，然而很明顯 在 開始寫文檔 目錄的最后一句話是存在的😂
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
是的，它的 SEO 也不是特別好
1月前
無思童的頭像
無思童 lv-1
Mithril @ Flarum
GitHub Pages 打不開怎么辦，github可以訪問
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
你是指你的網(wǎng)絡(luò)打不開 GitHub Pages？還是說 GitHub Pages 報錯了？
1月前
chokcoco的頭像
chokcoco lv-6
坎坷切圖仔 @ iCSS前端趣聞
高產(chǎn)如母豬 😅
1月前
黃寬.的頭像
黃寬.
web前端 @ 狗頭科技
這個和vuepress的區(qū)別是啥
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
VuePress 的話，具有以下的特點(diǎn)

• 靈活性更高，自己自定義組件，直接在 Markdown 中使用組件
• 性能 vuepress > docsify。docsify 是運(yùn)行時解析，vuepress 是預(yù)先渲染 HTML
• 更好的 SEO
• 但是配置上，docsify 更加簡單一些
  1月前
  郭建方的頭像
  郭建方
  數(shù)據(jù)不是存在自己的數(shù)據(jù)庫，不放心啊
  1月前
  Chenjunyi的頭像
  Chenjunyi lv-2
  不知名前端 @ 歡迎關(guān)注
  前幾天剛寫了一篇 Vuepress + github page自動化部署的文章https://juejin.cn/post/6936936647368015880juejin.cn
  1月前

Aldas lv-1
前端 @ 第一年
沒了
1月前

Chenjunyi lv-2
不知名前端 @ 歡迎關(guān)注
回復(fù) Aldas: https://juejin.cn/post/6937532951223599141juejin.cn 重發(fā)了
1月前
碼農(nóng)小胖哥的頭像
碼農(nóng)小胖哥 lv-4
公眾號：碼農(nóng)小胖哥 @ felord.cn
這個運(yùn)行時編譯 香！
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
其實(shí)相比 Vue Press，它的性能并不是優(yōu)勢... Vue Press 是預(yù)先編譯好的，性能會相對好些
1月前

碼農(nóng)小胖哥 lv-4
公眾號：碼農(nóng)小胖哥 @ felord.cn
回復(fù) Gopal: 主要文檔不需要編譯，隨時改隨時發(fā)布
1月前
云隱的頭像
云隱
構(gòu)建自己的文檔庫，挺好
1月前
徐四的頭像
徐四 lv-2
要來一杯嘛？！我超甜_！耶咻！ @ 大連
福音啊，哈哈哈哈，得搞一波測試下
1月前
chaoszhu的頭像
chaoszhu
前端小菜雞
還是vuepress香
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
各有優(yōu)缺點(diǎn)，這個更方便，VuePress 對 SEO 更加的友好一些
1月前
hjhwel的頭像
hjhwel lv-1
前端 @ 上海
收了
1月前

Gopal lv-4 (作者)
前端開發(fā)工程師 @ 公眾號@前端雜貨鋪
收了也點(diǎn)個贊唄，哈哈
1月前
銳變前端小分隊(duì)的頭像
銳變前端小分隊(duì) lv-1
PHP開發(fā)、前端開發(fā)
收到
1月前
相關(guān)推薦
阿寶哥
2天前
JavaScript
前端
JavaScript 中如何實(shí)現(xiàn)大文件并行下載？
本文介紹了在 JavaScript 中如何利用 async-pool 這個庫提供的 asyncPool 函數(shù)，來實(shí)現(xiàn)大文件的并行下載。
477
45
分享
阿寶哥
14小時前
前端
JavaScript
Axios 如何取消重復(fù)請求？
在 Web 項(xiàng)目開發(fā)過程中，我們經(jīng)常會遇到重復(fù)請求的場景，如果系統(tǒng)不對重復(fù)的請求進(jìn)行處理，則可能會導(dǎo)致系統(tǒng)出現(xiàn)各種問題。
172
42
分享
海天醬油_htSauce
10小時前
前端
前端數(shù)據(jù)緩存(前端數(shù)據(jù)庫)的一些見解，利用內(nèi)存存儲幫你優(yōu)化接口請求
利用好內(nèi)存變量的特性來優(yōu)化接口請求。 前端發(fā)展這些年，前端具備可持續(xù)存儲之后前端才逐步的替代了早年客戶端的能力。但是前端改如何去管理這些數(shù)據(jù)呢？又如何正確使用？
36
15
分享
前端數(shù)據(jù)緩存(前端數(shù)據(jù)庫)的一些見解，利用內(nèi)存存儲幫你優(yōu)化接口請求
一袋米要扛幾樓
6天前
前端
【設(shè)計(jì)模式】這樣學(xué)也太簡單了吧！
設(shè)計(jì)模式為了解決什么痛點(diǎn)？ 什么是面向?qū)ο缶幊?面向?qū)ο缶幊淌且环N編程范式或編程風(fēng)格。它以類或?qū)ο笞鳛榻M織代碼的基本單元，并將封裝、抽象、繼承、多態(tài)四大特性，作為代碼設(shè)計(jì)和實(shí)現(xiàn)的基石。 面向?qū)ο缶幊陶Z
400
29
分享
【設(shè)計(jì)模式】這樣學(xué)也太簡單了吧！
涂鴉大前端
5天前
瀏覽器
前端
如何處理瀏覽器的斷網(wǎng)情況？
好的斷網(wǎng)處理會讓人很舒適：lol的斷線重連，王者榮耀的斷線重連 可以確保游戲的繼續(xù)進(jìn)行 壞的斷網(wǎng)處理甚至不處理會出bug：比如我手上的項(xiàng)目就出了個bug 業(yè)務(wù)人員表示非常苦惱 網(wǎng)絡(luò)問題一直是一個很值得
338
22
分享
如何處理瀏覽器的斷網(wǎng)情況？
hzzly
1天前
前端
Monorepo的實(shí)踐落地
前言：最近針對項(xiàng)目代碼倉庫進(jìn)行了一次重構(gòu)，之前代碼管理缺少規(guī)范和模塊化的思想，也是借著項(xiàng)目重構(gòu)這次機(jī)會重新規(guī)劃代碼倉庫，實(shí)踐落地了一種新的項(xiàng)目管理方式——Monorepo，Monorepo的管理概念跟
8
1
分享
Hyouka
1天前
前端
👏👏一起寫一個React+Typescript+Zent后臺吧
前言 關(guān)于 zent 是有贊開發(fā)的一套基于WebUI規(guī)范的一套react業(yè)務(wù)組件庫，并且有贊還特意為zent寫了babel-plugin-zent來結(jié)合zent庫進(jìn)行按需加載 使用技術(shù)棧 React
8
5
分享
Big shark@LX
12小時前
前端
今天你踩坑了嗎-echarts5.0常用配置詳解
前言 最近公司剛做完大數(shù)據(jù)相關(guān)的產(chǎn)品 涉及到了比較多的前端數(shù)據(jù)可視化有關(guān)的知識 咱們選擇了上手簡單功能也比較強(qiáng)大的 echarts5.0 版進(jìn)行圖表繪制 當(dāng)然也根據(jù)文檔做了很多自定義配置
50
6
分享
今天你踩坑了嗎-echarts5.0常用配置詳解
Jtalk大前端
4小時前
前端
Android
iOS
CSS入門后，我從前的到全棧 | JTalk大前端
自我介紹 大家好，我是JowayYoung，就職于網(wǎng)易集團(tuán)互動娛樂事業(yè)群，深耕前端領(lǐng)域多年，擅長HTML/CSS/JS/Web/Node、網(wǎng)絡(luò)通訊、框架原理、工程架構(gòu)、性能優(yōu)化和設(shè)計(jì)模式等。日常喜歡學(xué)
6
評論
分享
前端早早聊
4小時前
CI/CD
前端
夜沉-如何打造流程可擴(kuò)展、高生產(chǎn)力的前端研發(fā)平臺
前端早早聊大會，前端成長的新起點(diǎn)，與掘金聯(lián)合舉辦。 加微信 codingdreamer 進(jìn)大會專屬周邊群，贏在新的起跑線。
4
評論
分享

總結(jié)

以上是生活随笔為你收集整理的转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。