用gitbook做笔记如何部署到github（二）

首先我们先创建一个笔记的目录

可以在 SUMMARY.md 来添加本书目录

# Summary

* [Introduction](README.md)

* [vue](./vue/index.md)

    * [什么是vue](./vue/1-vue.md)

    * [vue指令](./vue/2-vue.md)

然后添加一些内容进来

添加一章，其中包括两个小节，方括号中是标题，小括号中是指向的文件，这里写 .md 后缀即可，不写 html 后缀。

浏览器中，看到目录出来了。

把笔记保存到github中

我们在自己的github新建一个仓库，然后把笔记上传到github上，添加.gitignore文件添加github忽略文件，忽略_book文件夹，执行以下命令上传到github。

cd gitbook-note

git init

git add -A

git commit -m"msg"

git remote add origin https://github.com/sunshineyanghui/gitbook-note.git

git push -u origin master

现在浏览器中访问https://github.com/sunshineyanghui/gitbook-note既可以看到笔记了。

编译成html

为了部署方便，现在我们修改一下文件的结构

cd gitbook-note

mkdir content

mv *.md content

mv vue content

现在运行gitbookserve会报错，但是会自动创建 docs 文件夹，文件夹中的内容，就是编译后的输出。

正确运行执行下列命令

gitbook serve ./content ./docs

每次启动的时候，都要敲长长的命令，很不方便，所以，我们就需要把命名简短化，具体就是去写成 npm 脚本。

把项目变成一个nodejs的项目

npm init -y

生成一个package.json文件，在package.json添加一下代码

"scripts": {

        "build": "gitbook build ./content ./docs"

},        

然后执行命令运行

npm run build

这样 html 内容被编译好之后就会被保存到 docs 文件夹中。

部署到github pages

咱们来把 html 内容部署到公网上，用到的是 github 的 pages 服务。

docs 文件夹 Push 到 github

运行 git add -A; git commit 操作，把 docs 文件夹保存到版本中，然后 git push 上传。

浏览器中，到 https://github.com/sunshineyanghui/gitbook-note.git ，可以看到 docs/ 文件夹上传完毕。

配置 pages 服务

到 仓库配置页面 到 Github Pages 一项下面。Source 一项设置为 master branch docs folder 意思就是 master 分支的 docs 文件夹。

等待几分钟，到 https://sunshineyanghui.github.io/gitbook-note/，可以看到本笔记上线了。