利用 gitbook 与 webhook 做一个展示前端项目的平台

1. 登录gitbook

  • 点击 sign in
利用 gitbook 与 webhook 做一个展示前端项目的平台_第1张图片
  • 选择用github账号登录
利用 gitbook 与 webhook 做一个展示前端项目的平台_第2张图片

2. 新建book

  • 点击 new book 新建一个book
利用 gitbook 与 webhook 做一个展示前端项目的平台_第3张图片
  • 输入相关信息
利用 gitbook 与 webhook 做一个展示前端项目的平台_第4张图片
  • 进入配置页面


    利用 gitbook 与 webhook 做一个展示前端项目的平台_第5张图片
  • 选择github,点击 export to github(这里也可以自己在github创建库然后输入github库名称点击save)

利用 gitbook 与 webhook 做一个展示前端项目的平台_第6张图片
  • 点击 check URL
利用 gitbook 与 webhook 做一个展示前端项目的平台_第7张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第8张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第9张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第10张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第11张图片

3. 添加webhook

利用 gitbook 与 webhook 做一个展示前端项目的平台_第12张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第13张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第14张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第15张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第16张图片
  • 出现500未成功的解决方案
利用 gitbook 与 webhook 做一个展示前端项目的平台_第17张图片

利用 gitbook 与 webhook 做一个展示前端项目的平台_第18张图片

直到 ping 通 200 方为大功告成!

4. 最后的工作

  • clone 之前的test.git 到本地
  • 详细了解gitbook如何编排书本请参考本地址:gitbook编写教程
  • 将自己的作品放入本地的test.git 仓库
  • 放入 treeSync.js ,在node环境中 运行命令:
node treeSync.js   //根据当前目录动态生成 SUMMARY.md 文件
  • 在readme.md中放入css与js代码 详细内容访问以下地址
    https://github.com/FengZeming/mycode

  • 最终效果
    https://fengzeming.gitbooks.io/mycode/content/

    利用 gitbook 与 webhook 做一个展示前端项目的平台_第19张图片

  • 思路其实很简单,就是在node环境中遍历当前目录,生成树形的SUMMARY.md,gitbook会根据这个文件生成左边的菜单栏,然后通过修改菜单栏的原始dom结构与css,最终实现我想要的效果。

你可能感兴趣的:(利用 gitbook 与 webhook 做一个展示前端项目的平台)