Gitbook installation and use

introduce

GitBook tutorial

Detailed record step by step to build their own electronic document notes

1. Environment building

See the notes for installing Node.js :juejin.cn/post/698541…

(1) Current installation version node -v v12.0.0 NPM -v 6.9.0 NPM install -g gitbook-cli version verification gitbook-cli -v cli version: 2.3.2 gitbook version: 3.2.3 (3) compiler selection: the following two are recommended (1) vscode (2) TyporaCopy the code

2. Create a directory and initialize it

Mkdir waws // Create project directory CD waws gitbook init // Initialize the directoryCopy the code

Initialization error reported

 TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Promise
Copy the code

The node version is too high. You can lower the NodeJS version

Instead of installing GitBook, use gitbook init in node.js

After initialization, two files are generated by default: summary. md and readme.md

3. Elaborate

1. SUMMARY. The md is

This file sets up the chapter directory. If we want to add the chapter directory for our creation, we can use the sumary.md file to divide the chapter directory. The file format is also relatively simple, for example

Enter the following code in the summary file and save

* [section 1: Lesson1](Section 1: Lesson1) * [第2: Lesson2](Chapter1/ lesson2.md) * [第3: Lesson3](Chapter1/ lesson3.md) * [第4: Lesson4](Chapter1/ lesson4.md) * [Chapter2](Chapter2/ readme.md) * [Chapter3](Chapter3/ readme.md) * [Chapter4](Chapter4/ readme.md)Copy the code

2. Preview the directory locally after it is created

Once you've edited the summary. md file, gitbook init will automatically generate the corresponding folders and files,Copy the code

After gitBook Serve is started, enter http://localhost: in the browser4000
Copy the code

** Note that you can create the article directory in advance, automatically generate the corresponding file by executing gitbook init, and then serve it in GitbookCopy the code

3. Test environment and release

Gitbook Build package compilation process: after successCopy the code

You can see the generated HTML file in the _book folder

Replace if(m) with if(false) in the generated theme.js to complete the jump

Gitbook build [current path] [output path] gitbook build [current path] Gitbook build./ doc is packaged into the doc folder below the current path by defaultCopy the code

4. Other common commands

1. Specified port number

 gitbook serve --port 9527
Copy the code

2. Redirects output compiled files

Gitbook build [current path]Copy the code

3. Packaging PDF

 gitbook pdf ./  ./myBook.pdf
Copy the code

Execution error:

InstallRequiredError: “ebook-convert” is not installed. Install it from Calibre: calibre-ebook.com

Solution: Download and install Calibre Application

Alternatively, install Pandoc in Typora

4. Extranet environments can be hosted directly in the Github repository

5. Book-json file description

Book. json is the configuration file for Gitbook, including the configuration file of the plug-in, which can enrich the functions of e-books

The plugin list

"plugins": ["-lunr", "-search", "search-pro", // remove the default search function, Add Chinese advanced search "back-to-top-button", // go back to top "chapter-fold", // navigation directory fold" expandable chapter-small ", // left chapter directory fold" code", // Add the line number "copy-code-button", // add the copy button" advanced-emoji", "splitter", // adjust the width of the sidebar "-sharing", "sharing-plus", Add "tbFed-pagefooter ", add bottom footer" donate",Copy the code

Gitbook-plugin-back-to-top-button returns to the top

 npm install gitbook-plugin-back-to-top-button
Copy the code

Gitbook-plugin-chapter-fold Navigation directory folding

 npm install gitbook-plugin-chapter-fold
Copy the code

Expandable – Chapters-small Left chapter catalog collapsible

 npm install gitbook-plugin-expandable-chapters-small
Copy the code

Gitbook-plugin-code Adds the line number to the code

 npm install gitbook-plugin-code
 "pluginsConfig": {
         "code": {
         "copyButtons": false
     }
   }
Copy the code

Gitbook-plugin-copy-code-button Code block copy button

 npm install gitbook-plugin-copy-code-button
Copy the code

Gitbook-plugin-search-pro Advanced search, support Chinese

 npm install gitbook-plugin-search-pro
Copy the code

Gitbook-plugin-advanced – Emoji supports emoji

 npm install gitbook-plugin-advanced-emoji
Copy the code

Gitbook-plugin-github Adds the Github icon in the upper right corner

 npm install gitbook-plugin-github
 "pluginsConfig": {
       "github": {
           "url": "https://github.com/zhangjikai"
       }
   }
Copy the code

Gitbook-plugin-splitter sidebar width is adjustable

 npm install gitbook-plugin-splitter
Copy the code

Gitbook-plugin-sharing-plus sharing, more than the default sharing function

 npm install gitbook-plugin-sharing-plus
Copy the code

Gitbook-plugin-tbfed-pagefooter footer, copyright information

 npm install gitbook-plugin-tbfed-pagefooter
Copy the code

NPM install gitbook-plugin-donate Tip add-in

 npm install gitbook-plugin-donate
Copy the code

NPM install gitbook-plugin-change_girls can automatically switch the background

 npm install gitbook-plugin-change_girls
Copy the code

6. Finally, attach my summary. md and book.json codes

# Summary * [preface](readme.md) * [vue.js](Chapter1/ readme.md) * [section 1: VUE](Chapter1/ VUE study Notes. Md) * [section 2: VUE VueRouter](Chapter1/VueRouter study Note.md) * [section 3: Vux](Chapter1/ VueRouter study Note.md) * [Section 4: Md) * [react.js](Chapter2/ readme.md) * [第 1: REACT](Chapter2/ react.md) * [第 2: REACT) (Chapter2/ react.md) ReactRouter](Chapter2/ReactRouter Study Notes. Md) * [Chapter2/Redux study Notes. Md) * [Chapter2/Redux study Notes. ReactHooks](Chapter2/ReactHooks Study Notes. Md) * [Section 4: Md) * [WebPack](Chapter3/ readme.md) * [第 1 章 : WebPack introduction](Chapter3/ webpack.md) * [第 2 章 : WebPack Introduction] WebPack Common Configuration](Chapter3/ Webpack.md) * [Section 3: WebPack Template](Chapter3/ Webpack.md) * [Section 4: WebPack Interview questions](Chapter3/ webpack.md) * [JAVASCRIPT](Chapter4/ readme.md) * [section 1: JAVASCRIPT](Chapter4/ re-learn JS note.md) * [Section 2: ES6](Chapter4/ES6 knowledge.md) * [Section 3: JS Principle](Chapter4/JS Principle, mechanism.md) * [Section 4: Md) * [html-css](Chapter5/ readme.md) * [第 1: Browser Knowledge](Chapter5/ browser knowledge.md) * [第 2: Browser knowledge](Chapter5/ browser knowledge.md) * [第 2: Browser knowledge] CSS Basics](Chapter5/ Browser knowledge.md) * [Section 3: CSS Basics](Chapter5/ browser knowledge.md) * [Section 4: SASS Knowledge](Chapter5/ SASS knowledge.md) * [Section 5: CSS Basics](Chapter5/ SASS knowledge.md) * [Section 5: CSS Basics] LESS basic knowledge](Chapter5/ LESS knowledge summary. Md) * [Section 6: Flex layout](Chapter5/Flex layout details. Md) * [Section 7: Responsive development](Chapter5/ responsive development. Md) * [Section 8: Md) * [NGINX](Chapter6/ readme.md) * [第 1: NGINX basics](Chapter6/ browser knowledge.md) * [第 2: NGINX basics] Md) * [NODE](Chapter7/ readme.md) * [Chapter7/ readme.md) Md) * [VSCODE](Chapter8/ readme.md) * [VSCODE](Chapter8/ readme.md) * Md) * [GITBOOK](Chapter9/ readme.md) * GitBook Introduction](Chapter9/ gitbook.md) * [LINUX](Chapter10/ readme.md) * [Chapter10/ readme.md)Copy the code

Above is my ebook documentation directory, and the installed utility plug-ins are as follows

{
   "title": "waws520"."description": "Knowledge map, sort out your own knowledge pattern."."author": "waws520"."language": "zh-hans"."link": {
      "sidebar": {
          "HOME": "https://juejin.cn/user/1390236459600743"}},"plugins": [
       "-lunr"."-search"."search-pro"."back-to-top-button"."chapter-fold"."expandable-chapters-small"."code"."copy-code-button"."advanced-emoji"."splitter"."-sharing"."sharing-plus"."tbfed-pagefooter"."donate"]."pluginsConfig": {
    "code": {
    "copyButtons": true
    },
    "github": {
        "url": "https://github.com/xxxx"
    },
    "tbfed-pagefooter": {
        "copyright":"Copyright &copy waws520.com 2021"."modify_label": "Revision date of this document:"."modify_format": "YYYY-MM-DD HH:mm:ss"
    },
    "donate": {
        "wechat": "./images/11.jpg"."alipay": "./images/22.jpg"."title": ""."button": "Reward"."alipayText": "Alipay Rewards"."wechatText": "Wechat Tip"
    },
    "change_girls" : {
        "time" : 10."urls" : [
            "girlUrl1"."girlUrl2"]},"sharing": {
        "douban": false,
        "facebook": false,
        "google": true,
        "hatenaBookmark": false,
        "instapaper": false,
        "line": true,
        "linkedin": true,
        "messenger": false,
        "pocket": false,
        "qq": false,
        "qzone": true,
        "stumbleupon": false,
        "twitter": false,
        "viber": false,
        "vk": false,
        "weibo": true,
        "whatsapp": false,
        "all": [
            "douban"."facebook"."google"."hatenaBookmark"."instapaper"."linkedin"."twitter"."weibo"."messenger"."qq"."qzone"."viber"."vk"."weibo"."pocket"."stumbleupon"."whatsapp"]}}}Copy the code

If there are images in our project, we need to create a folder of images, put them in this folder, and then reference them using relative paths

This is how to build the entire Gitbook.