使用Docsify构建Markdown文档和私人知识库，并实现一键同步-Tinsur Blog

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

准备工作

首先需要在本地windows电脑安装下列环境：

安装Node.js：https://nodejs.org/zh-cn 用于本地网页预览

其他可选，可提高写作体验：

Typora 优雅的Markdown编辑器
VsCode 便于后面编辑inde.html

霍格沃茨环境，没有可能会导致无法拉取代码：

这个自行解决（bushi）

开始安装

在你需要安装的地方打开cmd或PowerShell，输入命令：

npm i docsify-cli -g

成功后输入下面的命令初始化docsify：

docsify init ./docs

接着你会发现你打开cmd或PowerShell的文件夹下面出现了docs文件夹，即为初始化成功。

然后打开docs文件夹，使用Typora或者其他编辑器打开README.md，这个就是首页显示的文档，可进行修改：

docs文件夹下各种文件的作用如下，没有则自行新建：

作用	文件
入口文件	index.html
封面配置	_coverpage.md
侧边栏配置	_sidebar.md
导航栏配置	_navbar.md
主页显示内容	README.md
浏览器图标	favicon.ico

打开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 -->

* <a href="https://www.tinsur.cn/" target="_self">返回博客</a>
* <a href="https://note.tinsur.cn/" target="_self">笔记主页</a>

输入以下代码开启本地预览：

docsify serve docs

浏览器输入localhost:3000即可访问效果

自动同步

在Gitee或github上创建一个仓库，将本地docs文件夹上传到仓库中。

在宝塔新建一个静态站点，使用宝塔webhook插件即可完成每次提交到远程仓库，服务器均从仓库拉取全部文件到本地。

WebHook命令如下：

#!/bin/bash
WEB_PATH="/www/wwwroot/这里改成你的域名"
LOG_FILE="/tmp/hook_error.log"
cd $WEB_PATH

# 执行命令，出错则追加日志
git -c safe.directory="*" fetch origin master 2>> $LOG_FILE
git -c safe.directory="*" reset --hard origin/master 2>> $LOG_FILE
chown -R www:www $WEB_PATH

拉取前应该使用Git先绑定好仓库地址

如有纰漏请使用AI解决~

THE END

折腾
# docsify