如何使用 Docsify 和 GitHub Pages 创建一个文档网站

使用 Docsify 创建文档网页并发布到 GitHub Pages 上。

如何使用 Docsify 和 GitHub Pages 创建一个文档网站-1

文档是帮助用户使用开源项目一个重要部分,但它并不总是开发人员的首要任务,因为他们可能更关注的是使他们的应用程序更好,而不是帮助人们使用它。对开发者来说,这就是为什么让发布文档变得更容易是如此有价值的原因。在本教程中,我将向你展示一个这样做的方式:将 Docsify 文档生成器与 GitHub Pages 结合起来。

默认情况下,GitHub Pages 会提示用户使用 Jekyll,这是一个支持 HTML、CSS 和其它网页技术的静态网站生成器。Jekyll 可以从以 Markdown 格式编码的文档文件中生成一个静态网站,GitHub 会自动识别它们的 .md.markdown 扩展名。虽然这种设置很好,但我想尝试一下其他的东西。

幸运的是,GitHub Pages 支持 HTML 文件,这意味着你可以使用其他网站生成工具(比如 Docsify)在这个平台上创建一个网站。Docsify 是一个采用 MIT 许可证的开源项目,其具有可以让你在 GitHub Pages 上轻松创建一个有吸引力的、先进的文档网站的功能。

如何使用 Docsify 和 GitHub Pages 创建一个文档网站-2

开始使用 Docsify

安装 Docsify 有两种方法:

  • 通过 NPM 安装 Docsify 的命令行界面(CLI)。
  • 手动编写自己的 index.html
  • Docsify 推荐使用 NPM 方式,但我将使用第二种方案。如果你想使用 NPM,请按照快速入门指南中的说明进行操作。

    从 GitHub 下载示例内容

    我已经在该项目的 GitHub 页面上发布了这个例子的源代码。你可以单独下载这些文件,也可以通过以下方式克隆这个存储库。

    git clone https://github.com/bryantson/OpensourceDotComDemos
    

    然后 cd 进入 DocsifyDemo 目录。

    我将在下面为你介绍这些代码,它们克隆自我的示例存储库中,这样你就可以理解如何修改 Docsify。如果你愿意,你也可以从头开始创建一个新的 index.html 文件,就像 Docsify 文档中的的示例一样:

    
    
    

    探索 Docsify 如何工作

    如果你克隆了我的 GitHub 存储库,并切换到 DocsifyDemo 目录下,你应该看到这样的文件结构:

    如何使用 Docsify 和 GitHub Pages 创建一个文档网站-3

    文件/文件夹名称 内容
    index.html 主要的 Docsify 初始化文件,也是最重要的文件
    _sidebar.md 生成导航
    README.md 你的文档根目录下的默认 Markdown 文件
    images 包含了 README.md 中的示例 .jpg 图片
    其它目录和文件 包含可导航的 Markdown 文件

    index.html 是 Docsify 可以工作的唯一要求。打开该文件,你可以查看其内容:

    
    
      Docsify Demo
    
    

    这本质上只是一个普通的 HTML 文件,但看看这两行:

    
    ... 一些其它内容 ...
    
    

    这些行使用内容交付网络(CDN)的 URL 来提供 CSS 和 JavaScript 脚本,以将网站转化为 Docsify 网站。只要你包含这些行,你就可以把你的普通 GitHub 页面变成 Docsify 页面。

    标签后的第一行指定了要渲染的内容:

    
    

    Docsify 使用单页应用(SPA)的方式来渲染请求的页面,而不是刷新一个全新的页面。

    最后,看看