Home » 项目 » 【巩固】Docsify 与 Github 搭建仓库同步 Markdown 知识库

【巩固】Docsify 与 Github 搭建仓库同步 Markdown 知识库

发布于 March 31, 2022 项目

序曲

Wikitten 于 2019 年停更,令我印象最深刻的一点就是直接读取 Markdown 转换成 HTML/PHP,并且有清晰的结构目录和全局搜索。可能是版本没跟上的原因,PHP 8.0 跑 Wikitten 的时候总是有一些Bug以及问题,需要转换成 PHP7.4 才能正常使用。

这两天闲的无聊搞了一台性价比很不错的机器,正好去知乎搜索了下,发现了 Docsify,一个基于 node.js 的知识库。整体风格大方简洁,洁面干净没有一点多余的元素,一眼相中。

搭建

准备

  • 干净系统
  • 有效源
  • Node.js 与 npm

安装

npm i docsify-cli -g

npm 安装 docsify-cli

docsify init ./docs

初始化 Docsify 目录到 ./docs 路径

如果提示未知命令,则 定义PATH 或 找到根目录下的软体后ln到 /usr/bin

screen -S docsify
docsify serve ./docs

创建名为 Docsify 的会话并在 ./docs 路径运行 Docsify

编辑

<!-- /项目根目录/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      basePath: '/gitlib/',
      loadNavbar: 'navbar.md',
      loadSidebar: 'sidebar.md',
      subMaxLevel: 5,
      homepage: 'README.md'
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

Docsify 客制化在 <script>window.$docsify = {}</script> 中设定,其中:

basePath: '/目录'
# 自定文件根目录
loadNavbar: 'nav.md'
# 自定顶部菜单
loadSidebar: 'side.md'
# 自定边栏
homepage: 'README.md'
# 自定主页
subMaxLevel: 5
# 边栏阶级划分上限

需要注意的是,如果定义了 basePath ,则下方的自定都将根据 basePath 生效。如下,loadNavbar 的真实路径其实是 /gitlib/navbar.mdloadSidebar 的真实路径其实是 /gitlib/sidebar.md

basePath: '/gitlib/',
loadNavbar: 'navbar.md',
loadSidebar: 'sidebar.md'

更多自定变量,参考 Docsify Github

Github 拉取文档

使用 Github 是为了方便更新,在移动端 commit 到仓库后可以直接在 Docsify 的机器上 pull 下来直接部署,一条命令即可,非常方便。如要搭配 Github 使用,建议将包括 homepage.mdnavbar.md 在内的所有文档归置于一个文件夹中,方便创建远程仓库。

mkdir gitlib
cd gitlib
git init

使用 git init 初始化 /gitlab,该文件夹需要于 index.html 的同级目录创建。

git remote add origin [email protected]:abcdefg/abcde
git pull

关联远程仓库到目录下并拉取远程仓库的源码。第一次 remote add 后更新本地仓库无需再使用,直接 git pull 即可。remote 的地址可在 Github 中找到。

总结

后续发布文章的工作流程为:

  1. 在开发者移动端编写页面
  2. Markdown文件储存到移动端的远程仓库
  3. 移动端 commit 后 push 到源
  4. Docsify端拉取