Docsify快速搭建我的博客

日常写一些文档或者我的笔记时，Markdown 是个人第一个选择，由于它用起来真的很方便、简洁。那么今天要讲的 Docsify 是什么呢？

Docsify简介

Docsify 是一个动态生成文档网站的工具。不一样于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，全部转换工做都是在运行时进行。

这将很是实用，若是只是须要快速的搭建一个小型的文档网站，或者不想由于生成的一堆 .html 文件“污染” commit 记录，只须要建立一个 index.html 就能够开始写文档并且直接部署在 GitHub Pages。

docsify 中文文档

全局安装

安装脚手架工具 docsify-cli，安装过程当中较慢的能够切换 npm 源为 cnpm

$ npm i docsify-cli -g

Github 建立你的 Blog 项目

若是你正在用 Markdown 写一些 Blog 项目，那么也能够用你如今的项目，若是你没有，那么建议你在 Github 新建一个属于你的 Blog 项目，开始咱们接下来的学习

初始化文档

注意这里的文件名约定为 docs 也是官方推荐，请按照规则设置，不然发到 Github 可能会出现一些问题

$ docsify init docs

Initialization succeeded! Please run docsify serve docs

执行完以上命令 docs 文件目录下会生成如下 3 个文件：

• index.html：入口文件
• README.md：会作为主页内容渲染
• .nojekyll：用于阻止 GitHub Pages 会忽略掉下划线开头的文件

启动本地服务预览

docs 同级目录下执行如下命令，打开本地服务器，默认地址为：http://localhost:3000

$ docsify serve docs

Serving /Users/may/Nodejs-Roadmap/docs now.
Listening at http://localhost:3000

这里我以 Nodejs-Roadmap 项目作为介绍，如下为最终的效果，你也能够点击 https://www.nodejs.red/ 在线预览。

搭建博客

• 设置封面

设置咱们的封面图，须要两步，首先在 docs/index.html 文件中将设置 coverpage: true，以后建立 docs/_coverpage.md文件

docs/index.html

<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//unpkg.com/docsify"></script>

docs/_coverpage.md

<img width="180px" style="border-radius: 50%" bor src="https://nodejsred.oss-cn-shanghai.aliyuncs.com/nodejs_roadmap-logo.jpeg?x-oss-process=style/may">

# Node.js技术栈指南

- 本文档是做者从事 ```Node.js Developer``` 以来的学习历程，旨在为你们提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，若是本文能为您获得帮助，请给予支持！

[![stars](https://badgen.net/github/stars/Q-Angelo/Nodejs-Roadmap?icon=github&color=4ab8a1)](https://github.com/Q-Angelo/Nodejs-Roadmap) [![forks](https://badgen.net/github/forks/Q-Angelo/Nodejs-Roadmap?icon=github&color=4ab8a1)](https://github.com/Q-Angelo/Nodejs-Roadmap)

[GitHub](<https://github.com/Q-Angelo/Nodejs-Roadmap>)
[开始阅读](README.md)

• 定制导航栏

官方支持两种方式，能够在 HTML 里设置，可是连接要以 #/ 开头，另一种经过 Markdown 配置导航，咱们这里用的也是后者

首先配置 loadNavbar: true，以后建立 docs/_navbar.md文件.

docs/index.html

<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//unpkg.com/docsify"></script>

这里配置并非很复杂，根据缩进生成对应的目录结构，注意目录的跳转连接是当前 (docs) 目录下的文件

docs/_navbar.md

* Introduction
    * [简介](README.md)

* JavaScript
    * [基础](/javascript/base.md)
    * [This](/javascript/this.md)

...

以上示例生成效果，以下所示：

关于 docsify 定制化，能够看官方文档讲的也很详细 docsify 中文版，下面开始介绍如何将咱们的 blog 项目经过 Github Pages 进行在线预览

GithubPages预览

将咱们搭建的 Blog 托管到 Github，能够实时访问，在项目的 Settings 里开启 GitHub Pages 功能

选择 dcos 文件目录，以下所示：

浏览器输入 https://q-angelo.github.io/No... 便可访问，q-angelo 为您的用户名，Nodejs-Roadmap 为您的项目名称。

总结

看完本篇文章，若是你尚未用过 Docsify，但愿你能亲自实践下，能够用 Docsify 来创建本身的我的博客，我在写做《Node.js 技术栈》过程当中，当内容多了以后，对于文档的在线预览功能最终也选择了 Docsify，由于它用起来给个人感受真的很简洁，方便。

做者：五月君
连接：https://www.imooc.com/article...
来源：慕课网

阅读推荐

• 我的博客：https://www.nodejs.red
• 公众号：Nodejs技术栈