掘金
首页
探索掘金
搜索
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 是需要插件才能实现图片缩放的，但其实也很简单，如下

<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>

复制代码
支持 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: 不知道咋弄了

转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金相关推荐

10分钟快速搭建自己的服务器
快速搭建服务器 1.创建虚拟机 2.CentOS 7的安装 3.CentOS 7 配置 4. Xshell连接 5.Docker的安装前言:买了个阿里云的服务器,但是由于内存小docker运行几个容 ...
【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
centos6 10分钟快速搭建iscsi存储服务器
1.系统架构 2.安装软件 yum list | grep target yum -y install scsi-target-utils.x86_64 3.修改配置文件先准备一个硬盘进行分区 /d ...
10分钟快速搭建实战Web项目：生鲜电商
生鲜电商环境搭建生鲜电商环境搭建软件环境准备登录宝塔上传源码文件创建数据库开放端口导入数据修改配置文件宝塔面板配置网站登录生鲜电商权限获取登录生鲜官网登录后台生鲜电商环境搭 ...
（亚马逊云）10分钟-快速启动基于 Odoo 的电商网站
文章目录 1. 引言 2. 快速启动Odoo电商网站 1. 注册 2. 创建Amazon EC2实例 3. 为Amazon EC2 实例绑定弹性IP地址 4. 获取Odoo登录密码 5. 登入Odoo ...
只要10分钟，搭建属于个人的炫酷网站，你还在犹豫什么？
ESP8266 Non-OS SDK 开发之旅基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
【华为云技术分享】10分钟快速在华为云鲲鹏弹性云服务器上部署一个自己的弹幕网站！
摘要:从零代码开始,10分钟快速开发一个可以发送弹幕的网站,并将其部署在华为云服务器上:学完本期教程,将知道如何使用Nginx.如何将自己的网站部署到云服务器上. 直播相信大家都不陌生了吧,大家经常会 ...
10分钟部署一个别人可以访问的在线网站
你是否幻想过拥有自己的个人网站?但是不会编程,没有任何网站搭建经验,搭建的时候也不知道怎么去选择系统-- 等等这一系列疑惑让大部分人还没开始就选择放弃,本期教大家用一个最简单的方式,在10分钟内搭建一 ...

转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金

介绍闭包

什么是闭包

闭包的作用是什么

转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金相关推荐

最新文章

热门文章