Gitbook从安装到部署

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

1. Gitbook安装

  1. 1.1. 安装 Node.js

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

    NodeJs官网:传送门

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

     node -v
     v10.12.0
    
  2. 1.2. 安装Gitbook

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

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

     npm install gitbook-cli -g
    

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

     gitbook -v
     CLI version: 2.3.2
     GitBook version: 3.2.3
    
  3. 1.3. Gitbook初始化

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

     gitbook init
    

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

    README.md
    SUMMARY.md

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

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

     gitbook serve
    

    出现下面信息代表成功:

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

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

    是不是很简单呢~

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

  4. 1.4. 详细配置

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

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

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

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

    1. 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详细解析

    2. 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)
      

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

2. 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了。

3. 更新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
    
copyright © Tmiracle all right reserved,powered by Gitbook该文件最后修改时间: 2019-12-01 00:02:01

results matching ""

    No results matching ""