使用docsify搭建高颜值高质量文档类型的网站

最新推荐文章于 2026-04-21 07:22:45 发布
原创 最新推荐文章于 2026-04-21 07:22:45 发布 · 724 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍如何从零开始搭建一个个人技术博客，包括安装Node环境、使用docsify进行初始化、设置封面及侧边栏、文章组织、插件使用，以及如何将博客部署到GitHub并同步到码云。

此文章主要是个人使用,是看的别人的视频做了下笔记,比较粗略

安装Node环境

安装docsify(Linux环境)

  1. 创建一个文件夹docsify-blog
  2. docsify初始化
  3. docsify server 文件夹 本地运行

设置封面

设置侧边栏

文章放在docs目录下

使用插件

部署网站

  1. GitHub创建一个仓库
  2. 本地项目上传到仓库
  3. Settings
  4. source–master branch
  5. 等一会看一下

项目同步到码云

  1. 从GitHub导入,复制刚才的仓库地址即可
  2. 服务–gittee pages,强制使用https
  3. 点击url访问即可
docsify 本地 markdown 美化
07-16
docsify 本地 markdown 美化
docsify 的 index.html
06-27
docsify的基础index.html添加了各种功能组件，拿来即用
docsify笔记 02：主题、插件与其它个性化设置
Naisu的各种笔记
12-26 5619
在上一篇文章 《docsify笔记 01：快速入门》 中介绍了docsify一些基本使用内容。接下来将在这里介绍下一些个性化设置相关内容。
docsify+github/gitee搭建个人在线文档
Mark_md的博客
11-22 7497
先安装node.js docsify官网-快速开始 全局安装工具 npm i docsify-cli -g 选择一个其他的路径，初始化项目 docsify init ./docs 初始化成功后，会在路径下创建一个docs文件夹，docs文件夹内有3个文件 本地预览 docsify serve docs 浏览器访问 http://localhost:3000 最开始 index.html 是这样子。 <!DOCTYPE html> <html lang="en"> &lt
如何快速创建专业的文档网站：Docsify终极指南
最新发布
gitblog_00032的博客
04-21 605
Docsify 是一款神奇的文档网站生成器，它能帮助你快速创建专业且美观的文档网站，无需复杂的构建过程，直接使用 Markdown 文件即可实时渲染成精美的网页。无论是个人项目、开源软件还是企业文档，Docsify 都能让你的文档展示更加专业和易用。 ## 为什么选择 Docsify？ Docsify 作为一款现代化的文档生成工具，具有以下显著优势： - **无需构建过程**：直接加载 Ma
【亲测免费】 灵活警报插件：Docsify 文档美化的利器
gitblog_00182的博客
09-14 616
灵活警报插件：Docsify 文档美化的利器 项目介绍 在构建文档时，如何有效地吸引读者的注意力并传达关键信息是一个常见挑战。docsify-plugin-flexible-alerts 是一个专为 Docsify 设计的插件，它能够将普通的引用块（blockquotes）转换为美观且功能强大的警报框。这些警报框不仅视觉上引人注目，还可以根据需要进行全局或局部的定制，确保文档的输出完全符合您的需求...
灵活警报插件：Docsify 文档美化的利器
gitblog_00874的博客
09-14 441
灵活警报插件：Docsify 文档美化的利器 项目介绍 在构建文档时，如何有效地吸引读者的注意力并传达关键信息是一个常见挑战。docsify-plugin-flexible-alerts 是一个专为 docsify 设计的插件，它能够将普通的引用块（blockquotes）转换为美观且功能强大的警报提示。无论是笔记、提示、警告还是注意，这个插件都能让你的文档更加生动和易于理解。 项目技术分析 do...
利用docsify快速搭建文档型
sunon_的博客
12-09 403
参考：docsifyA magical documentation generator.https://docsify.js.org/#/zh-cn/quickstart 最快速简单的就是利用官方提供的例子，在上面修改。 做好的效果还是不错滴：点击下面查看（用来做成一个记录恋爱日志的网站） About My sweet_babyDescriptionhttps://www.zjhuiwan.cn/zjlovelt/#/ window.$docsify = { name: 'About M.
计算机基础 | 文档神器docsify安装及基本使用
fangsfdavid的博客
07-14 1508
为啥要用docsify？ 神器Docsify让你的文档变得美观，配合typora，从此爱上看文档，各种优点：小巧、快速、美观、方便、快捷、上手快，可以浏览如下优秀案例 ve-charts pyecharts pyecharts-gallery 处于萌芽阶段的 Java 核心知识库 更多案例请看：Awesome Docsify 安装 1、首先安装npm： sudo apt install npm 如果报错，则执行如下命令安装相关依赖 sudo apt-get install nodejs-dev.
工具--docsify详解
热门推荐
李宥的博客
04-29 2万+
docsify详解 一、docsify入门 1、简介 docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。 官网地址：https://docsify.js.org/#/zh-cn/ 2、特性 无需构建，写完文档直接发布 容易使用并且轻量 (压缩后 ~21kB) 智能的全文搜索 提供多套主题 丰富的 API 支持 Emoji
个性化docsify配置：mydocsify实例分析
weixin_35094083的博客
05-29 1131
docsify 是一个现代的、无服务器的文档网站生成器。它允许用户直接在浏览器中编辑和更新文档，并能即时看到更改效果，而无需进行繁重的构建流程。它特别适合创建简单的文档网站，因其快速、简洁、且易于使用的特性在开发者群体中广受欢迎。配置docsify时，通常需要编辑根目录下的文件。在这里可以设置网站的标题、描述、加载的插件，以及主题颜色等全局选项。例如，可以通过来加载侧边栏，或通过auto2top选项来设置页面滚动到顶部的功能。# _config.yml示例title: 我的文档网站。
如何使用Docsify即时将你的文档转换成一个美观且易用的博客网站
2501_91525861的博客
04-09 468
今天我要给大家推荐一款超级实用且方便的工具——Docsify，如果你是技术博主、开发者或者任何需要频繁撰写和分享文档的人，这款工具绝对能让你的工作变得更加轻松愉快。在数字化时代，内容创作变得越来越重要，但如何高效地管理和发布这些内容却成了一个不小的挑战。传统的静态站点生成器如 GitBook 和 Hexo 虽然功能强大，但在使用过程中往往会遇到一些繁琐的步骤，比如需要生成大量的 HTML 文件、配置复杂的服务器设置等。这些问题不仅耗时费力，还容易出错。而 Docsify 则完全颠覆了这一传统模式。
docsify-themeable：docsify.js的简单主题系统。 具有丰富的自定义选项，丰富的桌面和移动体验以及旧版浏览器支持（IE10 +）的多个主题
02-05
docsify-themeable Docsify，主题化是一个令人高兴的简单的主题系统 。 具有多个主题，具有丰富的自定义选项，改进的桌面和移动体验以及旧版浏览器支持（IE10 +）。 -实时演示，文档和主题预览 -具有演示docsify-memeable站点的在线编辑器 屏幕截图 简单主题 简单的黑暗主题 联系 为错误报告，功能请求或问题创建问题 关注以获得公告 添加一个 :star: 或 :red_heart: 支持该项目！ 执照 该项目已获得MIT许可。 有关详细信息，请参见。 版权所有（c）John Hildenbiddle（ ）
docsify-pseudocode:在 docsify 中渲染伪代码的插件
05-30
文档化伪代码 这是什么 docsify-伪代码是基于插件呈现在docsify伪代码。 使用它，你可以轻松地在 markdown 文档中编写类似 Latex 的算法包的伪代码。 特征 所有功能都来自pseudocode.js。 直观的语法： docsify-pseudocode 采用 LaTeX 风格的输入，支持来自 LaTeX 算法包的算法结构。 无论是否有 LaTeX 经验，用户都会发现语法相当直观。 打印质量：由 docsify-pseudocode 生成的 HTML 输出（几乎）与打印在由 LaTeX 排版的出版物上的漂亮算法相同。 数学公式支持：在 docsify-pseudocode 中插入数学公式就像 LaTeX 一样简单。 只需将数学表达式括在$...$或\(...\) 。 多个后端： docsify-pseudocode 支持和来渲染数学公式。 支持 为错误报告、功
Docsify使用指南（打造最快捷、最轻量级的个人&团队文档）
专注于C#/.NET/.NET Core学习、工作、面试干货和实战教程分享。这里聚焦了大量的C#/.NET/.NET Core优质文章、开源项目、实用工具和学习、工作、面试心得。
03-01 2594
网上关于动态文档生成工具有很多如：Docsify、 VuePress、Docute 、Hexo这些都是一些非常优秀的文档生成工具，本章主要介绍如何快速使用Docsify搭建一个快捷、轻量级的个人&团队文档。一个神奇的文档网站生成器。docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档。
使用docsify完成一个MarkDown格式的个人博客
勇敢牛牛，不怕困难！
03-19 1255
日常的时候根据笔记很多，很多内容整理比较麻烦，突发奇想，做一个个人博客网站，最好是直接可以将Markdown文件放入博客中，直接进行展示，于是参考了很多网上教程，经过一天的努力就完成了这样的一个效果，虽然没有太多复杂功能，但总体来说一定是够用的。但是这个框架不支持自动生成目录，也就是说，如下图左边栏的目录结构都需要你自己写，这样就很麻烦了，但是没关系，我找到了一个插件，直接使用这个插件就可以自动生成目录，基本完成80%的自动化操作。
【亲测免费】 开源精品推荐：Docsify —— 魔法般的文档网站生成器
gitblog_00388的博客
08-15 528
开源精品推荐：Docsify —— 魔法般的文档网站生成器 【免费下载链接】docsify 项目地址: https://gitcode.com/gh_mirrors/doc/docsify ...
Docsify使用指南，使用Typora+Docsify打造最强、最轻量级的个人&团队文档，及免费和开源且低成本文档工具
weixin_48290901的博客
11-09 6623
Docsify使用指南，使用Typora+Docsify打造最强、最轻量级的个人&团队文档，及免费和开源且低成本文档工具
docsify 使用说明
Kent
01-06 2903
docsify 使用说明 此处仅做简略说明，如需详细了解请参考docsify官网 推荐全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档。 npm i docsify-cli -g 初始化项目 如果想在项目的 ./docs 目录里写文档，直接通过 init 初始化项目。 docsify init ./docs !> 注意，线上文档无需初始化 开始写文档 初始化成功后，可以看到 ./docs 目录下创建的几个文件 index.html 入口文件 README.md 会
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值