Omfg 书籍现在有了技术栈：我是如何利用网络技术进行书籍排版和印刷的

标题有点怪，我只是想引用一下基茨的话：

几个月前，也就是 2019 年 4 月，我出版了一本关于 React 的书。这是一本技术书籍。这么说，是因为它在很多方面都体现了技术性。当然，它的内容完全围绕 React 展开，讲解了 React 的工作原理，以及如何使用 React 构建组件和应用程序。从这个意义上讲，它和其他技术书籍一样。

更有趣的是，它是一本技术书籍的第二个方面：即它的制作方式。

写作阶段

我使用了gitbook.io新版本的早期版本，因为它主要用于技术文章和文本，比如文档或……书籍。至少从它的名字来看，你可能会这么认为。

结果证明，虽然 Gitbook 的确非常适合以简洁美观的方式编写全面的文档，但它并非真正用于撰写书籍。在我撰写这本书的时候，甚至还没有办法将 Gitbook 导出为 PDF 或任何其他格式，例如 ePub（而且我不确定现在是否有官方方法）。他们的做法是发布一个设计精美的 HTML 版本，该版本完全以 Markdown 文件的形式存储在 GitHub 上，并进行了一些自定义增强。

直到我写了大约 120 页之后，我才知道把 Gitbook 变成一本真正的书有多难。我也不想再用 Google Docs 或 Word 来写作，因为它仍然是一本技术书籍，有很多代码示例，而这些示例在 Word 文档中看起来并不好。

有趣的部分

于是，我做了开发者在有更重要的事情要做时会做的事：我拖延了一段时间，围绕我的书构建了自己的工具集和技术栈。

我克隆了本书的 GitHub 代码库。我安装了Showdown和 Showdown Highlight 插件，将 Markdown 源文件转换为 HTML，并添加了美观的代码示例。我甚至使用了Prettier来自动格式化代码块中的代码示例！然后，我将所有转换后的文件合并成一个巨大的 HTML 文件。

然后我添加了Puppeteer。这让我能够非常轻松地将之前转换成 HTML 的 Markdown 文件再转换成 PDF。由于我使用 HTML 作为转换源格式，因此我可以使用 CSS 来设置整本书的样式！Puppeteer 在将 HTML 文件转换为 PDF 方面表现出色，并且对 CSS 打印功能的支持也相当不错（当然，有时好，有时差）。这样，我就可以按照自己的喜好来布局和设置 PDF（之后我把它发给了印刷厂！）。

对于 ePub 版本，我决定使用功能强大的Pandoc。Pandoc可以将多种不同的文本格式（Docx、HTML、Markdown 等）转换为 ePub 等其他格式。为 ePub 编写 CSS 感觉有点像制作电子邮件模板。其实最好不要过度自定义，因为你无法保证 ePub 在每个客户端上的显示效果都完全符合预期。所以我只使用了必要的少量自定义 CSS。

技巧和注意事项

整个过程有点棘手，需要一些技巧（一如既往，是吧？），而且还有一些需要注意的地方。例如，我无法在 PDF 的目录中添加页码，因为在生成目录时，我不知道页码，页码会在最终的 PDF 转换步骤中由 Puppeteer 自动添加。

CSSorphans和widows属性似乎也无法正常工作，或者至少没有达到我的预期效果。而且我的感觉是，break-*属性有时还会导致一些意想不到的行为。虽然不太美观，但对我来说可以忽略不计。

总的来说，我对结果非常满意：一本书，在我的网页浏览器中编写，以 Markdown 格式存储在 GitHub 上，并完全基于网络技术转换成真正的印刷书籍！

这段代码还有些粗糙，我一直没怎么清理过，但如果你有兴趣复现它，或者想把自己的 Gitbook 转换成格式美观的 PDF，可以在 GitHub 上找到代码：https://github.com/manuelbieh/gitbook-pdf-converter

以下是最终效果的简要预览：