当前位置：首页 > news >正文

告别局域网限制！Windows快速部署Docsify技术文档站点，搭配cpolar内网穿透实现公网随时随地访问

news 2025/11/12 5:38:44

文章目录

- 前言
- 一.关于Docsify
- 二.windows部署docsify
- 三.简单使用docsify
- 四. 介绍以及安装cpolar
- 五. 配置公网地址
- 六. 配置固定二级子域名公网地址
- 结尾

前言

Docsify 的核心功能是将 Markdown 文件直接转化为美观的文档网站，支持侧边栏、导航栏自定义，还能添加搜索功能，让文档结构清晰、易查易用。

作为经常写技术文档的人，我特别喜欢它的实时更新特性 —— 用 Typora 编辑后，浏览器刷新就能看到效果，不用像静态网站那样反复构建，省了很多时间。

以前 Docsify 文档只能在公司局域网内查看，居家办公时想查阅资料特别麻烦。用了 cpolar 后，生成一个公网链接，无论是在家、出差，还是客户需要查看说明文档，直接发链接就行，还能多人同时访问，协作起来灵活多了，再也不用受限于局域网范围。

为什么说 Docsify 是团队协作的理想选择？

零配置部署：仅需一个HTML入口文件和Markdown目录结构，即可快速搭建文档站点；
智能自适应：从桌面到移动设备无缝切换布局，满足多场景访问需求；
插件生态丰富：开箱即用的代码高亮、搜索索引、版本控制等功能，让复杂需求触手可及；
实时协作友好：文档内容更新后无需刷新页面即可生效，团队成员可同步查看最新状态。

当需要向外部协作者或远程团队共享文档时（如开源项目维护者、跨地域开发组），cpolar内网穿透工具能进一步提升协作效率。它允许使用者通过加密公网通道安全访问私有化部署的Docsify站点——无论是演示系统接口说明，还是共享技术知识库，都可瞬间打通内外网络壁垒。

一.关于Docsify

Docsify 是一个基于 JavaScript 的开源文档生成工具。它的核心理念是“简单即高效”，无需繁琐的构建流程，无需生成静态 HTML 文件，只需几行命令，就能将你的 Markdown 文件动态渲染为一个功能齐全、颜值在线的文档网站。

二.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的本地网页了！

三.简单使用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/)