Tmiracle

Gitbook从安装到部署

在此首先感谢这位大佬的教程:传送门

Gitbook安装

安装 Node.js

首先我们需要安装NodeJs软件,因为gitbook是用npm命令行安装的..

NodeJs官网:传送门

安装完成后,打开cmd窗口,运行下列第一行命令,下面出现版本号,那么代表安装成功了:

node -v
v10.12.0

安装Gitbook

注意事项:请关掉您电脑中的安全软件,否则可能命令失败!

输入下面的命令来安装 GitBook:

npm install gitbook-cli -g

安装成功后检验下是否成功,显示版本代表成功:

gitbook -v
CLI version: 2.3.2
GitBook version: 3.2.3

Gitbook初始化

在你的磁盘下创建一个空的文件夹,然后打开在该目录下打开cmd【shift+鼠标右键,选择命令窗口】,运行下列命令:

gitbook init

然后你会看到多了两个文件:

README.md
SUMMARY.md

他们分别是“首页”和“目录”,“首页”就不多介绍了,“目录”我后面会介绍怎么使用~

这时候你可以输入命令运行下:

gitbook serve

出现下面信息代表成功:

Starting server ...
Serving book on http://localhost:4000

你可以在浏览器中输入localhost:4000,即可看到gitbook页面了~

是不是很简单呢~

接下面我会给你们更详细的gitbook配置~

详细配置

现在你的文件夹里只有两个md文件和一个_book文件夹,其中_book文件夹是你运行命令后生成的空文件夹,这里面是存放部署后的静态页面的。

下面你需要创建一下文件夹和文件:

虽然images和screenshot都是存图片的,可以只要一个,但是为了防止往后写博客容易把网站图标二维码和截图搞得太混,我们应该尽量把文件夹细分~

而books文件夹里的书籍分级我建议大家也把文章归类,每个文章都有自己的文件夹,并且每个文件夹下都有一个README.md文件,这个md文件之后在目录文件中起到很方便的作用~

book.json

下面是我的配置:

{
    "title": "Tmiracle的博客文档",
    "description": "Tmiracle's Blog Docs",
    "author": "Tmiracle",
    "output.name": "site",
    "language": "zh-hans",
    "gitbook": "3.2.3",
    "root": ".",
    "plugins": [
        "donate",
        "-lunr",
        "-search",
        "-highlight",
        "-sharing",
        "sharing-plus",
        "hide-element",
        "search-pro",
        "chapter-fold",
        "github",
        "anchor-navigation-ex-toc",
        "custom-favicon",
        "insert-logo",
        "splitter",
        "code",
        "pageview-count",
        "lightbox",
        "tbfed-pagefooter",
        "prism",
        "prism-themes",
        "advanced-emoji"
    ],
    "pluginsConfig": {
        "github": {
            "url": "https://github.com/ImTmiracle/ImTmiracle.github.io"
        },
        "prism": {
            "css": [
                "prism-themes/themes/prism-xonokai.css"
            ]
        },
        "anchor-navigation-ex-toc": {
            "showLevel": true,
            "associatedWithSummary": true,
            "printLog": false,
            "multipleH1": false,
            "mode": "float",
            "showGoTop": true,
            "float": {
                "floatIcon": "fa fa-navicon",
                "showLevelIcon": true,
                "level1Icon": "fa fa-hand-o-right",
                "level2Icon": "fa fa-hand-o-right",
                "level3Icon": "fa fa-hand-o-right"
            },
            "pageTop": {
                "showLevelIcon": true,
                "level1Icon": "fa fa-hand-o-right",
                "level2Icon": "fa fa-hand-o-right",
                "level3Icon": "fa fa-hand-o-right"
            }
        },
        "hide-element": {
            "elements": [
                ".gitbook-link"
            ]
        },
        "favicon": "icon/favicon.ico",
        "tbfed-pagefooter": {
            "copyright": "copyright &copy Tmiracle",
            "modify_label": "该文件最后修改时间:",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },
        "insert-logo": {
            "url": "/icon/logo.png",
            "style": "background: none; max-height: 90px; min-height: 90px"
        },
        "donate": {
            "wechat": "",
            "alipay": "",
            "title": "",
            "button": "赏",
            "alipayText": "给口饭吃吧~~~",
            "wechatText": "微信支付"
        },
        "sharing": {
            "douban": false,
            "facebook": false,
            "google": false,
            "hatenaBookmark": false,
            "instapaper": false,
            "line": false,
            "linkedin": false,
            "messenger": false,
            "pocket": false,
            "qq": true,
            "qzone": true,
            "stumbleupon": false,
            "twitter": false,
            "viber": false,
            "vk": false,
            "weibo": true,
            "whatsapp": false,
            "all": [
                "facebook",
                "google",
                "twitter",
                "instapaper",
                "linkedin",
                "pocket",
                "stumbleupon"
            ]
        }
    }
}

点我查看book.json详细解析

Summary.md文件

概要文件主要存放 GitBook 的文件目录信息,左侧的目录就是根据这个文件来生成的,可以在 book.json 重新定义该文件的对应值。它通过 Markdown 中的列表语法来表示文件的父子关系,下面是一个简单的示例:

 # Summary
 * [Introduction](README.md)
 * [Part I](part1/README.md)
     * [Writing is nice](part1/writing.md)
     * [GitBook is nice](part1/gitbook.md)
 * [Part II](part2/README.md)
     * [We love feedback](part2/feedback_please.md)
     * [Better tools for authors](part2/better_tools.md)

这个配置对应的目录结构如下所示:

我们通过使用 标题 或者 水平分割线 标志将 GitBook 分为几个不同的部分:

 # Summary

 ### Part I

 * [Introduction](README.md)
 * [Writing is nice](part1/writing.md)
 * [GitBook is nice](part1/gitbook.md)

 ### Part II

 * [We love feedback](part2/feedback_please.md)
 * [Better tools for authors](part2/better_tools.md)

 ----

 * [Last part without title](part3/title.md)

这个配置对应的目录结构如下所示:

Gitbook部署到github page

首先打开你们的github,新建一个仓库,名字别搞错了,必须是:

<你的账户名>.github.io

比如我的是:ImTmiracle.github.io

创建完毕后,在页面找到Clone or download按钮,复制URL仓库链接。

接下来回到我们的Gitbook文件夹,因为我们运行过“gitbook serve”命令了,所以在_book文件夹里会生成我们接下来的所需要部署的静态网页文件。

先在本地磁盘随意一个位置,新建一个随意名字的文件夹(以下统称A文件夹),之后用git命令初始化:( 点我了解git命令

git init

再把_book下的文件全部拷贝到这个文件夹,继续依次运行git命令:

git add .
git commit -m"你要提交的信息"
git remote add [随便取个别名] [刚刚复制的URL]
git push -u [上面取的别名] master

如果没有报错,基本算是部署上去了,接下来你可以在浏览器输入:

<你的账户名>.github.io

就可以浏览gitbook了。

更新Gitbook

之后如果要更新Gitbook已经很简单了,就是不断的重复下面步骤:

  1. A文件夹除.git之外的文件全部删掉

  2. 去Gitbook文件夹下运行gitbook serve后复制_book里的文件

  3. 粘贴到A文件夹

  4. 运行下列命令:

    git add .
    git commit -m "信息"
    git pull [别名] master
    git push -u [别名] master