前段时间，我在互联网冲浪时候，发现了一个写作的工具组合 Gitbook + Typora，堪称神器。
安利到 Blink 和朋友圈之后，有一朋友表示很感兴趣，希望我简单出一个教程，介绍一下这套工具怎么使用。
好吧，安排！
0x00 效果展示
Gitbook + Typora ，我称之为 “神器”，不仅是因为他可以用来写文章，更在于它可以将你写的 Markdown 文章直接转换成 pdf，转成各种常用格式，甚至可以转换成网页直接发布到网上。
正好我的个人网站备案审核通过了，就利用 Gitbook + Typora 制作了一个小网站，挂在我的网站上。
欢迎大家参观。
示例一 旅游攻略 ：http://gitbook.smartcrane.tech
个人感觉哈，这个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/
上面是下载链接，安装过程没有什么特别的，正常安装就可以了。
另：
看到网上有人说有被墙，下载不下来的情况（反正我也没遇到过）
保险起见，我传了一份网盘（windows x64版）
链接: https://pan.baidu.com/s/1YdfgI97hLVY9AV5gsd97fQ 提取码: errm
0x02 GitBook基本使用
在本地创建一个文件夹，比如我创建了 D:\MyBooks\NoteBook 文件夹，用来存放笔记文档。
打开 cmd 窗口，通过 cd 命令，转到创建好的文件夹路径下。
C:\Users\smartcrane> d:
D:\> cd MyBooks/NoteBook
D:\MyBooks\NoteBook>
然后在该文件夹目录下，执行命令：
D:\MyBooks\NoteBook> gitbook init
回车后会自动初始化这个文件夹，然后在文件夹中生成两个文件 README.md 和 SUMMARY.md 。
然后用 Typora 打开这两个md 文件，就可以自己编辑了。
- SUMMARY.md 是目录，你可以在这里创建目录
这里编辑好目录之后，重新执行 gitbook init 命令，会根据目录中的路径和文件名，自动创建对应的文件和文件夹。
创建好之后，你同样可以继续编辑每一个文件的内容，这里就不说了，自由发挥。
当文件写好之后，可以用 gitbook 生成网页，在浏览器中预览效果
执行 gitbook serve 命令后，会启动一个 4000 端口，然后就可以通过 http://localhost:4000 地址在浏览器中查看了。
是不是很酷啊！
此外，gitbook 还有一个指令 gitbook build ，可以将这些 markdown 文章生成 html 网页，这样就可以直接部署到自己的服务器网站上啦，下面我来操作一下。
然后，在文件夹中就会生成一个 _book 的文件夹，把这个文件夹中的所有内容拷贝到自己的服务器网站上
然后大家就可以通过外网访问啦。
示例 个人笔记 ：http://blog.smartcrane.club/
(更新：上述网址 http://blog.smartcrane.club/ 改用作个人博客网站，示例地址更改为 http://gitbook.smartcrane.tech/shanghai/)
0x03 GitBook 实战
上篇爬虫《Python 网络爬虫实战：去哪儿网旅游攻略图文爬取保存为 Markdown电子书》中，我们不是爬了很多很多的markdown格式的图文文章嘛。
接下来，我准备把爬到的这些文章，通过 gitbook 制作成一个网站，挂到自己的服务器上（仅供学习交流使用）
import osdef saveMarkdownFile(filename,content):with open("newdata/" + filename + ".md", &＃39;w&＃39;, encoding=&＃39;utf-8&＃39;) 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)\n"%(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://gitbook.smartcrane.tech/shanghai/
0x04 你可能遇到的问题
1. 无法加载文件 C:\Users\smartcrane\AppData\Roaming\npm\gitbook.ps1，因为在此系统上禁止运行脚本。
我用 PowerShell 窗口执行 gitbook 命令时，出现了这个错误，但是使用 cmd 窗口执行的时候可以正常执行。
所以解决办法是，改用 cmd 执行即可。
如果你是嫌 cmd 窗口，用 cd 指令切换目录比较麻烦的话，可以在对应的文件夹目录下，按住 Shift 键，点击鼠标右键，选择 “在此处打开 PowerShell 窗口” ，然后在 PowerShell 窗口中运行 Start cmd 命令，即可打开 cmd 窗口。
注：这种命令行我也不是很熟练，如果有更好的方法，麻烦分享一下。
2. Error: ENOENT: no such file or directory, stat &＃39;D:\MyBooks\NoteBook\_book\gitbook\gitbook-plugin-livereload\plugin.js&＃39;
如果在执行 gitbook serve 命令的时候，可能会出现这种报错。
找到 C:\Users\smartcrane\.gitbook\versions\3.2.3\lib\output\website 目录下，打开 copyPluginAssets.js 文件。
修改其中第 67 行和第 112 行，将 confirm: true 改成 confirm: false 即可。
3. 没有通过 gitbook serve 开启服务，而是直接打开本地文件夹中的 index.html 文件时，无法正常跳转。
如果打开导出的 html 文件，走的是 file:// 协议，就会出现链接不能跳转的问题；
如果是通过 gitbook serve 打开的话，走的是 http:// 协议，就可以打开。
0x05 参考资料
【1】GitBook 从懵逼到入门
【2】Gitbook 使用文档
如果文章中有哪里没有讲明白，或者讲解有误的地方，欢迎在评论区批评指正，或者扫描下面的二维码，加我微信，大家一起学习交流，共同进步。
京公网安备 11010802041100号