掘金
首页
探索掘金
搜索
lvhanghmm的头像
Gopal lv-4
2021年03月09日 阅读 9930
关注
【工具】10分钟快速搭建属于自己的文档网站
前言
很多同学都希望能够拥有自己的一个文档系统，去记录/总结自己所学到的知识。
本文就来介绍一下 Docsify + Github Page 的方式，旨在快速搭建属于自己的文档网站
本文的 Demo 代码可以通过 Github 查看，演示看这里
准备工作
全局安装 docsify-cli 工具，并创建文档项目目录
npm i docsify-cli -g
mkdir my-docs
cd my-docs
复制代码
初始化项目
docsify init ./docs
复制代码
成功后会生成一个 docs 的文件夹，并且里面有三个文件
index.html 入口文件。后面我们的配置很多都是在这里配置
README.md 会做为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
启动项目
docsify serve docs
复制代码
通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。下面的内容时间上是 README.md 中的内容
简单的配置
接下来就是配置我们的文档了
配置侧边栏
在 index.html 中，新增配置 loadSidebar: true
window.$docsify = {
name: '',
repo: '',
- loadSidebar: true
}
复制代码
在 docs 中新建一个文件 _sidebar.md，写入
-
JavaScript
- 闭包
- 原型
-
CSS
- 布局
复制代码
同时在 docs 中新建 closure.md 、prototype.md和 layout.md三个 Markdown 文件
- 布局
可以在 closure.md 中写入如下，查看效果
介绍闭包
什么是闭包
哈哈哈哈
闭包的作用是什么
复制代码
自动生成目录
可以根据标题生成目录，这个在文章很长的时候很有用，直接演示配置和效果
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,
- subMaxLevel: 2
}
复制代码
插件的使用
基础的配置已经完成了，当然还有其他更多的功能配置，这里不再细说。Docsify 还提供了丰富的插件，接下来我们看看
全文搜索
配置非常简单
复制代码
查看效果
图片缩放
Docsify 是需要插件才能实现图片缩放的，但其实也很简单，如下
复制代码
支持 CodePen 插入
随便找到一个 CodePen，打开，找到 Embed，点击进入
image.png
点击 iframe,copy 里面的代码。粘贴到你的 markdown 文件中
就可以查看 CodePen 的了
更多的插件实现方案
Docsify 还提供了 Gitalk 评论插件等。更多请看官方文档，这里不再赘述。
部署
你不需要一台服务器(当然也可以)，我们直接部署到 Github Page 中。先上传我们的代码到 Github。这里不再演示这一步，请读者自行完成
找到 Settings
找到 GitHub Pages，选择 main 和 docs 文件夹，点击 save
稍等一会，就会生成我们的文档地址了，可以点击这里查看本文的演示效果
总结
本文从 0 到 1 介绍以 Docsify + Github Page 的方式，快速搭建属于自己的文档系统，并部署到线上。当然文章提到的只是 Docsify 的一小部分功能，赶兴趣的可以去官方查看
文章分类
前端
文章标签
前端
Git
Gopal lv-4
前端开发工程师 @ 公众号@前端杂货铺
发布了 68 篇专栏 · 获得点赞 5,872 · 获得阅读 256,354
关注
安装掘金浏览器插件
打开新标签页发现好内容，掘金、GitHub、Dribbble、ProductHunt 等站点内容轻松获取。快来安装掘金浏览器插件获取高质量内容吧！
水库浪子的头像
水库浪子
web前端工程师
大佬请教一个问题 github pages我push完代码后发现线上的代码没有及时更新 这个问题怎么解决呢
25天前
水库浪子
web前端工程师
就是github上的代码已经是最新的了 但是github pages生成的线上地址页面没有更新 不知道是什么原因
25天前
lexmin lv-1
前端开发工程师 @ 上海海典软件
回复 水库浪子: github pages部署有延迟，建议用vercel，直接导入git项目就行了，0配置。
13天前
水库浪子
web前端工程师
回复 lexmin: 大佬有相关文章推荐吗
13天前
lexmin lv-1
前端开发工程师 @ 上海海典软件
回复 水库浪子: 刚写了一篇，求三连。https://juejin.cn/post/6951789326782955534/juejin.cn
10天前
1326chen的头像
1326chen
java
确实是干货，好玩，但一直显示read me. md的内容，是要重启服务么，貌似也没用，看怎么解决，谢谢？
1月前
1326chen
java
解决了，写错了一个字母，不好意思，非常感谢
1月前
听雨巷卖杏花的头像
听雨巷卖杏花 lv-1
前端
部署gitlab怎么操作啊？我按照文档加了配置文件。但是怎么才能看到我的文档页面？
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
也有类似的入口的，会不会是因为你没有权限呢？
1月前
听雨巷卖杏花 lv-1
前端
回复 Gopal: 不知道咋弄了
1月前
weiwuxian的头像
weiwuxian
提交了修改后端的代码,网站内容怎么同步更新?
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
这里使用的服务是 Github Page，不需要自己写服务。
更新的内容，直接 push 到远程分支，就会自动部署更新了
1月前
依然呀的头像
依然呀
切图仔
收藏了
1月前
王阿觉的头像
王阿觉
全栈工程师 @ 东莞湖里逛科技有限公司
为啥有个腾讯云
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
啥腾讯云？
1月前
王阿觉
全栈工程师 @ 东莞湖里逛科技有限公司
回复 Gopal: 你看你的第一张图底部
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
回复 王阿觉: 拿的网图，没留意...下次注意...
1月前
Hey_Jude的头像
Hey_Jude
· @ 上海浦东
我是用docsify+gitee pages做的
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
嗯嗯
1月前
星际why lv-1
前端摸鱼怪 @ 寻寻觅觅寻不到
你好，gitee上面怎么部署的呢
1月前
Hey_Jude
· @ 上海浦东
回复 Gopal: 代码仓库里面，有一个服务，服务里面有一个Gitee Pages
1月前
HIPI的头像
HIPI lv-2
摸鱼前端 @ 点击查看
像这种转换工作在运行时的文档生成器，搜索是硬伤，因为是靠markdown源文件进行的搜索，一旦你的搜索包含了Markdown的语法符号，你将是什么也搜不到！举个例子你在 官方文档搜索 可以添加 是没有搜索结果，然而很明显 在 开始写文档 目录的最后一句话是存在的
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
是的，它的 SEO 也不是特别好
1月前
無思童的头像
無思童 lv-1
Mithril @ Flarum
GitHub Pages 打不开怎么办，github可以访问
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
你是指你的网络打不开 GitHub Pages？还是说 GitHub Pages 报错了？
1月前
chokcoco的头像
chokcoco lv-6
坎坷切图仔 @ iCSS前端趣闻
高产如母猪
1月前
黄宽.的头像
黄宽.
web前端 @ 狗头科技
这个和vuepress的区别是啥
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
VuePress 的话，具有以下的特点
- 灵活性更高，自己自定义组件，直接在 Markdown 中使用组件
- 性能 vuepress > docsify。docsify 是运行时解析，vuepress 是预先渲染 HTML
- 更好的 SEO
- 但是配置上，docsify 更加简单一些
1月前
郭建方的头像
郭建方
数据不是存在自己的数据库，不放心啊
1月前
Chenjunyi的头像
Chenjunyi lv-2
不知名前端 @ 欢迎关注
前几天刚写了一篇 Vuepress + github page自动化部署的文章https://juejin.cn/post/6936936647368015880juejin.cn
1月前
Aldas lv-1
前端 @ 第一年
没了
1月前
Chenjunyi lv-2
不知名前端 @ 欢迎关注
回复 Aldas: https://juejin.cn/post/6937532951223599141juejin.cn 重发了
1月前
码农小胖哥的头像
码农小胖哥 lv-4
公众号：码农小胖哥 @ felord.cn
这个运行时编译 香！
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
其实相比 Vue Press，它的性能并不是优势... Vue Press 是预先编译好的，性能会相对好些
1月前
码农小胖哥 lv-4
公众号：码农小胖哥 @ felord.cn
回复 Gopal: 主要文档不需要编译，随时改随时发布
1月前
云隐的头像
云隐
构建自己的文档库，挺好
1月前
徐四的头像
徐四 lv-2
要来一杯嘛？！我超甜！耶咻！ @ 大连
福音啊，哈哈哈哈，得搞一波测试下
1月前
chaoszhu的头像
chaoszhu
前端小菜鸡
还是vuepress香
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
各有优缺点，这个更方便，VuePress 对 SEO 更加的友好一些
1月前
hjhwel的头像
hjhwel lv-1
前端 @ 上海
收了
1月前
Gopal lv-4 (作者)
前端开发工程师 @ 公众号@前端杂货铺
收了也点个赞呗，哈哈
1月前
锐变前端小分队的头像
锐变前端小分队 lv-1
PHP开发、前端开发
收到
1月前
相关推荐
阿宝哥
2天前
JavaScript
前端
JavaScript 中如何实现大文件并行下载？
本文介绍了在 JavaScript 中如何利用 async-pool 这个库提供的 asyncPool 函数，来实现大文件的并行下载。
477
45
分享
阿宝哥
14小时前
前端
JavaScript
Axios 如何取消重复请求？
在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。
172
42
分享
海天酱油_htSauce
10小时前
前端
前端数据缓存(前端数据库)的一些见解，利用内存存储帮你优化接口请求
利用好内存变量的特性来优化接口请求。 前端发展这些年，前端具备可持续存储之后前端才逐步的替代了早年客户端的能力。但是前端改如何去管理这些数据呢？又如何正确使用？
36
15
分享
前端数据缓存(前端数据库)的一些见解，利用内存存储帮你优化接口请求
一袋米要扛几楼
6天前
前端
【设计模式】这样学也太简单了吧！
设计模式为了解决什么痛点？ 什么是面向对象编程 面向对象编程是一种编程范式或编程风格。它以类或对象作为组织代码的基本单元，并将封装、抽象、继承、多态四大特性，作为代码设计和实现的基石。 面向对象编程语
400
29
分享
【设计模式】这样学也太简单了吧！
涂鸦大前端
5天前
浏览器
前端
如何处理浏览器的断网情况？
好的断网处理会让人很舒适：lol的断线重连，王者荣耀的断线重连 可以确保游戏的继续进行 坏的断网处理甚至不处理会出bug：比如我手上的项目就出了个bug 业务人员表示非常苦恼 网络问题一直是一个很值得
338
22
分享
如何处理浏览器的断网情况？
hzzly
1天前
前端
Monorepo的实践落地
前言：最近针对项目代码仓库进行了一次重构，之前代码管理缺少规范和模块化的思想，也是借着项目重构这次机会重新规划代码仓库，实践落地了一种新的项目管理方式——Monorepo，Monorepo的管理概念跟
8
1
分享
Hyouka
1天前
前端
一起写一个React+Typescript+Zent后台吧
前言 关于 zent 是有赞开发的一套基于WebUI规范的一套react业务组件库，并且有赞还特意为zent写了babel-plugin-zent来结合zent库进行按需加载 使用技术栈 React
8
5
分享
Big shark@LX
12小时前
前端
今天你踩坑了吗-echarts5.0常用配置详解
前言 最近公司刚做完大数据相关的产品 涉及到了比较多的前端数据可视化有关的知识 咱们选择了上手简单功能也比较强大的 echarts5.0 版进行图表绘制 当然也根据文档做了很多自定义配置
50
6
分享
今天你踩坑了吗-echarts5.0常用配置详解
Jtalk大前端
4小时前
前端
Android
iOS
CSS入门后，我从前的到全栈 | JTalk大前端
自我介绍 大家好，我是JowayYoung，就职于网易集团互动娱乐事业群，深耕前端领域多年，擅长HTML/CSS/JS/Web/Node、网络通讯、框架原理、工程架构、性能优化和设计模式等。日常喜欢学
6
评论
分享
前端早早聊
4小时前
CI/CD
前端
夜沉-如何打造流程可扩展、高生产力的前端研发平台
前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属周边群，赢在新的起跑线。
4
评论
分享