0x00 效果展示

Gitbook + Typora ，我称之为 “神器”，不仅是因为他可以用来写文章，更在于它可以将你写的 Markdown 文章直接转换成 pdf，转成各种常用格式，甚至可以转换成网页直接发布到网上。

正好我的个人网站备案审核通过了，就利用 Gitbook + Typora 制作了一个小网站，挂在我的网站上。

示例一 旅游攻略 ：http://blog.smartcrane.club/QuNaer/ 示例二 个人笔记 ：http://blog.smartcrane.club/

个人感觉哈，这个Gitbook 的网页排版，用来看一些学习笔记，博客文章，电子书，真的是体验超棒。

喜欢写作的同学，可以用这个快速搭建一个自己的作品网站；

会爬虫的同学，可以定期爬一些博客文章，小说，新闻等等，足不出户天下尽在掌握。

哈哈哈哈哈。大家可以在此基础上，尽情发挥自己的聪明才智， 打造一个属于自己的个人网站。

0x01 环境搭建

我们需要提前准备两个工具，Gitbook 和 Typora。

1. GitBook

GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 来制作精美的电子书。（来自百度百科）

安装 GitBook 首先要安装 Node.js 环境。

下载对应版本的 Node.js 安装包之后，一路安装下去就可以了（到最后如果问要不要安装依赖的时候，也一并安装了）

真的超简单的，一点都不麻烦。

Gitbook 下载链接：https://nodejs.org/en/download/

安装好后，打开命令提示符（win+R，输入cmd，回车）

输入以下命令，安装 GitBook：

npm install -g gitbook-cli

然后就开始刷刷刷刷地安装了，安装完之后，可以运行 gitbook -V 命令来验证是否安装成功。

如果出现下面的结果，说明安装成功了。

CLI version: 2.3.2
GitBook version: 3.2.3

是不是很简单呢！

2. Typora

Typora 是一款所见即所得的 Markdown 格式文本编辑器，也就是把编辑区和预览区合二为一了。

其实目前 Markdown 编辑器有很多，大家挑选一款自己用的顺手的就好。

我选择 Typora 主要有两个原因，

一是它的界面很干净漂亮，赏心悦目；

二是它界面显示效果跟 gitbook 的网页界面布局很相似。

Typora 下载链接 ：https://typora.io/

上面是下载链接，安装过程没有什么特别的，正常安装就可以了。

另：

看到网上有人说有被墙，下载不下来的情况（反正我也没遇到过）

0x02  GitBook基本使用

在本地创建一个文件夹，比如我创建了 D:MyBooksNoteBook 文件夹，用来存放笔记文档。

打开 cmd 窗口，通过 cd 命令，转到创建好的文件夹路径下。

C:Userssmartcrane> d:
D:> cd MyBooks/NoteBook
D:MyBooksNoteBook>

然后在该文件夹目录下，执行命令：

D:MyBooksNoteBook> gitbook init

回车后会自动初始化这个文件夹，然后在文件夹中生成两个文件 README.md 和 SUMMARY.md 。

然后用 Typora 打开这两个md 文件，就可以自己编辑了。

• README.md 是首页，你可以随便写东西。

• SUMMARY.md 是目录，你可以在这里创建目录

这里编辑好目录之后，重新执行 gitbook init 命令，会根据目录中的路径和文件名，自动创建对应的文件和文件夹。

创建好之后，你同样可以继续编辑每一个文件的内容，这里就不说了，自由发挥。

当文件写好之后，可以用 gitbook 生成网页，在浏览器中预览效果

执行 gitbook serve 命令后，会启动一个 4000 端口，然后就可以通过 http://localhost:4000 地址在浏览器中查看了。

是不是很酷啊！

此外，gitbook 还有一个指令 gitbook build ，可以将这些 markdown 文章生成 html 网页，这样就可以直接部署到自己的服务器网站上啦，下面我来操作一下。

然后，在文件夹中就会生成一个 _book 的文件夹，把这个文件夹中的所有内容拷贝到自己的服务器网站上

然后大家就可以通过外网访问啦。

示例 个人笔记 ：http://blog.smartcrane.club/

0x03 GitBook 实战

上篇爬虫《Python 网络爬虫实战：去哪儿网旅游攻略图文爬取保存为 Markdown电子书》中，我们不是爬了很多很多的markdown格式的图文文章嘛。

接下来，我准备把爬到的这些文章，通过 gitbook 制作成一个网站，挂到自己的服务器上（仅供学习交流使用）

import os
 
def saveMarkdownFile(filename,content):
    with open("newdata/" + filename + ".md", w, encoding=utf-8) as f:
        f.write(content)
 
path = "./newdata/"
files = os.listdir(path)
str = ""
for filename in files:
    # 文件名中包含特殊字符时会导致 gitbook 解析错误
    newName = filename.replace("#", "").replace(")", "）").replace("(", "（")
    str += "* [%s](上海旅游攻略/%s)
"%(newName[0:-3],newName)
    # 同步修改文件名
    try:
        os.rename(path+filename,path+newName)
    except:
        print(newName)
 
saveMarkdownFile("Summary", str)

简单解释一下上面的代码：

1. 首先找到 Markdown 文章存放的路径，读取所有文章的列表。

2. 剔除文章标题名中的特殊字符，如 # （ ）等，避免在解析时出错。

3. 按照格式 [标题](链接) 生成文章的目录。

4. 剔除文件名中字符的同时，同步将文件重命名。

完成上面的工作之后，我们只需要

1. 把生成的 Summary.md 文件中的内容，拷贝到之前我们创建的 NoteBook 文件夹中的 SUMMARY.md 中。

这一步主要想节省手打目录的功夫。

2. 把目录中出现的文章，全部拷贝到之前创建的 NoteBook 文件夹中，对应的路径下。

依照上节讲的，执行 gitbook init 初始化

然后 gitbook serve 开启服务，在浏览器中预览效果

如果效果满意，就 gitbook build 生成网页，然后将 _book 文件夹中的网页资源上传至自己的服务器。

然后就可以通过外网访问啦。

示例 旅游攻略：http://blog.smartcrane.club/QuNaer/

0x04 你可能遇到的问题

1. 无法加载文件 C:UserssmartcraneAppDataRoaming pmgitbook.ps1，因为在此系统上禁止运行脚本。

我用 PowerShell 窗口执行 gitbook 命令时，出现了这个错误，但是使用 cmd 窗口执行的时候可以正常执行。

所以解决办法是，改用 cmd 执行即可。

如果你是嫌 cmd 窗口，用 cd 指令切换目录比较麻烦的话，可以在对应的文件夹目录下，按住 Shift 键，点击鼠标右键，选择 “在此处打开 PowerShell 窗口” ，然后在 PowerShell 窗口中运行 Start cmd 命令，即可打开 cmd 窗口。

注：这种命令行我也不是很熟练，如果有更好的方法，麻烦分享一下。

2. Error: ENOENT: no such file or directory, stat D:MyBooksNoteBook/_bookgitbookgitbook-plugin-livereloadplugin.js

如果在执行 gitbook serve 命令的时候，可能会出现这种报错。

找到 C:Userssmartcrane.gitbookversions3.2.3liboutputwebsite 目录下，打开 copyPluginAssets.js 文件。

修改其中第 67 行和第 112 行，将 confirm: true 改成 confirm: false 即可。

3. 没有通过 gitbook serve 开启服务，而是直接打开本地文件夹中的 index.html 文件时，无法正常跳转。

如果打开导出的 html 文件，走的是 file:// 协议，就会出现链接不能跳转的问题；

如果是通过 gitbook serve 打开的话，走的是 http:// 协议，就可以打开。