GitBook - Quickly build a blog that can be left a message

Create by jsliang on 2019-05-20 14:43:41

Recently revised in 2019-05-22 18:01:09

This article will show you how to install GitBook, start the GitBook service, configure GitBook, and eventually deploy to GitHub Pages or to a personal cloud server.

You guys can go if you likeJsliang document libraryGive jsliang a star, thank you

Hello guys, due to jsliang’s refactoring of the document library, some links in this article may be broken, and Jsliang lacks the energy to maintain the old articles on the Nuggets side. Sorry about that. If you need to get the latest article, please click on the GitHub address above and go to the document library to view the adjusted article.

Below is the final result, welcome to comment ~

LiangJunrong.github.io

A directory

What’s the difference between a free front end and a salted fish

directory
A directory
The preface
Three GitBook common instructions
Four GitBook plug-in configuration
Five Gitbooks are packaged and deployed
Six summarize

The preface

Returns the directory

Because I like to use MarkDown to write documents, I inadvertently exposed my “advantages” of using MarkDown at work, so I was arrested last Sunday (2019-05-19) and asked to convert the company WIKI into a GitBook.

Back to rent their own play, said deeply attracted, this is also too easy to use!

So here is amway to friends, everyone happy.

Three GitBook common instructions

Returns the directory

Install GitBook:npm i gitbook-cli -g
Initialize the GitBook project:gitbook init
Install GitBook dependencies:gitbook install
Enable the GitBook service:gitbook serve
Package the GitBook project:gitbook build
GitBook Command line view:gitbook -help
GitBook version view:gitbook -V

First, we configure GitBook for the computer. In the terminal directly type: NPM I GitBook -cli -g, the computer will configure GitBook.

Since Mac may have permission restrictions, sudo NPM I gitbook-cli -g is required

Then, find an empty folder and initialize a GitBook project: GitBook init. The directory will generate a readme. md content file and a summary. md directory file.

- GitBook
 - README.md
 - SUMMARY.md
Copy the code

The readme. md # number indicates a level 1 heading, and you can see the MarkDown syntax for details

# Introduction


Copy the code

SUMMARY. Md [link](link address) represents the jump link, which means GitBook will automatically generate the left menu bar table of contents for you based on your SUMMARY

# Summary

* [Introduction] (README.md)


Copy the code

Finally, we can start a localhost:4000 service by entering gitbook serve in the terminal. Please enter http://localhost:4000 in the browser to access the service.

Four GitBook plug-in configuration

Returns the directory

How can a GitBook with only a search function attract jsliang? Plugin configuration is the core of GitBook!!

Let’s start configuring the GitBook plug-in.

First, add a book.json file to the directory:

- GitBook
 - README.md
 - SUMMARY.md
 - book.json
Copy the code

Next, let’s configure book.json:

book.json

{
  "title": "Jsliang document library"."author": "Liang junrong - jsliang"."description": "Jsliang document library. It contains all the front-end articles written by me, such as Vue, React, ECharts, wechat mini program, etc..."."language": "zh-hans"."styles": {
    "website": "./public-repertory/css/gitbook-configure.css"
  },
  "plugins": [
    "theme-comscore"."prism"."-highlight"."copy-code-button"."search-pro"."-search"."-lunr"."expandable-chapters"."splitter"."-sharing"."github-buttons"."donate"."tbfed-pagefooter"."baidu-tongji"."anchor-navigation-ex"]."pluginsConfig": {
    "github-buttons": {
      "buttons": [{"user": "LiangJunrong"."repo": "document-library"."type": "star"."count": true."size": "small"
        }, 
        {
          "user": "LiangJunrong"."width": "160"."type": "follow"."count": true."size": "small"}},"donate": {
      "button": "Exceptional"."alipayText": "Alipay Rewards"."wechatText": "Wechat Tip"."alipay": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.jpg?raw=true"."wechat": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.png?raw=true"
    },
    "prism": {
      "css": [
        "prismjs/themes/prism-solarizedlight.css"]."lang": {
        "shell": "bash"}},"tbfed-pagefooter": {
      "copyright":"Copyright &copy jsliang.top 2019"."modify_label": "Revision date of this document:"."modify_format": "YYYY-MM-DD HH:mm:ss"
    },
    "baidu-tongji": {
      "token": "55e7dfe47f4dc1c018d4042fdfa62565"
    },
    "anchor-navigation-ex": {
      "showLevel": false}}}Copy the code

Finally, we will install the plugins configured in book.json: gitbook Install, copy the contents of jsliang’s document library, modify summary. md, and restart the project: Gitbook Serve.

Of course, this requires you to configure the summary. md file, but this should not be a problem for you.

4.1 the book. The json

Returns the directory

Now, let’s look at what book.json means:

title: Website title
author: Website author
description: Website function description
language: Language used on the site
styles: additional stylesheets for site configuration
plugins: plugins used by websites
pluginsConfig: Additional configuration of the plug-in used by the site

Let’s focus on styles and plugins.

4.2 gitbook – styles

Returns the directory

In some cases, GitBook comes with styles that you don’t need. For example, the sidebar is supported by GitBook. You can hide it by setting CSS:

.gitbook-link {
  display: none ! important;
}
.summary .divider {
  display: none ! important;
}
Copy the code

4.3 gitbook – plugins

Returns the directory

Plugins are also known as plugins. Some plugins require users to decide which functions they need to use, so they need to configure pluginsConfig.

Let’s start with the plugins list and explain the functionality one by one:

Plugin 1 – theme-comscore

Theme -comscore: Adds a nice style to the GitBook, which makes Table forms and so on look nice.

Configuration method

"plugins": [
  "theme-comscore"
]
Copy the code

Reference effect:

Plug-in 2 – PRISM

Prism: Add a better look to GitBook’s Code. Remember to block GitBook’s default Highlight plugin when using it.

Configuration method

"plugins": [
  "prism"."-highlight"]."pluginsConfig": {
  "prism": {
    "css": [
      "prismjs/themes/prism-solarizedlight.css"]."lang": {
      "shell": "bash"}}}Copy the code

Reference effect:

Plugin 3-copy-code-button

Copy-code-button: Add copy function to Code of GitBook, which can copy all code of code block in one click.

Configuration method

"plugins": [
  "copy-code-button"
]
Copy the code

Reference effect:

Plugin 4-search-Pro

Search-pro: Not so good for Chinese due to the search supported by GitBook. When you add this plug-in, you can display search results in highlights, which is very powerful. Of course, since the default search function is disabled, search and LUNr need to be masked

Configuration method

"plugins": [
  "search-pro"."-search"."-lunr"
]
Copy the code

Reference effect:

Extension 5 – Expandable – Chapters

Expandable – Chapters: Since sidebar titles are fully expanded by default, this plugin will allow them to expand and shrink.

Configuration method

"plugins": [
  "expandable-chapters"
]
Copy the code

Reference effect:

Plugin 6 – Splitter

Splitter: Make the width of the sidebar drag itself.

Configuration method

"plugins": [
  "splitter"
]
Copy the code

Reference effect:

Plug-in 7 — Sharing

– Sharing: Remove the default sharing function of GitBook. Due to some of its default twitter, Facebook needs to be over the wall, and we are doing Chinese site, so we will turn off the sharing function.

Configuration method

"plugins": [
  "-sharing"
]
Copy the code

Reference effect:

Plugin 8-github -buttons

Github -buttons: Add github ICONS to GitBook to display follow and stars.

Configuration method

"plugins": [
  "github-buttons"]."pluginsConfig": {
  "github-buttons": {
  "buttons": [{"user": "LiangJunrong"."repo": "document-library"."type": "star"."count": true."size": "small"
    }, 
    {
      "user": "LiangJunrong"."width": "160"."type": "follow"."count": true."size": "small"}}}]Copy the code

Reference effect:

Plugin 9-Donate

Donate: Configure a tipping module at the bottom. Users can click on alipay, wechat, etc.

Configuration method

"plugins": [
  "donate"]."pluginsConfig": {
  "donate": {
    "button": "Exceptional"."alipayText": "Alipay Rewards"."wechatText": "Wechat Tip"."alipay": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.jpg?raw=true"."wechat": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.png?raw=true"}}Copy the code

Reference effect:

Plugin 10-tbFed-pagefooter

Tbfed-pagefooter: Add a footer to each page of GitBook so that you know the copyright of these files and when they were modified, etc.

Configuration method

"plugins": [
  "tbfed-pagefooter"]."pluginsConfig": {
  "tbfed-pagefooter": {
    "copyright":"Copyright &copy jsliang.top 2019"."modify_label": "Revision date of this document:"."modify_format": "YYYY-MM-DD HH:mm:ss"}}Copy the code

Reference effect:

Plugins 11-Bidu-nav

Baidu-asc: Add Baidu statistics to GitBook site, so that the number of users can be viewed through Baidu statistics.

Configuration method

"plugins": [
  "baidu-tongji"]."pluginsConfig": {
  "baidu-tongji": {
    "token": "55e7dfe47f4dc1c12345678fdfa62565"}}Copy the code

Plugin 12 – Anchor – Navigation -ex

Anchor – Navigation -ex: Automatically generates menu according to ### ### and adds jump to top effect.

Configuration method

"plugins": [
  "anchor-navigation-ex"]."pluginsConfig": {
  "anchor-navigation-ex": {
    "showLevel": false}}Copy the code

Reference effect:

Plugin 13-gitalk

Gitalk: Add comments to pages that are added to issues in the GitHub repository.

First of all, this is not a plugin, Gitalk is a comment plugin based on GitHub Issue and Preact.

We then add the corresponding code to messageboard.md (the page where we need to add the comment area) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script>
  var gitalk = new Gitalk({
    "clientID": "ClientID in need of a supplement."."clientSecret": "ClientSecret that needs to be supplemented"."repo": "document-library"."owner": "LiangJunrong"."admin": ["LiangJunrong"]."id": location.pathname,      
    "distractionFreeMode": false  
  });
  gitalk.render("gitalk-container");
</script>
Copy the code

Next, let’s talk about the fields above:

clientID: GitHub developer Settings, client connection id. This is explained in detail below.
clientSecret: GitHub developer Settings, client secret key. This is explained in detail below.
repoThe GitHub repository name is oursdocument-libraryLa.
owner: GitHub repository owner, which is my GitHub account:LiangJunrong.
admin: GitHub warehouse manager, or my GitHub account:LiangJunrong. (Support array, multiple managers)
id: Unique identifier of the page. Default:location.href
distractionFreeMode: Full screen mask effect similar to Facebook comment box. Default value:false

See Gitalk for more configurations

Again, let’s open the page: GitHub Open License application

After creation, the following information is displayed:

Finally, we can see the results shown in the http://localhost:4000/MessageBoard.html (eventually need to LiangJunrong. Making. IO) :

In this way, we have completed the single page to add Gitalk, if you need to add multiple pages, then you can refer to the next snow dream technology post guide (here is not the shiver, jsliang test effective) :

Gitbook Tutorial utility plugins (3 new plugins) – SegmentFault – Snow Dream Technology Post

Plug-in 14 – References

GitBook plugin – GitHub – Zhangjikai
Plug-in function customization, parameter description – GitHub – zQ99299
Use of Gitbook and common plugins – Zhao Da
【Gitbook】 Practical configuration and plug-in introduction – Zhangjk
How to use Gitbook-hyun gracefully
Gitbook Tutorial utility plugins (3 new plugins) – SegmentFault – Snow Dream Technology Post
Gitbook template – GitHub – crifan

Five Gitbooks are packaged and deployed

Returns the directory

Now, it’s time to pack up and publish your project so the rest of the community can see your work.

First, package the project: Gitbook Build.

Then, deploy to GitHub Pages or personal cloud servers.

Making Pages tutorial
Nginx configuration

Finally, let’s take a look at our deployment page:

Liangjunron.github. IO /

Six summarize

Returns the directory

OK, this is the end of our GitBook teaching.

If you have any problems with GitBook development, please contact me:

addjsliangQQ profile group:798961601.
addjsliangPersonal QQ:1741020489
Add jsliang’s personal wechat:

Finally, if you feel good, please give jsliang a “like” or “star”

GitHub – Jsliang document library
Nuggets – Jsliang’s personal page

PS: If you need to purchase a cloud server to host your gitBook-packed pages, you can click the link below or consult Jsliang oh ~

Jsliang document library 由 Liang JunrongusingCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Based on theGithub.com/LiangJunron…On the creation of works.

Use rights other than those authorized by this License agreement may be obtained from Creativecommons.org/licenses/by…Obtained.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

GitBook – Quickly build a blog that can be left a message

A directory

The preface

Three GitBook common instructions

Four GitBook plug-in configuration

4.1 the book. The json

4.2 gitbook – styles

4.3 gitbook – plugins

Plugin 1 – theme-comscore

Plug-in 2 – PRISM

Plugin 3-copy-code-button

Plugin 4-search-Pro

Extension 5 – Expandable – Chapters

Plugin 6 – Splitter

Plug-in 7 — Sharing

Plugin 8-github -buttons

Plugin 9-Donate

Plugin 10-tbFed-pagefooter

Plugins 11-Bidu-nav

Plugin 12 – Anchor – Navigation -ex

Plugin 13-gitalk

Plug-in 14 – References

Five Gitbooks are packaged and deployed

Six summarize

GitBook – Quickly build a blog that can be left a message

A directory

The preface

Three GitBook common instructions

Four GitBook plug-in configuration

4.1 the book. The json

4.2 gitbook – styles

4.3 gitbook – plugins

Plugin 1 – theme-comscore

Plug-in 2 – PRISM

Plugin 3-copy-code-button

Plugin 4-search-Pro

Extension 5 – Expandable – Chapters

Plugin 6 – Splitter

Plug-in 7 — Sharing

Plugin 8-github -buttons

Plugin 9-Donate

Plugin 10-tbFed-pagefooter

Plugins 11-Bidu-nav

Plugin 12 – Anchor – Navigation -ex

Plugin 13-gitalk

Plug-in 14 – References

Five Gitbooks are packaged and deployed

Six summarize

Related Posts

Front-end Knowledge Base Front-end Routing – Introduction

Balancing binary trees

XSS attack and defense combat (attached JS source code)