gitbook

使用 Gitbook 打造你的电子书

gitbook官网

环境搭建

nodejs

官网下载,这里可以选择12.16.1版本,太新的版本后面可能会出现奇怪的问题,这是笔者使用的版本

执行以下命令安装gitbook命令

1
2
3
4
5
6
npm install -g gitbook-cli
# 查看是否安装完成, 能正确显示版本号就行,这里推荐gitBook==3.2.3
gitbook -V

CLI version: 2.3.2
GitBook version: 3.2.3

初始化电子书

初始化电子书

1
gitbook init

img
这时候会生成下面两个文件README.mdSUMMARY.md

README.md 书籍的介绍写在这个文件里;SUMMARY.md书籍的目录结构在这里配置

安装插件

有配置book.json时,执行gitbook install会安装插件到node_modules目录

使用以下命令启动gitbook,打开http://localhost:4000就可以访问了,

1
gitbook serve

img

重要文件

book.json,没有的话,自己新建一个就好

用于配置插件和书籍的基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
{
"title": "书籍目录",
"author": "narutohyc",
"description": "书籍目录,记录一些工作和学习中的笔记",
"language": "zh-hans",
"structure": {
"readme": "README.md"
},
"links": {
"sidebar": {
"我の小窝~": "https://github.com/narutohyc"
}
},
"plugins": [
"-sharing",
"splitter",
"expandable-chapters-small",
"anchors",
"github",
"github-buttons",
"donate",
"sharing-plus",
"anchor-navigation-ex",
"mathjax",
"mermaid-gb3",
"tbfed-pagefooter",
"code",
"search-plus", "-lunr", "-search",
"lightbox",
"theme-comscore",
"valine",
"pageview-count",
"favicon-absolute",
"copyright-v"
],
"pluginsConfig": {
"theme-default": {
"showLevel": true
},
"github": {
"url": "https://github.com/narutohyc"
},
"tbfed-pagefooter": {
"copyright": "Copyright © narutohyc.com 2021",
"modify_label": "该文件修订时间:",
"modify_format": "YYYY-MM-DD HH:mm:ss"
},
"github-buttons": {
"buttons": [{
"user": "narutohyc",
"repo": "bk_index",
"type": "star",
"size": "small",
"count": true
}
]
},
"donate": {
"wechat": "https://s2.loli.net/2022/03/23/WDiTVSamQBJdEA4.png",
"alipay": "https://s2.loli.net/2022/03/23/dEYjkaSGXwe7rnu.png",
"title": "",
"button": "欢迎打赏",
"alipayText": "alipay打赏",
"wechatText": "wechat打赏"
},
"sharing": {
"douban": true,
"facebook": true,
"google": true,
"hatenaBookmark": false,
"instapaper": false,
"line": false,
"linkedin": false,
"messenger": false,
"pocket": false,
"qq": true,
"qzone": true,
"stumbleupon": false,
"twitter": true,
"viber": false,
"vk": false,
"weibo": true,
"whatsapp": false,
"all": [
"google", "facebook", "weibo", "twitter",
"qq", "qzone", "linkedin", "pocket"
]
},
"anchor-navigation-ex": {
"showLevel": false
},
"valine": {
"appId": "leancloud申请的appId",
"appKey": "leancloud申请的appKey",
"avatar": "wavatar",
"placeholder": "欢迎留下评论交流~",
"pageSize": 15
},
"favicon-absolute":{
"favicon": "./chapters/res/other/favicon.ico",
"appleTouchIconPrecomposed152": "./chapters/res/other/favicon.ico"
},
"fontSettings": {
"family": "msyh",
"size": 2
},
"copyright-v": {
"site": "https://hycbook.github.io/bk_python/",
"author": "narutohyc",
"website": "python元知识驿站",
"image": "https://s2.loli.net/2022/03/24/pbMd1BCgUNzi7mG.png",
"copyProtect": true,
"enableFooter": false
}
}
}

Gitbook 默认带有 5 个插件:

  • highlight
  • search
  • sharing
  • font-settings
  • livereload

重要插件说明:

  • github: 右上角添加github图标
  • donate: 文章打赏插件,在文末点击展示付款码
  • sharing-plus: 比默认的分享插件,多了更多的分享按钮
  • mathjax: LaTeX公式显示插件,可以支持绝大多数的数据公式,个别的公式还是会有问题
  • mermaid-gb3: Mermaid渲染插件,可以支持画图
  • code: 为代码块添加行号和复制按钮,复制按钮可关闭,单行代码无行号
  • search-plus: 文章内容搜索插件,支持中文,使用这个插件时要移除默认的lunrsearch插件
  • lightbox: 当前页显示大图,点击图片会放大显示,不支持切换图片
  • theme-comscore: 主题插件,默认主题是黑白的,comscore 主题是彩色的,标题和正文颜色有所区分
  • valine: 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统
  • pageview-count: 页面浏览量统计,但好像用不了,自己结合cutercounter进行了改造
  • favicon-absolute: 网页icon图标定义
  • copyright-v: 版权插件,复制文章内容时会附带上定义好的版权信息,和知乎复制的效果一样

.bookignore,存放不想被打包的资源

1
2
3
4
5
6
.gitignore
.bookignore
book_default.json
_book/chapters/*.md
*.bat
*.pdf

_book

使用gitbook build命令,会在项目的目录下生成一个 _book 目录,里面的内容为静态站点的资源文件

发布出来的就是这个目录下的资源

gitbook build只负责生成静态文件,gitbook serve不仅生成文件,还会启动网站服务

使用选项 --log=debug--debug 来获取更好的错误消息

1
gitbook build ./ --log=debug --debug

SUMMARY.md,用于存放数据目录

1
2
3
4
5
6
7
8
# Summary

* [Introduction](README.md)
* [alicloud_deployment](./chapters/1.alicloud_deployment.md)
* [reinstall_the_system](./chapters/2.reinstall_the_system.md)
* [Linux常用命令](./chapters/3.Linux常用命令.md)
* [github协作](./chapters/4.github协作.md)
* [gitbook博客搭建](./chapters/5.gitbook博客搭建.md)

node_modules

终端执行gitbook install可以安装book.json配置的插件,下载的插件会在node_modules文件夹

markdown语法

基本撰写和格式语法

Markdown是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)

它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档

推荐配合Typora编辑器一起食用

改造

访客数

待完成…

valine

博客Valine评论样式美化

美化

待完成…

部署

打造完美写作系统:Gitbook+Github Pages+Github Actions

Travis CI简介

什么是持续集成(CI)/持续交付(CD)管道?

GitHub Actions

GitHub Actions 是什么?

前面部分的内容主要讲解了gitbook的构建和美化优化等内容

这部分讲一下如何借助github pagesgitee pages部署自己的博客网站,正文开始前,先讲解下Github Actions的基础概念

Github Actions

  • CI/CD: 持续集成(CI)/持续交付(CD)管道是一系列步骤,其中包括从CI/CD流程开始的所有阶段,并负责创建自动化和无缝的软件交付。而使用CI/CD管道,软件发布工件可以从代码检入阶段到测试、构建、部署和生产阶段一直在管道中前进

    这一概念之所以强大,是因为一旦指定了管道,就可以将其部分或全部实现自动化,从而加快了流程,并减少了错误。换句话说,CI/CD管道使组织每天更轻松地自动多次交付软件

  • Travis CI: 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器

  • Github Actions: GitHub Actions是你在GitHub库中创建自定义的工作流,工作流指的就是自动化的流程,比如构建、测试、打包、发布、部署等等,可以设置触发条件或定时执行,由github提供服务器环境

查看个人帐户的 GitHub Actions 使用情况

  1. 在任何页面的右上角,单击个人资料照片,然后单击“设置”

  2. 在侧边栏的“访问”部分,单击“ 计费和计划”,然后单击“计划和使用情况”

  3. 在“本月使用情况”下的“操作”部分中,查看所用分钟数的详细信息

    可以展开此部分,按运行器类型显示使用情况的明细

  4. 在“用于操作和包的存储”下,查看用于 GitHub Actions 和 GitHub Packages 的存储使用详情。 存储使用数据每小时同步一次

  5. (可选)在“本月使用情况”旁边,单击“获取使用情况报告”向帐户主电子邮件地址发送关于 GitHub Actions 和 GitHub Packages 存储使用情况的 CSV 报告

持续集成(CI)/持续交付(CD)是一种自动化管理流程,而Travis CI和Github Actions都是具体的实现,后者是github官方提供的

githun actions的使用案例可以自己百度或参考github协作

github pages

GitHub Pages Deploy Action

自动发布到github pages分支(可以自己设置分支)

配置token

github项目下新建:name=TOKEN,value=github生成的token

基本用法

1
2
3
4
5
6
- name: Deploy #步骤4:把编译好的静态目录上传到gh-pages分支上
uses: JamesIves/github-pages-deploy-action@3.1.5 #这里调用第三方依赖,用于上传代码到指定分支上
with:
ACCESS_TOKEN: ${{ secrets.TOKEN }}
BRANCH: gh-pages #github pages 默认的分支
FOLDER: _book #上传文件的目录,我这个目录在根目录下,如果是子目录可以这么写 docs/.vuepress/dist

gitee pages

Gitee 如何自动部署 Pages?还是用 GitHub Actions!

使用 GitHub Actions 解决了 GitHub 代码自动同步 Gitee 的问题,但我们的博客仓库代码同步到 Gitee 后,并不能像 GitHub 一样自动部署 Pages,如果不使用付费的 Gitee Pages Pro 服务,那我们该怎么实现 Gitee 自动部署 Pages 呢

基本用法

新建一个name=GITEE_PASSWORD, value=gitee登陆密码的secrets

1
2
3
4
5
6
7
8
9
10
11
- name: Build Gitee Pages
uses: yanglbme/gitee-pages-action@main
with:
# 注意替换为你的 Gitee 用户名
gitee-username: narutohyc
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库,仓库名严格区分大小写,请准确填写,否则会出错
gitee-repo: hycBook/bk_index
# 要部署的分支,默认是 master,若是其他分支,则需要指定(指定的分支必须存在)
branch: gh-pages

多吉云cdn

融合CDN是一种稳定易用、低成本的内容分发服务,为网页 Web、应用 App、文件下载、音视频点播等场景提供加速服务,提升用户体验,降低服务端带宽压力,节省成本的方案

多吉云不自建节点,而是融合阿里云、腾讯云、华为云、网宿等国内一线 CDN 厂商的节点,质量可靠,实时调整调度策略,精准保障访问质量

添加网站

使用多吉云需要网站备案后才可以使用,配置步骤如下:

  1. 注册多吉云账号

  2. 添加域名管理,详细的配置见下方

  3. 添加解析,需要在域名网站添加CNAME解析(多吉云会提供)

    | 字段 | 填写说明 |
    | ————————- | —————————————————————————————— |
    | 记录类型 | 选择 CNAME |
    | 主机记录 | 填写完整域名除去主域名后的部分,填写示例:
    加速域名为 example.com,则主机记录填写 @
    加速域名为 cdn.example.com,则主机记录填写 cdn
    加速域名为 doge.cdn.example.com,则主机记录填写 doge.cdn |
    | 线路类型/请求来源 | 建议保持默认 |
    | 记录值 | 填写控制台域名管理中该域名的 CNAME 值,一般以 .s2-xxx.dogedns.com(xxx 根据业务类型会有不同)结尾 |
    | TTL | 建议保持默认值 10 分钟 |

    点击确认保存记录,等待生效即可

  4. 验证生效

    要验证 CNAME 是否配置成功,可以使用命令行工具测试:

    • Windows 系统下,可以使用系统自带的nslookup工具进行测试:运行CMD程序,输入指令:

      1
      nslookup -qt=cname 加速域名

      请将加速域名替换为你添加的加速域名,并运行上述指令。 如果程序显示的canonical name和多吉云控制台提供的CNAME值一致,则表示你的加速域名已经成功配置 CNAME,加速生效了

    • MacOSLinux系统下,请使用dig命令测试:在终端内运行命令:

      1
      dig 加速域名

      请将加速域名替换为你添加的加速域名,并运行上述指令。 如果程序显示的CNAME和多吉云控制台提供的CNAME值一致,则表示你的加速域名已经成功配置CNAME,加速生效了

详细配置

网站加速详细配置,可以参考如下

多吉云_基本配置

多吉云_回源配置

多吉云_缓存与响应

多吉云_访问控制

多吉云_性能优化

多吉云_HTTPS配置

tomcat部署网站

tomcat安装

下载Linux版本的tomcat

下载地址:Apache Tomcat® - Apache Tomcat 9 Software Downloads

比如:apache-tomcat-9.0.80.tar.gz,将其解压到/usr/local/tomcat

启动

1
2
3
4
5
6
7
cd /usr/soft/apache-tomcat-9.0.80/bin

# 启动
./startup.sh

# 停止
./shutdown.sh

注意:tomcat依赖了jdk

静态网站文件

将静态网站文件添加软连接到/usr/local/tomcat/apache-tomcat-9.0.80/webapps

1
ln -s 静态网站文件 /usr/local/tomcat/apache-tomcat-9.0.80/webapps/静态网站文件

同时修改配置文件/usr/local/tomcat/apache-tomcat-9.0.80/conf/server.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 端口 -->
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="443"
maxParameterCount="1000" />

<!-- 项目路径 -->
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">

<!-- SingleSignOn valve, share authentication between web applications
Documentation at: /docs/config/valve.html -->
<!--
<Valve className="org.apache.catalina.authenticator.SingleSignOn" />
-->

<!-- Access log processes all example.
Documentation at: /docs/config/valve.html
Note: The pattern used is equivalent to using pattern="common" -->
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t &quot;%r&quot; %s %b" />

<!-- 添加项目的路径,不然会出现资源目录找不到的情况 -->
<Context path="" docBase="/usr/local/tomcat/apache-tomcat-9.0.80/webapps/hycBookPage" reloadale="false" />

</Host>

这里主要修改端口项目路径

端口开放

放行指定端口号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 开放8080端口
firewall-cmd --add-port=8080/tcp --zone=public --permanent
# 参数解释
--add-port=被放行的端口号/tcp
--zone=作用域
--permanent=永久有效

# 重启防火墙让其生效
systemctl restart firewalld

# 查看防火墙状态
systemctl status firewalld

# 查看防火墙放行的端口号
firewall-cmd --list-port

nginx

yum方式

以下是在CentOS系统中安装Nginx的步骤:

  1. 更新系统软件包

    1
    sudo yum update
  2. 安装EPEL存储库

    1
    sudo yum install epel-release
  3. 安装Nginx

    1
    sudo yum install nginx
  4. 启动Nginx服务

    1
    sudo systemctl start nginx
  5. 设置Nginx服务自启动

    1
    sudo systemctl enable nginx
  6. 验证Nginx是否运行

    1
    sudo systemctl status nginx

如果一切正常,输出应该是Active: active (running)或者类似的信息

现在,你已经成功在CentOS系统上安装和启动了Nginx

源码方式

直接访问Nginx官网,下载对应的安装包,本次案例选择的是nginx-1.6.3.tar.gz版本,安装环境是centos7

1
2
#下载nginx-1.6.3.tar.gz
wget -c https://nginx.org/download/nginx-1.6.3.tar.gz

提示wget命令找不到,使用如下命令,进行安装,之后再次执行上述下载命令

1
yum install wget
  1. 安装gcc 环境

    1
    yum install gcc-c++
  2. 安装PCRE依赖库

    1
    yum install -y pcre pcre-devel
  3. 安装zlib 依赖库

    1
    yum install -y zlib zlib-devel
  4. 安装OpenSSL安全套接字层密码库

    1
    yum install -y openssl openssl-devel
  5. 解压Nginx: 安装完以上环境库之后,接着进行解压操作

    1
    2
    # 解压文件夹
    tar -zxvf nginx-1.6.3.tar.gz
  6. 执行配置命令

    1
    2
    3
    4
    5
    cd nginx-1.6.3

    ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

    make install
  7. 查找安装路径

    1
    whereis nginx
  8. 启动服务

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    cd /usr/local/nginx/sbin/

    # 启动
    ./nginx

    # 停止,此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程
    ./nginx -s stop

    # 停止,此方式停止步骤是待nginx进程处理任务完毕进行停止
    ./nginx -s quit

    # 重新加载配置文件,Nginx服务不会中断
    ./nginx -s reload

    # 查看nginx进程
    ps -ef|grep nginx
  9. 修改配置文件: 比如,修改端口号,默认端口号为80

    1
    2
    3
    4
    5
    6
    7
    cd /usr/local/nginx/conf

    # 备份原始配置文件
    cp nginx.conf nginx.conf.bak

    # 修改配置文件
    vi nginx.conf

到此,nginx安装基本完成,直接在浏览器上访问服务器地址ip:80,就可以进入页面

配置tomcat

打开/usr/local/nginx/conf/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
listen 80;
server_name localhost;

#charset koi8-r;
#access_log logs/host.access.log main;

location / {
root html;
proxy_pass http://127.0.0.1:8080;
index index.html index.htm;

#proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

自定义域名

配置ssl证书:解压下载的证书文件压缩包,那么你会得到两个文件一个.key一个.pem结尾的文件,这就是SSL配置最主要的两个文件

打开/usr/local/nginx/conf/nginx.conf,添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# HTTPS server
server {
listen 443 ssl;
server_name localhost;

ssl on;
ssl_certificate ../ssl/hycbook.com_nginx/hycbook.com_bundle.pem;
ssl_certificate_key ../ssl/hycbook.com_nginx/hycbook.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;

location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}