用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/,可以看到本笔记上线了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Git 基础 基本原理 客户端并不是只提取最新版本的文件快照,而是把代码仓库完整的镜像下来。这样一来,任何一处协同...
    __silhouette阅读 16,059评论 5 147
  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 9,793评论 0 44
  • 你相信? 春天就在脚下, 而我却在四处寻找 ; 你相信? 在世界上的另外一个地方, 会有另外一个我 , 我与我被系...
    草头纱阅读 1,950评论 1 2

友情链接更多精彩内容