前言
各位程序员大神们，你们是不是经常在为项目写文档时抓狂？不仅要折腾复杂的构建流程，还得维护一堆静态 HTML 文件，简直是“文档无止境，痛苦何时了”啊！如果你正为此烦恼，那么恭喜你，今天我要介绍的神器——Docsify，绝对能让你瞬间解脱！
1.关于Docsify
Docsify 是一个基于 JavaScript 的开源文档生成工具。它的核心理念是“简单即高效”，无需繁琐的构建流程，无需生成静态 HTML 文件，只需几行命令，就能将你的 Markdown 文件动态渲染为一个功能齐全、颜值在线的文档网站。
为什么选择 Docsify：
- 无需构建：写完 Markdown 直接部署，完全零配置；
- 响应式设计：PC、手机访问都能自动适配；
- 支持插件：搜索、目录自动生成、代码高亮等功能应有尽有；
- 自动渲染：无需刷新页面，文档内容自动加载；
- 部署简单：只要一个 HTML 文件 + Markdown，就能上线。
特别适合那些想快速发布项目文档、产品说明书、学习笔记的网站！
2.windows部署docsify
首先是准备工作，我们需要一台windows电脑用于在本地部署docsify
● Docsify（官网）：https://docsify.js.org/#/ 这套技术博客能存在都要靠它
● node.js（官网）：https://nodejs.org/zh-cn 本地网页预览 需要它
● node.js：https://pan.quark.cn/s/2870cabae46b
● vscode（官网）：Visual Studio Code – Code Editing. Redefined 代码编辑器 用于我们后面丰富文档内容
● Typora（官网）：https://typoraio.cn 最优雅的markdown文本编辑器
● Typora：https://pan.quark.cn/s/59ed76d4773bhttps://mobaxterm.mobatek.net/)
● cpolar：https://www.cpolar.com 它可以帮你把本地的服务一键发布到公网，
从而实现随时随地使用任何设备访问你的技术博客！
最后是霍格沃兹环境，由于拉取docsify项目的服务器在国外，所以你懂得，网络问题需要你自己解决下~
首先我们打开终端，输入这行命令，这里注意一下，没有魔法环境这里可能会拉取不了
npm i docsify-cli -g
稍等一会，拉取成功后会显示这么几行东西。
接着我们在输入这行代码 回车。意思是初始化docsify本地服务
docsify init ./docs
接着我们依次打开此电脑，c盘，用户，docs文件夹，admin，这里就是docsify的本地网页了！
3.简单使用docsify
先为它创建一个桌面快捷方式，方便我们未来去编辑它。
接着打开刚才的文档，这个readme文件，就是docsify的主页内容渲染文件了！docsify的整个页面效果，都是通过读取这个markdown文件来实现的。
你可以像编辑一个word文件一样，优雅地编辑这个文件，然后他就会变成一个网页！编辑完成后别忘了点击上方的文件，保存一下。
回到终端上，我们输入这行代码，回车。意思是启用本地网页预览。
docsify serve docs
注意，这个命令每次关闭终端他就会失效，每次预览网页都需要重新输入执行哦！
执行完成后你会看到下边有一行地址，localhost:3000，这就是本地网页预览地址了！
我们打开浏览器输入刚才的地址打开，就能看到我们刚才在markdown上编辑的网页了
当然因为我们什么都没写，所以略显简陋~没有任何搜索栏或者导航栏等等。
但其实我们维护一份轻量级的个人和团队文档我们只需要配置以下这几个基本文件就可以了。
| 文件作用 | 文件 |
|---|---|
| 基础配置项（入口文件） | index.html |
| 封面配置文件 | _coverpage.md |
| 侧边栏配置文件 | _sidebar.md |
| 导航栏配置文件 | _navbar.md |
| 主页内容渲染文件 | README.md |
| 浏览器图标 | favicon.ico |
这样的话就会让你的博客文档站点显得更正式，专业。
我们打开vscode，打开刚才的docs文件夹，修改这个名字为index.html的文件，这个是基础配置项也就是入口文件，复制粘贴这些内容进去：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docsify-Guide</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- 设置浏览器图标 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!-- 默认主题 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>
<body>
<!-- 定义加载时候的动作 -->
<div id="app">加载中...</div>
<script>
window.$docsify = {
// 项目名称
name: 'Docsify-Guide',
// 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
repo: 'https://github.com/YSGStudyHards',
// 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
loadSidebar: true,
// 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
loadNavbar: true,
// 封面支持，默认加载的是项目根目录下的_coverpage.md文件
coverpage: true,
// 最大支持渲染的标题层级
maxLevel: 5,
// 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
subMaxLevel: 4,
// 小屏设备下合并导航栏到侧边栏
mergeNavbar: true,
}
</script>
<script>
// 搜索配置(url：https://docsify.js.org/#/zh-cn/plugins?id=%e5%85%a8%e6%96%87%e6%90%9c%e7%b4%a2-search)
window.$docsify = {
search: {
maxAge: 86400000,// 过期时间，单位毫秒，默认一天
paths: auto,// 注意：仅适用于 paths: 'auto' 模式
placeholder: '搜索',
// 支持本地化
placeholder: {
'/zh-cn/': '搜索',
'/': 'Type to search'
},
noData: '找不到结果',
depth: 4,
hideOtherSidebarContent: false,
namespace: 'Docsify-Guide',
}
}
</script>
<!-- docsify的js依赖 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- emoji表情支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<!-- 图片放大缩小支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!-- 搜索功能支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
</body>
</html>
接着再新建一个_coverpage.md，封面配置文件，粘贴内容：
<!-- _coverpage.md -->
# Docsify使用指南
> 💪Docsify使用指南，使用Typora+Docsify打造最强、最轻量级的个人&团队文档。
简单、轻便 (压缩后 ~21kB)
- 无需生成 html 文件
- 众多主题
[开始使用 Let Go](/README.md)
再新建一个 _sidebar.md 侧边栏配置文件，粘贴：
<!-- _sidebar.md -->
* Typora+Docsify使用指南
* [Docsify使用指南](/ProjectDocs/Docsify使用指南.md) <!--注意这里是相对路径-->
* [Typora+Docsify快速入门](/ProjectDocs/Typora+Docsify快速入门.md)
* Docsify部署
* [Docsify部署教程](/ProjectDocs/Docsify部署教程.md)
最后再新建一个_navbar.md 导航栏配置文件，粘贴内容：
<!-- _navbar.md -->
* 链接到我
* [博客园地址](https://www.cnblogs.com/Can-daydayup/)
* [Github地址](https://github.com/YSGStudyHards)
* [知乎地址](https://www.zhihu.com/people/ysgdaydayup)
* [掘金地址](https://juejin.cn/user/2770425031690333/posts)
* [Gitee地址](https://gitee.com/ysgdaydayup)
* 友情链接
* [Docsify](https://docsify.js.org/#/)
* [博客园](https://www.cnblogs.com/)
以上文件保存后，然后我们在终端输入上一个命令重启页面。
再次打开localhost:3000这样网页看起来是不是好看多啦！！
有一个漂亮的封面，点进去是我们刚才编辑的内容，有右上角的各种链接栏，还有一个小图标，左侧还有导航栏，可以放各种不同的内容。
感觉很高大上呢！可以当个人主页、当博客、当教程、当礼物、当官网等等！
可比html css js好弄多了!
4、介绍以及安装cpolar
虽然 Docsify 非常强大，但在团队协作或远程办公时，如何让同事和朋友也能方便地访问你的文档呢？这时就需要一个强大的工具——cpolar 来帮忙了！
cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可以帮助你轻松将本地服务发布到互联网上。无论是开发调试、团队协作还是远程办公，cpolar 都能为你提供稳定的网络连接。
访问cpolar官网： https://www.cpolar.com 点击免费使用注册一个账号，并下载最新版本的cpolar。
登录成功后，点击下载Cpolar到本地并安装（一路默认安装即可）本教程选择下载Windows版本。
cpolar安装成功后，在浏览器上访问localhost:9200，使用cpolar账号登录，登录后即可看到Cpolar web 配置界面，接下来在web管理界面配置即可。
5、配置公网地址
登录cpolar web UI管理界面后，点击左侧仪表盘的隧道管理——创建隧道：
- 隧道名称：可自定义，本例使用了:geziblog，注意不要与已有的隧道名称重复
- 协议：http
- 本地地址：3000
- 域名类型：随机域名
- 地区：选择China Top
点击创建：
创建成功后，打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用任意一个地址在浏览器中访问即可。
小结
为了方便演示，我们在上边的操作过程中使用cpolar生成的HTTP公网地址隧道，其公网地址是随机生成的。这种随机地址的优势在于建立速度快，可以立即使用。然而，它的缺点是网址是随机生成，这个地址在24小时内会发生随机变化，更适合于临时使用。
如果有长期使用docsify，或者异地访问与使用其他本地部署的服务的需求，但又不想每天重新配置公网地址，还想让公网地址好看又好记并体验更多功能与更快的带宽，那我推荐大家选择使用固定的二级子域名方式来配置公网地址。
6、配置固定二级子域名公网地址
使用cpolar为其配置二级子域名，该地址为固定地址，不会随机变化。
注意需要将cpolar套餐升级至基础套餐或以上，且每个套餐对应的带宽不一样。【cpolar.cn已备案】
点击左侧的预留，选择保留二级子域名，地区选择china top，然后设置一个二级子域名名称，我这里演示使用的是geziblog，大家可以自定义。填写备注信息，点击保留。
保留成功后复制保留的二级子域名地址：
登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的隧道，点击右侧的编辑。
修改隧道信息，将保留成功的二级子域名配置到隧道中
- 域名类型：选择二级子域名
- Sub Domain：填写保留成功的二级子域名
- 地区: China Top
点击更新
更新完成后，打开在线隧道列表，此时可以看到随机的公网地址已经发生变化，地址名称也变成了保留和固定的二级子域名名称。
随便复制一个打开都能看到我们刚才创建的博客主页！
结尾
恭喜你，现在已经成功搭建了一个功能齐全、颜值在线的文档网站！无论是个人博客还是项目文档，Docsify 都能轻松搞定。而 cpolar 的加入，则让你的文档可以随时随地被访问。
以上就是如何在本地windows系统快速部署docsify，并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址，实现随时随地远程访问的全过程，感谢您的观看，有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站
