这是我参与8月更文挑战的第7天,活动详情查看:8月更文挑战
前段时间,我在互联网冲浪时候,发现了一个写作的工具组合 Gitbook + Typora,堪称神器。
安利到 Blink 和朋友圈之后,有一朋友表示很感兴趣,希望我简单出一个教程,介绍一下这套工具怎么使用。
好吧,安排!
1. 效果展示
Gitbook
+ Typora
,我称之为 “神器”,不仅是因为他可以用来写文章,更在于它可以将你写的 Markdown
文章直接转换成 pdf,转成各种常用格式,甚至可以转换成网页直接发布到网上。
正好我的个人网站备案审核通过了,就利用 Gitbook + Typora
制作了一个小网站,挂在我的网站上。
欢迎大家参观。
示例一 旅游攻略 :gitbook.smartcrane.tech
个人感觉哈,这个Gitbook
的网页排版,用来看一些学习笔记,博客文章,电子书,真的是体验超棒。
喜欢写作的同学,可以用这个快速搭建一个自己的作品网站;
会爬虫的同学,可以定期爬一些博客文章,小说,新闻等等,足不出户天下尽在掌握。
哈哈哈哈哈。大家可以在此基础上,尽情发挥自己的聪明才智, 打造一个属于自己的个人网站。
2. 环境搭建
我们需要提前准备两个工具,Gitbook
和 Typora
。
2.1 GitBook
GitBook 是一个基于 Node.js
的命令行工具,可使用 Github/Git
和 Markdown
来制作精美的电子书。(来自百度百科)
安装 GitBook 首先要安装 Node.js 环境。
下载对应版本的 Node.js 安装包之后,一路安装下去就可以了(到最后如果问要不要安装依赖的时候,也一并安装了)
真的超简单的,一点都不麻烦。
Gitbook 下载链接: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.2 Typora
Typora 是一款 所见即所得
的 Markdown 格式文本编辑器,也就是把编辑区和预览区合二为一了。
其实目前 Markdown 编辑器有很多,大家挑选一款自己用的顺手的就好。
我选择 Typora 主要有两个原因,
一是它的界面很干净漂亮,赏心悦目;
二是它界面显示效果跟 gitbook 的网页界面布局很相似。
Typora 下载链接 :typora.io/
上面是下载链接,安装过程没有什么特别的,正常安装就可以了。
另:
看到网上有人说有被墙,下载不下来的情况(反正我也没遇到过)
保险起见,我传了一份网盘(windows x64版)
链接: pan.baidu.com/s/1YdfgI97h… 提取码: errm
3. 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
文件,就可以自己编辑了。
- README.md 是首页,你可以随便写东西。
- SUMMARY.md 是目录,你可以在这里创建目录
这里编辑好目录之后,重新执行 gitbook init 命令,会根据目录中的路径和文件名,自动创建对应的文件和文件夹。
创建好之后,你同样可以继续编辑每一个文件的内容,这里就不说了,自由发挥。
当文件写好之后,可以用 gitbook 生成网页,在浏览器中预览效果
执行 gitbook serve
命令后,会启动一个 4000 端口,然后就可以通过 http://localhost:4000 地址在浏览器中查看了。
是不是很酷啊!
此外,gitbook 还有一个指令 gitbook build
,可以将这些 markdown 文章生成 html
网页,这样就可以直接部署到自己的服务器网站上啦,下面我来操作一下。
然后,在文件夹中就会生成一个 _book 的文件夹,把这个文件夹中的所有内容拷贝到自己的服务器网站上
然后大家就可以通过外网访问啦。
示例 个人笔记 :gitbook.smartcrane.tech/shanghai/
4. 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)\n"%(newName[0:-3],newName)
# 同步修改文件名
try:
os.rename(path+filename,path+newName)
except:
print(newName)
saveMarkdownFile("Summary", str)
复制代码
简单解释一下上面的代码:
-
首先找到 Markdown 文章存放的路径,读取所有文章的列表。
-
剔除文章标题名中的特殊字符,如
#
(
)
等,避免在解析时出错。 -
按照格式
[标题](链接)
生成文章的目录。 -
剔除文件名中字符的同时,同步将文件重命名。
完成上面的工作之后,我们只需要
- 把生成的
Summary.md
文件中的内容,拷贝到之前我们创建的NoteBook
文件夹中的SUMMARY.md
中。
这一步主要想节省手打目录的功夫。
- 把目录中出现的文章,全部拷贝到之前创建的 NoteBook 文件夹中,对应的路径下。
依照上节讲的,执行 gitbook init
初始化
然后 gitbook serve
开启服务,在浏览器中预览效果
如果效果满意,就 gitbook build
生成网页,然后将 _book
文件夹中的网页资源上传至自己的服务器。
然后就可以通过外网访问啦。
5. 你可能遇到的问题
5.1 PowerShell 窗口执行 gitbook 命令时,出现错误
无法加载文件 C:\Users\smartcrane\AppData\Roaming\npm\gitbook.ps1,因为在此系统上禁止运行脚本。
我用 PowerShell 窗口执行 gitbook 命令时,出现了这个错误,但是使用 cmd 窗口执行的时候可以正常执行。
所以解决办法是,改用 cmd 执行即可。
如果你是嫌 cmd 窗口,用 cd 指令切换目录比较麻烦的话,可以先打开相应的文件夹,然后在顶部的地址栏里输入 cmd
,回车既可。
5.2 执行 gitbook serve 命令的时候,出现报错
如果在执行 gitbook serve
命令的时候,可能会出现这种报错。
Error: ENOENT: no such file or directory, stat ‘D:\MyBooks\NoteBook_book\gitbook\gitbook-plugin-livereload\plugin.js’
打开 C:\Users\smartcrane\.gitbook\versions\3.2.3\lib\output\website
目录下的 copyPluginAssets.js
文件。
修改其中第 67
行和第 112
行,将 confirm: true
改成 confirm: false
即可。
5.3 直接打开本地 index.html 文件时,链接无法正常跳转
如果直接打开导出的 .html
文件,走的是 file://
协议,就会出现链接不能跳转的问题;
如果是通过 gitbook serve
打开的话,走的是 http://
协议,就可以打开。
6. 参考资料
【2】Gitbook 使用文档
如果文章中有哪里没有讲明白,或者讲解有误的地方,欢迎在评论区批评指正,或者扫描下面的二维码,加我微信,大家一起学习交流,共同进步。