IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 用 GitBook 编写自己第一本电子书 —— GitBook 的安装和使用 -> 正文阅读

[开发工具]用 GitBook 编写自己第一本电子书 —— GitBook 的安装和使用

相信你在阅读别人的技术博客时,经常会看到 Power by GitBook 的字样,那么 GitBook 和 Git、GitHub有什么联系呢?GitBook怎么使用呢?

Git 是一种分布式版本管理系统(Version Control System,VCS),基于 Linux,不需要联网就可以进行版本管理。而我们熟悉的 GitHub 是在线的基于Git的代码托管网站,网站上存放大量的开源代码,极大的方便了程序员间的交流和学习。GitBook 是一个基于 Node.js 的命令行工具,可以与MarkdownGit 结合,Git?**的使用方便团队协同写作和版本管理,而 markdown 和 Gitbook 提供的丰富的个性化设置简化了排版,让人更专注于创作。GitBook**默认支持HTML格式输出,可以以静态网页的格式进行发布,另外还支持 mobi、PDF 等等格式输出,用户可以免费编写自己的电子书。

下面,我将分享GitBook的安装与使用方法,其中提到一些我走的弯路,方便大家避坑。

设备及版本:MacBook Pro (Intel) macOS Monterey

GitBook 的安装

0. Git的安装

由于 GitBook 的安装并不需要 Git,所以把他归为步骤 0,但是为了方便之后应用 Git,建议还是安装一下。

Xcode默认集成 Git,可以从 App Store 进行 Xcode 的下载,下载完成后在 Preferences 中找到 Downloads 中,进行 Command Line Tools 的 install 即可完成安装。

避坑 1

在更新macOS Monterey 系统后,发现在 app store 里面下载 app 时,出现下载不能开始/ 终止、小圆圈一直转的情况,上网查好多更新系统后的用户都出现了此问题,但是官方也没给出原因和解决办法。这里我总结了网友的几个技巧:

  1. 进入 MacBook 的 Activity Monitor > CPU,找到列表中的appstoreagent 强制退出,重复几次就会发现 App Store 里面的软件正常下载了;

  1. Apple Developer 官网手动下载 Xcode。

    下载官网:https://developer.apple.com/download/

1. 安装 Node.js

在 Node.js 官网安装对应版本的 Node.js,注意!!!选择 Long Term Support (LTS) 版本下载,而且尽量不要下载最新版本,因为最新版本可能不支持)。根据网上的说法,尽量选择v10.XX.X版本,否则会像我一样,走很多弯路。

避坑 2

如果你不幸安装了太新的版本,而且安装 Gitbook 时出现了如下的报错:

/usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287
      if (cb) cb.apply(this, arguments)
                 ^

TypeError: cb.apply is not a function
    at /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18
    at FSReqCallback.oncomplete (node:fs:199:5)

我在网上找到了一个trick:

具体的代码:

cd /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs
sudo chmod 777 polyfills.js
vi polyfills.js
#修改目标行

原答案:https://flaviocopes.com/cb-apply-not-a-function/

2. 安装 GitBook

利用 Node.js 中内置的 npm 进行 GitBook 的安装:

npm install -g gitbook-cli

确认是否安装成功以及版本:

gitbook -V

CLI version: 2.3.2
GitBook version: 3.2.3

GitBook的使用

1. GitBook 初始化

gitbook init

如果文件夹中没有相关文件,则以上命令会自动初始化生成 README.mdSUMMARY.md 两个文件。README.md 容易理解就是你对自己的 GitBook 的介绍,因此文件内部已经默认标题为 introduction,而SUMMARY.md 是GitBook 的目录结构,相当于整本书的框架。

2. GitBook编写

首先需要进行.md文件的撰写,markdown是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML或HTML文档。markdown 事实上就是纯文本,但是如果使用编辑器,写作将会变得更容易高效。

接下来需要配置书籍的目录结构。*?SUMMARY.md* 为电子书的导航目录文件,每当新增一个章节文件就需要向此文件中添加一条记录,其基本语法格式为 * [章节名称](.md 文件路径),子标题只需要 tab 缩进尽可。

3. GitBook生成与预览

gitbook serve

执行以上命令后,只需要在浏览器中输入http://localhost:4000即可预览 GitBook 的效果,CTRL+C停止预览。同时,该命令也会默认生成一个_Book/ 文件夹。

gitbook build [书籍路径] [输出路径]

buildserve的区别是,build只会生成静态网页 HTML,而不会运行服务器,即不能像 serve一样进行浏览器预览,输出的静态网页HTML可打包上传到服务器,也可以上传到 github 等网站进行托管。

4. 托管到 GitHub Pages

GitHub Pages 是 GitHub 提供的一项网页寄存托管服务,可以存放静态网页,包括项目文档,博客,甚至是整本书,可以说是中小型博客或项目主页的最佳选项之一。

那么,如何将自己本地完成的 GitBook 托管至 GitHub Pages 呢?

4.1 新建仓库repository

在自己的 GitHub 账户中新建一个 repository,命名和描述,注意权限必须设置为公开 Public。

4.2 将新建的仓库克隆至本地

复制仓库的 SSH 链接:

在终端中用以下命令克隆至本地:

kimhan@heinrichmacbookpro  ~/Desktop  git clone git@github.com:heinrichhaenn/workflow.git                                                                   
Cloning into 'workflow'...
Enter passphrase for key '/Users/kimhan/.ssh/id_rsa': 
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

此时,你将看到本地多了一个与仓库同名的文件夹。我们可以看到,文件夹中已经存在了隐藏文件.git,所以就不要git init的操作了。

4.3 将源代码文件 push 到仓库

我习惯在仓库中既存放源代码,又存放静态网页进行 GitHub Pages 的展示。所以首先将源代码文件全复制进刚才新建的本地的文件夹中,然后通过以下代码 push 至仓库的 master 分支:

git add .
git commit -m "注释信息“
git push -u origin master

示例:

? kimhan@heinrichmacbookpro  ~/Desktop/workflow   master ?  git commit -m "orginal files" 
[master aa355c6] orginal files
 5 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 .DS_Store
 create mode 100644 SUMMARY.md
 create mode 100644 "\350\276\223\345\205\245.md"
 create mode 100644 "\350\276\223\345\207\272.md"
 ? kimhan@heinrichmacbookpro  ~/Desktop/workflow   master  git push -u origin master
Enter passphrase for key '/Users/kimhan/.ssh/id_rsa': 
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 4 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (7/7), 4.93 KiB | 4.93 MiB/s, done.
Total 7 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:heinrichhaenn/workflow.git
   98f1313..aa355c6  master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

完成上述操作后,我们就可以看到在 GitHub 的仓库中看到源代码文件。

4.4 将 HTML 文件 push 到 gh-pages 分支

创建一个新的分支 branch,命名必须gh-pages

git checkout -b gh-pages

将本地仓库文件夹中的源代码文件删除,然后将之前 gitbook build 或者 gitbook serve 得到的 _book 文件夹中的全部文件,复制进入本地仓库文件夹中(如下图),然后执行代码push 到仓库:

git add .
git commit -m "注释信息”
git push -u origin gh-pages
 ? kimhan@heinrichmacbookpro  ~/Desktop/workflow   gh-pages ±  git add .
 ? kimhan@heinrichmacbookpro  ~/Desktop/workflow   gh-pages ?  git commit -m "gitbook"
[gh-pages 0d70cd1] gitbook
 33 files changed, 3149 insertions(+), 124 deletions(-)
 delete mode 100644 README.md
 delete mode 100644 SUMMARY.md
 create mode 100644 gitbook/.DS_Store
 create mode 100644 gitbook/fonts/fontawesome/FontAwesome.otf
 create mode 100644 gitbook/fonts/fontawesome/fontawesome-webfont.eot
 create mode 100644 gitbook/fonts/fontawesome/fontawesome-webfont.svg
 create mode 100644 gitbook/fonts/fontawesome/fontawesome-webfont.ttf
 create mode 100644 gitbook/fonts/fontawesome/fontawesome-webfont.woff
 create mode 100644 gitbook/fonts/fontawesome/fontawesome-webfont.woff2
 create mode 100644 gitbook/gitbook-plugin-fontsettings/fontsettings.js
 create mode 100644 gitbook/gitbook-plugin-fontsettings/website.css
 create mode 100644 gitbook/gitbook-plugin-highlight/ebook.css
 create mode 100644 gitbook/gitbook-plugin-highlight/website.css
 create mode 100644 gitbook/gitbook-plugin-livereload/plugin.js
 create mode 100644 gitbook/gitbook-plugin-lunr/lunr.min.js
 create mode 100644 gitbook/gitbook-plugin-lunr/search-lunr.js
 create mode 100644 gitbook/gitbook-plugin-search/lunr.min.js
 create mode 100644 gitbook/gitbook-plugin-search/search-engine.js
 create mode 100644 gitbook/gitbook-plugin-search/search.css
 create mode 100644 gitbook/gitbook-plugin-search/search.js
 create mode 100644 gitbook/gitbook-plugin-sharing/buttons.js
 create mode 100644 gitbook/gitbook.js
 create mode 100644 gitbook/images/apple-touch-icon-precomposed-152.png
 create mode 100644 gitbook/images/favicon.ico
 create mode 100644 gitbook/style.css
 create mode 100644 gitbook/theme.js
 create mode 100644 index.html
 create mode 100644 search_index.json
 create mode 100644 "\350\276\223\345\205\245.html"
 delete mode 100644 "\350\276\223\345\205\245.md"
 create mode 100644 "\350\276\223\345\207\272.html"
 delete mode 100644 "\350\276\223\345\207\272.md"
 ? kimhan@heinrichmacbookpro  ~/Desktop/workflow   gh-pages  git push -u origin gh-pages
Enter passphrase for key '/Users/kimhan/.ssh/id_rsa': 
Enumerating objects: 42, done.
Counting objects: 100% (42/42), done.
Delta compression using up to 4 threads
Compressing objects: 100% (37/37), done.
Writing objects: 100% (40/40), 647.46 KiB | 2.05 MiB/s, done.
Total 40 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), completed with 1 local object.
remote: 
remote: Create a pull request for 'gh-pages' on GitHub by visiting:
remote:      https://github.com/heinrichhaenn/workflow/pull/new/gh-pages
remote: 
To github.com:heinrichhaenn/workflow.git
 * [new branch]      gh-pages -> gh-pages
Branch 'gh-pages' set up to track remote branch 'gh-pages' from 'origin'.

同样,在 GitHub 页面的 gh-pages 的分支页面中,将可以看到电子书的文件。

4.5 获取GitHub Pages 的链接

如果上述步骤均成功且未出现报错,最终 GitHub Pages 链接为:

https://<USERNAME>.github.io/<REPO>

点击链接,就可以看到自己的 Gitbook 啦!例如我刚才 test 制作的 gitbook 链接如下:

https://heinrichhaenn.github.io/workflow/

5. GitBook 导出

# 导出为 PDF 格式
gitbook pdf [book] [output]
# 导出为 mobi 格式
gitbook mobi [book] [output]
# 导出为 epub 格式
gitbook epub [book] [output]

上述操作依赖于 ebook-convert 插件,需要进行插件的安装配置即可使用。

GitBook 的配置与插件

book.json 配置文件

新建 book.json 文件即可对正规的电子书进行配置,包括以下内容:

https://github.com/GitbookIO/gitbook/blob/master/docs/config.md

{
    "title": "WORKFLOW",
    "description": "My workflow written with GitBook",
    "isbn": "978-3-16-148410-0",
    "language": "en",
    "direction": "ltr"
}

GitBook 插件系统

插件是 GitBook 的扩展功能,GitBook 默认安装了一些插件:

highlight、search、sharing、fontsettings、livereload

当然,也可以安装其他第三方插件,主要有两种方法:

npm 安装

# npm 官网搜索感兴趣的插件
# gitbook-plugin-<name> 是功能插件
# gitbook-theme-<name> 是主题插件
# npm 安装
npm install gitbook-plugin-<name>
# 配置 book.json 文件中的 plugins
# 安装到项目
gitbook install

GitBook 直接安装

# 配置 book.json 文件中的 plugins
# 安装到项目
gitbook install

更多的插件配置,之后更新。

本文由博客一文多发平台 OpenWrite 发布!

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-01-29 23:17:35  更:2022-01-29 23:18:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 10:09:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码