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

5分钟发布技术博客:cpolar简化Docsify远程协作流程

文章目录

    • 前言
    • 1. 本地部署Docsify
    • 2. 使用Docsify搭建个人博客
          • 封面配置文件(_coverpage.md)
    • 3. 安装Cpolar内网穿透工具
    • 4. 配置公网地址
    • 5. 配置固定公网地址
        • 通过 cpolar,Docsify 博客即时发布变得简单高效。只需三步:在本地创建 Markdown 文档,运行 Docsify 生成博客网站,通过 cpolar 创建远程访问链接。建议使用时设置自定义域名,定期备份文档。cpolar 让本地 Markdown 文件秒变在线博客,为技术分享提供零成本解决方案。

前言

在技术分享和知识管理领域,Markdown 格式因其简洁易用的特点受到广泛欢迎。Docsify 作为一款轻量级的 Markdown 文档网站生成工具,能够帮助用户快速搭建美观的技术博客,无需复杂的构建过程,直接编辑 Markdown 文件即可实时预览。然而,很多用户在使用 Docsify 时都会遇到一个问题:如何在没有公网 IP 的情况下,将本地编写的 Markdown 文档发布为可远程访问的在线博客?

传统的解决方法通常需要将文档部署到 GitHub Pages 或云服务器,这不仅需要一定的技术门槛,还可能因为环境配置问题导致发布失败。

cpolar 内网穿透服务的出现,为这个问题提供了简单有效的解决方案。它就像是在你的本地 Docsify 博客和互联网之间架起了一座 “直达桥梁”,让你可以直接将本地的 Markdown 文档发布为在线博客,不需要复杂的部署流程。

cpolar 的工作原理其实很容易理解。你的本地文件夹就像一个 “博客编辑部”,Docsify 是编辑部的 “排版系统”。没有 cpolar 的时候,这个编辑部只能在本地预览。cpolar 相当于给这个编辑部开了 “线上窗口”,让互联网上的用户可以直接访问你的 “编辑部”,查看最新的文章。

接下来,我们将用最简单的语言,一步步教你如何安装和配置 Docsify,如何编写和组织 Markdown 文档,以及如何通过 cpolar 实现即时发布。即使你没有专业的网站开发知识,也能轻松上手,让你的技术分享变得更加高效。

image.png

接下来,讲解如何在本地部署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官网下载安装

image.png

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

npm i docsify-cli -g

e1ff9d2b834521d989a76277c716543.png

初始化Docsify本地项目

docsify init ./docs

afc7abd1246c895e5fffbbcaeb2394b.png

启用本地网页预览

docsify serve docs

3cf760f7ed5f4bc7874375bad2da234.png

2. 使用Docsify搭建个人博客

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

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

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

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

c4126a875c7b3e3faad2d3717edd49e.png

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

cd910652eec24ecfdf341116a761c65.png

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

bf069889f8f2288a98b21ac07f8d651.png

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

文件作用文件
基础配置项(入口文件)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>
<script src="//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)

image-20240929161635728

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

7de4e88bfaefade2c91d81e4330f7b1.png

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

3. 安装Cpolar内网穿透工具

下面是安装cpolar步骤:

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

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

img

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

image-20240319175308664

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

img

4. 配置公网地址

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

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

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

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

  • 协议:选择 http

  • 本地地址:3000

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

  • 地区:选择China VIP

点击创建

0a463e72c4860a962f64eb3fa210666.png

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

940ea832e2141f6a127b4d8b8e95791.png

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

9305a29ab0db32df574a24a17493737.png

5. 配置固定公网地址

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

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

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

ccefd68508b2e258b4c065e1c87ebc8.png

cb95c941b05467edfa639f21c63ada7.png

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

image.png

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

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

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

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

19340e2de3126b0d8fb7928cff5e3ad.png

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

d4175ee6fc3f1824ac91a005d658a9f.png

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

8cb52856d28799785a4f8ab0d3ca9cc.png

通过 cpolar,Docsify 博客即时发布变得简单高效。只需三步:在本地创建 Markdown 文档,运行 Docsify 生成博客网站,通过 cpolar 创建远程访问链接。建议使用时设置自定义域名,定期备份文档。cpolar 让本地 Markdown 文件秒变在线博客,为技术分享提供零成本解决方案。
http://www.xdnf.cn/news/1362133.html

相关文章:

  • Zabbix企业级监控运维实践为主(新)
  • ╳╳╳╳╳╳╳╳╳╳头像商店╳╳╳╳╳╳╳╳╳╳
  • 独立显卡接口操作指南
  • blazor 学习笔记--vscode debug
  • 探索汽车材料新纪元:AUTO TECH 2025广州先进汽车材料展即将震撼来袭
  • Vim 的 :term命令:终端集成的终极指南
  • 服务器Docker 安装和常用命令总结
  • 零售收银选乐檬,高市占率背后的全链路价值赋能
  • 【SQL】深入理解MySQL存储过程:从入门到实战
  • Linux / 宝塔面板下 PHP OPcache 完整实践指南
  • 当模型学会集思广益:集成学习的核心原理与多样化协作模式解析
  • 【Hadoop】HDFS 分布式存储系统
  • 数据结构:单链表(详解)
  • Linux-Redis的安装
  • 【Linux】开发工具命令指南:深度解析Vim的使用操作
  • Java项目-苍穹外卖_Day1
  • 计算机毕业设计 java 血液中心服务系统 基于 Java 的血液管理平台Java 开发的血液服务系统
  • 【应急响应工具教程】Unix/Linux 轻量级工具集Busybox
  • 页面中嵌入Coze的Chat SDK
  • (多线程)线程安全和线程不安全 产生的原因 synchronized关键字 synchronized可重入特性死锁 如何避免死锁 内存可见性
  • 前端通过node本地转译rtsp流,配合hls实现浏览
  • Go语言运算符全解析
  • 用 fastmcp 2.0 做一个“短期记忆(Redis)”的 MCP 服务器(Server)+ 一个简单的 Client 例子
  • Java项目-苍穹外卖_Day2
  • Ubuntu24.04配置yolov5
  • 使用 Gemini CLI作为 Claude Code的 subagent
  • 分布式锁设计实战:多级缓存防御设计优化同步性能
  • 《眼科学》10月版面征稿论文速递
  • Nestjs生命周期中全局方法执行顺序
  • 嵌入式开发学习———Linux环境下网络编程学习(六)