gitbook 入門教程之快速體驗

雪之夢技術驛站發表於2019-04-01

本文主要介紹三種使用 gitbook 的方式,分別是 gitbook 命令列工具,Gitbook Editor 官方編輯器和 gitbook.com 官網.

總體來說,三種途徑適合各自不同的人群,找到適合自己的方式就好,基本操作流程都是一樣的.

  • 命令列工具更適合具備程式設計經驗開發者,具有簡單高效易整合等特點.
  • 編輯器更適合無任何程式設計經驗的文學創作者,不熟悉 markdown 語法,不熟悉 git 工作流,這種情況下也推薦使用圖形化操作的編輯器.
  • 官網適合想要快速體驗 gitbook 效果的萌新,只有覺得物超所值才能有動力搭建 gitbook 開發環境,不是嗎?

當然,如果你想訪問官網的話,你可能需要學會科學上網,網址見文章結尾.

gitbook 命令列

首先需要建立存放書籍的目錄,然後對該目錄進行初始化,最後啟動本地服務即可體驗效果.

初始化專案

語法格式: gitbook init

如果是空目錄會自動建立 README.mdSUMMARY.md 兩個檔案,當然也可以手動建立再初始化.

示例:

# 建立 `gitbook` 演示專案
$ mkdir gitbook-demo

# 初始化專案
$ gitbook init
warn: no summary file in this book 
info: create README.md 
info: create SUMMARY.md 
info: initialization is finished 

# 當前目錄結構
$ tree 
.
├── README.md
└── SUMMARY.md

0 directories, 2 files
$ 
複製程式碼

gitbook init 命令可能會自動生成 README.mdSUMMARY.md 兩個檔案,如已存在則更新.

執行專案

語法格式: gitbook serve

將初始化後的專案啟動成為一個本地服務,我們可以直接在瀏覽器訪問專案,預覽書籍效果.

示例:

# 啟動本地伺服器
$ gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 7 plugins are installed 
info: loading plugin "livereload"... OK 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 1 pages 
info: found 0 asset files 
info: >> generation finished with success in 1.2s ! 
複製程式碼

gitbook-serve-preview.png

如果要停止伺服器,只需同時按住 CTRL+C 即可,現在再看一下 gitbook-demo 目錄結構.

$ tree
.
├── README.md
├── SUMMARY.md
└── _book
    ├── gitbook
    │   ├── fonts
    │   │   └── fontawesome
    │   │       ├── FontAwesome.otf
    │   │       ├── fontawesome-webfont.eot
    │   │       ├── fontawesome-webfont.svg
    │   │       ├── fontawesome-webfont.ttf
    │   │       ├── fontawesome-webfont.woff
    │   │       └── fontawesome-webfont.woff2
    │   ├── gitbook-plugin-fontsettings
    │   │   ├── fontsettings.js
    │   │   └── website.css
    │   ├── gitbook-plugin-highlight
    │   │   ├── ebook.css
    │   │   └── website.css
    │   ├── gitbook-plugin-livereload
    │   │   └── plugin.js
    │   ├── gitbook-plugin-lunr
    │   │   ├── lunr.min.js
    │   │   └── search-lunr.js
    │   ├── gitbook-plugin-search
    │   │   ├── lunr.min.js
    │   │   ├── search-engine.js
    │   │   ├── search.css
    │   │   └── search.js
    │   ├── gitbook-plugin-sharing
    │   │   └── buttons.js
    │   ├── gitbook.js
    │   ├── images
    │   │   ├── apple-touch-icon-precomposed-152.png
    │   │   └── favicon.ico
    │   ├── style.css
    │   └── theme.js
    ├── index.html
    └── search_index.json

11 directories, 27 files
$ 
複製程式碼

gitbook serve 命令可能會自動生成 _book 目錄,如已存在則更新.

gitbook-serve.gif

gitbook editor 編輯器

下載 gitbook editor 並安裝,如果下載遇到困難,可以找我來幫忙喲!

gitbook-editor-welcome.png

如果你沒有梯子,可以暫不登入(Do that Later),只不過無法與 gitbook.com 保持同步.

更改圖書路徑

更改預設圖書存放位置(Gitbook Editor => Change Library Path...),以後圖書目錄都在該目錄下,比如設定的是 .../gitbook-editor/ 圖書目錄.

gitbook-editor-library-preview.png

gitbook-editor-library-chose.png

新建圖書

新建圖書專案,名字仍然是 gitbook-demo,這樣方便比較和命令列建立的 gitbook-demo 區別.

gitbook-editor-demo-preview.png

圖形化操作介面總體來說還是很容易上手的,自己好好研究一下即可,這裡僅僅演示預設效果.

啟動專案

現在先找到新建圖書的具體目錄,然後再啟動本地伺服器,同樣地,我們在瀏覽器中體驗電子書效果.

圖書專案路徑: /workspace/gitbook-editor/Import/gitbook-demo,其中 /workspace/gitbook-editor/ 是上一步更改的圖書路徑.

# 啟動本地伺服器
$ gitbook serve
複製程式碼

這裡不再需要執行 gitbook init 命令了,因為已經建立過 README.mdSUMMARY.md 這兩個檔案.

gitbook-editor-serve-preview.png

Gitbook Editor 編輯器新建的圖書專案和 gitbook-cli 建立的圖書專案本質上並沒有什麼不同,只不過編輯器整合了常用功能而已!

gitbook.com 網站

由於受網路因素所限,暫時不分享這部分知識了,簡單來說就是線上編輯併發布電子書,這一點和 github 的程式碼託管服務類似.

小結

  • 初始化專案 : gitbook init
  • 啟動專案 : gitbook serve
  • 預設訪問地址: http://localhost:4000

相關文章