3 分钟搭专业文档站!Docsify+cpolar,笔记、教程外网随时看

Docsify 是一款轻量级文档网站生成工具,能直接将 Markdown 文件转换成带目录、搜索、代码高亮的在线文档,无需构建编译,修改后保存即生效。它适合技术团队维护 API 手册、教师整理课程资料、个人搭建学习笔记库,优点是零配置上手快、全平台兼容,手机和电脑都能流畅访问,且无需掌握专业前端知识。

使用时能感受到它的便捷性,但也有小细节需要注意:建议用清晰的文件夹结构管理 Markdown 文件,方便后续查找;默认侧边栏和封面足够日常使用,过度定制插件可能增加维护成本;如果文档包含大量图片,建议统一存储路径,避免链接失效。

不过 Docsify 默认仅支持局域网访问,限制了使用场景:团队成员异地办公时,无法实时查看最新的文档更新;个人想把学习笔记分享给外地朋友,只能通过文件传输,无法提供在线浏览体验;教师在机房搭建的编程教程,学生回家后就无法继续查阅复习。

而 Docsify 与 cpolar 结合后,这些问题都能轻松解决。cpolar 能为局域网内的 Docsify 文档生成公网访问地址,无需购买云服务器或配置域名,支持一键分享。借助这个公网链接,团队成员异地也能协同维护文档,个人笔记可直接分享给他人,教师的课程资料学生在家也能随时访问,大大拓展了文档的使用范围。

好的软件当然不能光说不练,教程已经准备如下👇有需要的小伙伴快去安装起来吧!

接下来,讲解如何在本地部署Docsify。

1. 本地部署Docsify

本篇文章安装环境:Windows10

Docsify 项目github地址:GitHub - docsifyjs/docsify: 🃏 A magical documentation site generator.

Docsify官方文档教程:https://docsify.js.org/#/zh-cn/

准备工具:node.js、Typora、cpolar内网穿透

Node.js (官网):https://nodejs.org/zh-cn

Typora(官网):https://typoraio.cn

首先查看node.js是否已安装

node-v

查看npm是否已安装

npm-v

如未安装,进入到node.js官网下载安装

安装完后,接下来需要安装Docsify本地全局工具

npmi docsify-cli -g

初始化Docsify本地项目

docsify init ./docs

启用本地网页预览

docsify serve docs

2. 使用Docsify搭建个人博客

打开 此电脑——C盘——用户——文档——docs文件夹

初始化成功后,可以看到./docs目录下创建的几个文件

  • index.html入口文件
  • README.md会做为主页内容渲染
  • .nojekyll用于阻止 GitHub Pages 忽略掉下划线开头的文件

直接编辑docs/README.md就能更新文档内容,当然也可以[添加更多页面。

打开README文档,做为主页内容渲染

在这个文档中进行修改,设计自己的个人博客,修改标题,添加文章内容,并保存

制作一个个人文档,我们只需要配置以下这几个基本文件就可以:

文件作用文件
基础配置项(入口文件)index.html
封面配置文件_coverpage.md
侧边栏配置文件_sidebar.md
导航栏配置文件_navbar.md
主页内容渲染文件README.md
浏览器图标favicon.ico

还有很多配置项可以参考docsify文档中的定制化-配置项—小节,定制的东西越多,维护的难度就越大。侧边栏、导航栏和封面都建议采用默认的文件渲染:

这里举例官网的封面配置文件

  • 封面配置文件(_coverpage.md)

封面的生成同样是从 markdown 文件渲染来的。开启渲染封面功能后在文档根目录创建_coverpage.md文件。渲染效果如本文档。

index.html

<!-- index.html --><script>window.$docsify={coverpage:true}</script><scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script><!-- _coverpage.md -->![logo](_media/icon.svg) # docsify<small>3.5</small>> 一个神奇的文档网站生成器。 - 简单、轻便 (压缩后 ~21kB) - 无需生成 html 文件 - 众多主题 [开始使用 Let Go](/README.md)

继续回到我们刚才搭建的页面,打开一个新的浏览器,输入localhost:3000,或者本机IP地址:3000

这样我们就在本地搭建了一个简单的个人文档博客,博客排版风格也可以自己随意设计,但是目前我们已经在本地搭建好了博客网站,如果没有公网IP的话,只能在本地局域网环境使用,有一定的局限性。如果出门在外想远程访问使用的话,可以结合cpolar内网穿透生成公网地址,免去了本地重新部署过程,只需要使用公网地址直接进就可以访问本地部署的Docsify,随时管理网站。

3. 安装Cpolar内网穿透工具

下面是安装cpolar步骤:

Cpolar官网地址: https://www.cpolar.com

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的Cpolar

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

4. 配置公网地址

接下来配置一下本地 Docsify 的公网地址,

登录后,点击左侧仪表盘的隧道管理——创建隧道,

创建一个 个人博客网站 的公网http地址隧道:

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复

  • 协议:选择 http

  • 本地地址:3000

  • 域名类型:免费选择随机域名

  • 地区:选择China VIP

点击创建

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,分别是http和https。

使用任意一个上面Cpolar生成的公网地址,在电脑或任意设备在浏览器进行登录访问,即可成功看到 本地博客网站 界面,这样一个可以远程访问的公网地址就创建好了,使用了Cpolar的公网域名,无需自己购买云服务器,即可在公网访问本地部署的服务了!

5. 配置固定公网地址

我们接下来为其配置固定的HTTP端口地址,该地址不会变化,方便分享给别人长期查看你的本地服务,而无需每天重复修改服务器地址。

配置固定http端口地址需要将cpolar升级到专业版套餐或以上。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。本教程中我创建的是二级子域名是 myhugo1,大家可以自定义创建。

返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道 myblog ,点击右侧的编辑:

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名

  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名:

最后,我们使用固定的公网地址在任何浏览器打开访问,可以看到成功访问使用Docsify搭建好的本地博客网站,这样一个固定且永久不变的二级子域名公网地址就设置好了。

以上就是如何在Windows系统电脑本地使用Docsify搭建一个博客网站,并结合cpolar内网穿透工具实现一键发布公网随时随地远程访问的全部流程。感谢您的观看,有任何问题欢迎留言交流。

总之,Docsify 简化了专业文档站的搭建流程,cpolar 则让局域网内的文档突破网络限制。二者组合,为个人、团队和教育场景提供了高效、低成本的文档管理与分享方案,让文档的创建、更新和传播变得更加灵活便捷。

cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1154341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MediaPipe Hands模型部署大全:所有平台覆盖

MediaPipe Hands模型部署大全&#xff1a;所有平台覆盖 1. 引言&#xff1a;AI 手势识别与追踪的现实价值 随着人机交互技术的不断演进&#xff0c;手势识别正逐步成为智能设备、虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;和智能家居等场景中的…

AI人脸隐私卫士镜像免配置部署:WebUI一键启动详细步骤

AI人脸隐私卫士镜像免配置部署&#xff1a;WebUI一键启动详细步骤 1. 背景与需求分析 在数字化时代&#xff0c;图像和视频内容的传播日益频繁&#xff0c;但随之而来的是个人隐私泄露风险的急剧上升。尤其是在社交媒体、公共展示或数据共享场景中&#xff0c;未经处理的人脸…

通俗解释PCB生产流程中的层压技术原理

层压&#xff0c;才是PCB真正的“粘合剂”——从一块板子的诞生讲起你有没有想过&#xff0c;手机主板上那些密密麻麻、纵横交错的线路&#xff0c;到底是怎么“叠”在一起的&#xff1f;它们可不是简单地贴在表面&#xff0c;而是被牢牢“封印”在一层又一层的绝缘材料中。这个…

Qwen3-VL-2B-Instruct性能优化:让视觉识别速度提升3倍

Qwen3-VL-2B-Instruct性能优化&#xff1a;让视觉识别速度提升3倍 1. 引言&#xff1a;为何需要对Qwen3-VL-2B-Instruct进行性能优化&#xff1f; 随着多模态大模型在图像理解、文档解析、GUI操作等场景中的广泛应用&#xff0c;推理延迟和资源消耗成为制约其落地的关键瓶颈。…

输入新品宣传方案的不同渠道和投放成本,自动统计各渠道的转化率,选出最优宣传渠道。

下面我将为你提供一个完整的、基于Python的“新品多渠道营销效果分析与最优渠道推荐器”程序&#xff0c;并包含你要求的所有部分。1. 项目概述项目名称&#xff1a; ChannelOptima - 新品多渠道营销效果分析与最优渠道推荐器项目目标&#xff1a; 本程序旨在帮助市场营销团队在…

HY-MT1.5-1.8B部署避坑指南:从安装到实战全流程解析

HY-MT1.5-1.8B部署避坑指南&#xff1a;从安装到实战全流程解析 在AI模型日益普及的今天&#xff0c;如何高效、稳定地部署一个高性能机器翻译模型成为开发者关注的核心问题。腾讯混元团队推出的 HY-MT1.5-1.8B 模型&#xff0c;凭借其1.8B参数量下的卓越表现和轻量化设计&…

手势识别技术前沿:MediaPipe Hands最新进展解读

手势识别技术前沿&#xff1a;MediaPipe Hands最新进展解读 1. 引言&#xff1a;AI 手势识别与追踪的技术演进 1.1 从交互革命到无接触感知 随着人机交互方式的不断演进&#xff0c;传统触控、语音指令已无法满足日益增长的沉浸式体验需求。手势识别作为自然用户界面&#x…

AI手势识别在直播带货中的应用:虚拟主播控制案例

AI手势识别在直播带货中的应用&#xff1a;虚拟主播控制案例 1. 引言&#xff1a;AI驱动的交互革命正在改变直播生态 随着直播电商的迅猛发展&#xff0c;传统“真人出镜手动操作”的带货模式正面临效率瓶颈。观众互动延迟、主播操作分心、场景切换生硬等问题日益凸显。在此背…

x64dbg反汇编窗口使用深度剖析

x64dbg反汇编窗口实战精讲&#xff1a;从入门到高效逆向的核心引擎 你有没有过这样的经历&#xff1f;面对一个加壳的二进制程序&#xff0c;IDA静态分析像雾里看花&#xff0c;函数边界模糊、控制流断裂&#xff0c;而当你把它拖进 x64dbg &#xff0c;按下“运行”&#xf…

AI人脸隐私卫士参数详解:高斯模糊半径的配置

AI人脸隐私卫士参数详解&#xff1a;高斯模糊半径的配置 1. 引言&#xff1a;智能打码背后的技术权衡 在数字影像日益普及的今天&#xff0c;人脸隐私泄露风险正成为公众关注的焦点。无论是社交媒体分享、监控视频发布&#xff0c;还是企业宣传照处理&#xff0c;如何在保留图…

AI手势识别部署教程:环境配置与常见问题解决

AI手势识别部署教程&#xff1a;环境配置与常见问题解决 1. 引言 1.1 学习目标 本文将带你从零开始&#xff0c;完整部署一个基于 MediaPipe Hands 模型的 AI 手势识别系统。你将学会如何配置运行环境、启动 WebUI 服务&#xff0c;并解决在实际使用中可能遇到的各类问题。最…

基于W5500的轻量级TCP/IP协议栈完整指南

用W5500打造嵌入式系统的“网络外挂”&#xff1a;不靠MCU算力&#xff0c;也能稳如磐石地联网你有没有遇到过这样的场景&#xff1f;手头的STM32F103资源已经捉襟见肘&#xff0c;RAM还剩不到4KB&#xff0c;却突然要加个以太网功能——上传传感器数据、远程配置参数。一查资料…

MediaPipe Pose环境部署:从安装到运行的完整流程

MediaPipe Pose环境部署&#xff1a;从安装到运行的完整流程 1. 引言 1.1 AI 人体骨骼关键点检测 随着人工智能在计算机视觉领域的深入发展&#xff0c;人体姿态估计&#xff08;Human Pose Estimation&#xff09;已成为智能健身、动作捕捉、虚拟现实和安防监控等场景的核心…

小白也能懂:AI手势识别镜像的WebUI使用全攻略

小白也能懂&#xff1a;AI手势识别镜像的WebUI使用全攻略 1. 引言&#xff1a;为什么你需要本地化手势识别&#xff1f; 在人机交互、虚拟现实、智能监控等前沿领域&#xff0c;手势识别正成为连接人类意图与数字世界的桥梁。传统方案多依赖云端API&#xff08;如百度人体分析…

MediaPipe Pose与Unity集成:虚拟角色控制教程

MediaPipe Pose与Unity集成&#xff1a;虚拟角色控制教程 1. 引言 1.1 学习目标 本文将带你完成一个完整的项目实践&#xff1a;使用 Google MediaPipe Pose 实现高精度人体骨骼关键点检测&#xff0c;并将其数据实时传输至 Unity 引擎&#xff0c;驱动虚拟角色进行动作同步…

GLM-4.6V-Flash-WEB部署捷径:预置镜像开箱即用

GLM-4.6V-Flash-WEB部署捷径&#xff1a;预置镜像开箱即用 智谱最新开源&#xff0c;视觉大模型。 1. 背景与技术价值 1.1 视觉大模型的演进趋势 近年来&#xff0c;多模态大模型在图文理解、视觉问答&#xff08;VQA&#xff09;、图像描述生成等任务中展现出惊人能力。从早…

输入员工的学历,工作经验和创新点子数量。分析学历与创新能力的相关性,输出分析结果。

下面我将为你提供一个完整的、基于Python的“员工创新能力相关性分析器”程序&#xff0c;并包含你要求的所有部分。 1. 项目概述 项目名称&#xff1a; InnovCorrelation Analyzer - 员工创新能力相关性分析器 项目目标&#xff1a; 本程序旨在帮助HR部门和团队领导者分析公司…

AI舞蹈动作识别实战:MediaPipe Pose骨骼检测案例

AI舞蹈动作识别实战&#xff1a;MediaPipe Pose骨骼检测案例 1. 引言&#xff1a;AI人体骨骼关键点检测的现实价值 在智能健身、虚拟试衣、人机交互乃至AI舞蹈教学等场景中&#xff0c;人体姿态估计&#xff08;Human Pose Estimation&#xff09; 正成为核心技术支撑。通过精…

运维系列虚拟化系列OpenStack系列【仅供参考】:通过例子学习Keystone - 每天5分玩转 OpenStack(19)理解 Glance - 每天5分玩转 OpenStack(20)

通过例子学习 Keystone - 每天5分钟玩转 OpenStack(19)&&理解 Glance - 每天5分钟玩转 OpenStack(20) 通过例子学习 Keystone - 每天5分钟玩转 OpenStack(19) 第 1 步 登录 第 2 步 显示操作界面 第 3 步 显示 image 列表 Troubleshoot 理解 Glance - 每天5分钟…

模拟数字混合电路PCB布局:核心要点隔离与接地

模拟数字混合电路PCB布局&#xff1a;如何真正“隔离”噪声&#xff1f;你有没有遇到过这样的情况——明明选用了16位甚至24位的高精度ADC&#xff0c;参考电压也用的是低噪声LDO供电&#xff0c;可实测采样结果却总是跳动不止&#xff0c;信噪比远低于手册标称值&#xff1f;或…