GitBook 使用

我想把個人博客總結概括下，因而找到了 GitBook，多了一個寫博客地方，我把它作爲博客的備份。花了兩三天學習了 GitBook，這裏記錄下。此教程基於 Mac，Windows 也差很少適用。

安裝 Node.js

GitBook 是基於 Node.js 的命令行工具，下載安裝 Node.js。

檢測安裝是否成功：

$ node -v
v6.11.0複製代碼

Gitbook 安裝

Gitbook 是用 npm 安裝的，命令行：

$ npm install -g gitbook-cli複製代碼

檢測安裝是否成功：

$ gitbook -V
CLI version: 2.3.2
GitBook version: 3.2.3複製代碼

更新最新版本：

$ gitbook update複製代碼

卸載：

$ npm uninstall -g gitbook複製代碼

GitBook Editor

官方編輯器，下載 www.gitbook.com/editor ，大概如圖：

關於 GitBook Editor 怎麼使用和註冊 GitBook 等步驟較簡單，這裏略。

插件

book.json

新建一個 book.json 文件，能夠配置網站信息、在 plugins 和 pluginsConfig 字段添加插件等。

插件命名方式爲：

gitbook-plugin-X: 插件；

gitbook-theme-X: 主題。

能夠在 npmjs 或 GitBook 插件 直接搜索插件或者主題。
book.json 內容大概以下：

{
"gitbook": "3.2.3",
"title": "吳小龍同學",
"description": "http://wuxiaolong.me/",
"author": "WuXiaolong",
"language": "zh-hans",
"links": {
"sidebar": {

}
},
"plugins": ["github",
"donate",
"splitter",
"anchor-navigation-ex",
"-sharing",
"sharing-plus",
"-highlight",
"prism"
],
"pluginsConfig": {
"sharing": {
"douban": false,
"facebook": false,
"google": false,
"hatenaBookmark": false,
"instapaper": false,
"line": false,
"linkedin": false,
"messenger": false,
"pocket": false,
"qq": false,
"qzone": false,
"stumbleupon": false,
"twitter": false,
"viber": false,
"vk": false,
"weibo": false,
"whatsapp": false,
"all": [
"weibo","qq","qzone","google","douban"
]
},
"github": {
"url": "https://github.com/WuXiaolong"
},
"donate": {
"wechat": "http://7q5c2h.com1.z0.glb.clouddn.com/wechatpay.JPG",
"title": "",
"button": "賞",
"wechatText": "微信打賞"
},
"anchor-navigation-ex": {
"associatedWithSummary":false,
"showLevel":true,
"multipleH1": true,
"mode": "float",

"pageTop": {
"showLevelIcon": false,
"level1Icon": "fa fa-hand-o-right",
"level2Icon": "fa fa-hand-o-right",
"level3Icon": "fa fa-hand-o-right"
}
},
"theme-default": {
"showLevel": true
},
"fontsettings": {
"theme": "white",
"family": "serif",
"size": 2
},
"prism": {
"css": [
"prismjs/themes/prism-tomorrow.css"
]
}
}

}複製代碼

說明：

• github：添加 GitHub 圖標；
• Donate：添加讚揚按鈕；
• splitter：使側邊欄的寬度能夠自由調節；
• anchor-navigation-ex：添加Toc到側邊懸浮導航以及回到頂部按鈕；
• theme-default：將 showLevel 設爲 true， 就能夠顯示標題前面的數字索引，默認不顯示。

安裝插件

$ gitbook install ./複製代碼

不要忘記這步，根目錄 node_modules 文件下能看到安裝那些插件。

或單獨安裝插件:

$ npm install gitbook-plugin-anchor-navigation-ex --save複製代碼

默認插件

GitBook 默認帶有5個插件：

highlight

search

sharing

fontsettings

livereload

若是要去除自帶的插件，能夠在插件名稱前面加 -：

"plugins": [
"-search"
]複製代碼

若是想配置直接在 pluginsConfig 配置。

GitBook 輸出

本地預覽

進入你的 GitBook 書籍目錄，右擊 - 服務 - 新建位於文件夾位置的終端窗口，輸入命令行：

$ gitbook serve複製代碼

而後瀏覽器打開 http://localhost:4000 就能預覽了，control + c 中止。

輸出靜態網站

$ gitbook build複製代碼

以上都會在書籍目錄生成 _book，前者能實時預覽。

輸出 PDF 文件

下載 Calibre

生成 PDF 文件依賴於 ebook-convert，須要安裝 Calibre;

配置 Calibre 環境變量

如何配置環境變量參考這裏，在 .bash_profile 文件加入：

# Calibre
export PATH=/Applications/calibre.app/Contents/MacOS:$PATH複製代碼

更新剛配置的環境變量：

$ source .bash_profile複製代碼

查看全部的配置路徑：

$ echo $PATH複製代碼

輸出 PDF 文件

命令行：

$ gitbook pdf複製代碼

將在根目錄下生成了 book.pdf 文件

發佈

如圖，GitBook Editor - Book - Repository Settings，設置須要上傳的遠程 git，能夠是 GitBook，GitHub 等。

域名

設置 GitBook 域名

YourBook - SETTINGS - Domains，如圖：

在 Domain for content 填入本身的域名，由於我已經 Github page 中設置了 Hexo 博客，所以這裏用的子域名。

配置 DNS

DNS 以前用的dnspod:

解析類型選擇 CNAME，將域名指向一個域名，實現與被指向域名相同的訪問效果，主機記錄這裏值爲 book，也能夠其餘，這樣解析後的二級域名爲 book
.wuxiaolong.me；記錄值填寫服務商提供的域名，這裏填寫 www.gitbooks.io。

注：最後我仍是刪了，由於個人域名沒有備案，微信會有「非微信官方網頁」提示，蛋疼。

最後

一、建議使用 GitBook Editor 在線編輯，我本地編輯總是崩潰，不知道是他們軟件問題仍是我電腦問題，在線編輯還有個好處，插件不用下載；

二、遺留兩個問題沒有解決，如圖：

第一問題：這裏是自動生成的，我能改爲其餘地址嗎？ 已解決！

第二問題：發現沒，英文全是大寫，能寫什麼就顯示什麼嗎？

望知道的小夥伴告知下，多謝！

參考

• GitBook Document
• Mac 下 GitBook 的安裝與使用
• gitbook-use
• GitBook Clarity

知識星球

個人知識星球：更多分享只對你公開，￥99/永久。

公衆號

個人微信公衆號：吳小龍同窗，歡迎關注交流~

吳小龍同窗