首先我们先创建一个笔记的目录
可以在 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/，可以看到本笔记上线了。
网友评论