企业官网建设流程全解析

百度网站提交收录入口,做别人一样的网站,做html5视频网站,淮南网站设计文章目录前言1.关于 Docsify2.windows 部署 docsify3.简单使用 docsify4、介绍以及安装 cpolar5、配置公网地址6、配置固定二级子域名公网地址结尾前言 Docsify 是一款基于 JavaScript 的轻量文档工具#xff0c;核心功能是将 Markdown 文件实时转化为响应式网页#xff0c;…文章目录前言1.关于 Docsify2.windows 部署 docsify3.简单使用 docsify4、介绍以及安装 cpolar5、配置公网地址6、配置固定二级子域名公网地址结尾前言Docsify 是一款基于 JavaScript 的轻量文档工具核心功能是将 Markdown 文件实时转化为响应式网页无需复杂的构建流程。它适合个人开发者、小型团队或开源项目维护者无论是写技术手册、产品说明还是或团队知识库都很合适。优点在于零配置部署只需关联 Markdown 文件和基础 HTML 模板就能用支持多设备自适应从电脑到手机都能流畅访问还有丰富的插件可扩展功能比如代码高亮、搜索索引等。使用 Docsify 时最大的感受是 “轻量不简陋”。编辑文档就像用记事本写 Markdown 一样简单保存后网页自动更新不用反复编译侧边栏、导航栏等结构通过简单配置文件就能实现新手也能快速上手。不过要注意本地预览需要依赖 Node.js 环境首次使用得先安装相关工具。但 Docsify 默认只能在局域网内访问这给跨团队协作带来不少麻烦。比如异地同事想查看最新文档得先想办法连入同一局域网出差时要修改文档只能等到本地电脑操作没法随时通过公网访问大大限制了使用场景。而当 Docsify 与 cpolar 结合后这些问题迎刃而解。cpolar 能把本地 Docsify 服务映射到公网生成可直接访问的公网地址。无论是在家、公司还是出差只要有网络就能打开文档异地团队成员不用复杂设置输入地址就能查看或协作甚至可以把公网地址分享给客户方便对方查阅产品说明让文档的价值不再受限于局域网。1.关于 DocsifyDocsify是一个基于 JavaScript 的开源文档生成工具。它的核心理念是“简单即高效”无需繁琐的构建流程无需生成静态 HTML 文件只需几行命令就能将你的 Markdown 文件动态渲染为一个功能齐全、颜值在线的文档网站。2.windows 部署 docsify首先是准备工作我们需要一台 windows 电脑用于在本地部署 docsify● Docsify官网https://docsify.js.org/#/ 这套技术博客能存在都要靠它● node.js官网https://nodejs.org/zh-cn 本地网页预览 需要它● node.jshttps://pan.quark.cn/s/2870cabae46b● vscode官网Visual Studio Code - Code Editing. Redefined 代码编辑器 用于我们后面丰富文档内容● Typora官网https://typoraio.cn 最优雅的 markdown 文本编辑器● Typorahttps://pan.quark.cn/s/59ed76d4773bhttps://mobaxterm.mobatek.net/)● cpolarhttps://www.cpolar.com 它可以帮你把本地的服务一键发布到公网从而实现随时随地使用任何设备访问你的技术博客最后是霍格沃兹环境由于拉取 docsify 项目的服务器在国外所以你懂得网络问题需要你自己解决下~首先我们打开终端输入这行命令这里注意一下没有魔法环境这里可能会拉取不了npmi 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 的文件这个是基础配置项也就是入口文件复制粘贴这些内容进去!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8titleDocsify-Guide/titlemeta http-equivX-UA-CompatiblecontentIEedge,chrome1/meta namedescriptioncontentDescriptionmeta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0!--设置浏览器图标--link reliconhref/favicon.icotypeimage/x-icon/link relshortcut iconhref/favicon.icotypeimage/x-icon/!--默认主题--link relstylesheethref//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css/headbody!--定义加载时候的动作--div idapp加载中.../divscriptwindow.$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-4subMaxLevel:4,// 小屏设备下合并导航栏到侧边栏mergeNavbar:true,}/scriptscript// 搜索配置(urlhttps://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使用指南使用TyporaDocsify打造最强、最轻量级的个人团队文档。简单、轻便(压缩后~21kB)-无需生成 html 文件-众多主题[开始使用 Let Go](/README.md)再新建一个 _sidebar.md 侧边栏配置文件粘贴!--_sidebar.md--*TyporaDocsify使用指南*[Docsify使用指南](/ProjectDocs/Docsify使用指南.md)!--注意这里是相对路径--*[TyporaDocsify快速入门](/ProjectDocs/TyporaDocsify快速入门.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 内网穿透工具配置固定不变的二级子域名公网地址实现随时随地远程访问的全过程感谢您的观看有任何问题欢迎留言交流。通过 Docsify 快速搭建文档再借助 cpolar 突破网络限制整个套组合让文档协作变得高效又灵活。无需复杂操作就能能实现随时随地访问满足各类场景下的文档需求。cpolar 官网-安全的内网穿透工具 | 无需公网 ip | 远程访问 | 搭建网站