GitBook安装及使用——使用 Markdown 创建你自己的博客网站和电子书

前言

GitBook是一个命令行工具，用于使用 Markdown 构建漂亮的博客网站、电子书籍，相比于 VuePress、docusaurus 等工具，它更简洁，用起来也更方便。

例如：JavaFX 前言

这个博客网站就是使用 GitBook 生成的，你只需要使用 Markdown 来书写文章内容，其他的 GitBook 帮你搞定。

另外关于 GitBook 的其他信息可参考 github 地址 ： gitbook

一、依赖环境

使用 gitbook ， 需要先安装 Node.js ，且版本不能太高，否则后面安装过程会报错，这里推荐 10.24.1 版本。

如果你已经安装了高版本的 Node.js 要先卸载，然后安装低版本的，可以去官网 下载Node.js 10.24.1 版本，参考 Node.js安装与配置 进行安装；

或者卸载后使用 nvm 安装切换多个 Node.js 版本。

二、gitbook安装使用

1.安装 gitbook-cli

npm install gitbook-cli -g

2.安装 gitbook

执行下面的命令进行安装 gitbook

gitbook -V

安装速度比较慢，等上个几分钟，不出意外就安装成功了。

如果出现下面的报错，说明 Node.js 版本太高，需要根据上面提到的降低 Node.js 版本，或使用 nvm 安装低版本 Node.js

CLI version: 2.3.2
Installing GitBook 3.2.3
E:\nodejs\node_global\node_modules\gitbook-cli\node_modules\npm\node_modules\graceful-fs\polyfills.js:287
      if (cb) cb.apply(this, arguments)
                 ^

TypeError: cb.apply is not a function
    at E:\nodejs\node_global\node_modules\gitbook-cli\node_modules\npm\node_modules\graceful-fs\polyfills.js:287:18
    at FSReqCallback.oncomplete (node:fs:200:5)

3.Gitbook初始化

新建一个文件夹如 myBook，命令行中使用 cd 命令进入到该文件夹下，在该文件夹下执行下面的命令进行初始化：

gitbook init

会自动在目录中生成两个文件，

• SUMMARY.md ：所有文章的列表目录
• README.md ：说明文件

4.创建你的文章

我这里新建了两个文件夹。一个用来存放 java 相关的 Markdown 文章，一个用来存放 python 相关的 Markdown 文章。

目录结构如下：

└─ myBook
    ├─ java 
    │    ├─ socketAndNetty.md
	│    └─ stream.md
    ├─ python
    │    ├─ JSON.md
    │    ├─ openpyxl.md
	│    └─ spider.md
    ├─ README.md
    └─ SUMMARY.md
  

5.修改 SUMMARY.md 和 README.md

SUMMARY.md

# Summary

* [介绍](README.md)
* [java](README.md)
	* [socket和Netty使用](java/socketAndNetty.md)
	* [stream.md使用](java/stream.md)
* [python](README.md)
	* [JSON格式转换](python/JSON.md)
	* [Excel处理](python/openpyxl.md)
	* [爬虫](python/spider.md)

README.md

# 介绍
你好,欢迎来到我的博客，这里主要是 java 和 python 相关的教程 ━(*｀∀´*)ノ亻!

6.编译生成静态网页

执行下面的命令，将会在 myBook 目录下生成一个_book文件夹，这就是我们的一个静态站点

gitbook build

7.运行以便在浏览器预览

执行下面的命令：

gitbook serve

会运行一个服务器, 通过浏览器访问 http://localhost:4000/ 便可以预览博客

8.运行效果

三、使用插件

gitbook 自带了一些插件，比如在上面效果图里左上角的搜索框、右上角的分享图标等，关于自带插件的使用和关闭可参考这篇文章：Gitbook插件

此外我们还可以安装其他插件进行使用。

1.新建 book.json 文件

在项目根路径下新建 book.json 文件，用于配置插件

2.配置插件

常见的插件可参考下面几篇文章在 book.json 中进行配置：
gtibook 插件侧边导航、推荐12个实用的gitbook插件、gitbook常用的插件、Gitbook插件的配置和使用详解、gitbook部署网站

下面是我的 book.json 文件的配置：

{
    "language" : "zh-hans",
    "structure": {
        "readme": "README.md"
    },
    "plugins": [
        "-lunr",
		"-sharing",
        "-search",
        "search-pro",
		"sidebar-style",
		"code",
		"splitter",
		"expandable-chapters",
		"anchor-navigation-ex",
		"-highlight",
		"prism", 
		"popup"
    ],
    "pluginsConfig": {
		 "sidebar-style": {
            "title": "JAVA和Python教程",
            "author": "西凉"
        }
    }
}

3.安装插件

执行下面的命令进行安装插件：

gitbook install

或者，你也可以使用 npm install gitbook-plugin-插件名 命令分别去安装上面 book.json 里配置的插件，而且速度也更快。例如，安装 book.json 里配置的anchor-navigation-ex 插件可以使用下面的命令安装：

npm i gitbook-plugin-anchor-navigation-ex

其他说明：

(1) 关于 gitbook-plugin-prism

上面配置文件中配置了 gitbook-plugin-prism代码块高亮插件，
安装插件后，若不想使用默认的高亮背景，可更换其主题颜色，可在 node_modules/prismjs/themes/目录下可进行选择主题，然后可在book.json 配置文件设置,
例如 ：

"pluginsConfig": {
  "prism": {
    "css": [
       "prismjs/themes/prism-solarizedlight.css"
    ]
  }
}

(2) 内容铺满

如果你想把文章内容铺满，即让文章内容与左边和右边间距小一些，可在 ‘_book/gitbook/style.css’ 文件中搜索 page-inner ，将里面的 max-width:800px 修改 max-width:1300px

下面是铺满的效果：

4.效果

使用命令 gitbook serve 启动服务，查看效果