gitbook博客搭建
gitbook
环境搭建
nodejs
官网下载,这里可以选择12.16.1
版本,太新的版本后面可能会出现奇怪的问题,这是笔者使用的版本
执行以下命令安装gitbook命令
1 | npm install -g gitbook-cli |
初始化电子书
初始化电子书
1 | gitbook init |
这时候会生成下面两个文件README.md
和SUMMARY.md
README.md
书籍的介绍写在这个文件里;SUMMARY.md
书籍的目录结构在这里配置
安装插件
有配置book.json时,执行gitbook install
会安装插件到node_modules目录
使用以下命令启动gitbook,打开http://localhost:4000就可以访问了,
1 | gitbook serve |
重要文件
book.json,没有的话,自己新建一个就好
用于配置插件和书籍的基本信息
1 | { |
Gitbook 默认带有 5 个插件:
- highlight
- search
- sharing
- font-settings
- livereload
重要插件说明:
- github: 右上角添加github图标
- donate: 文章打赏插件,在文末点击展示付款码
- sharing-plus: 比默认的分享插件,多了更多的分享按钮
- mathjax: LaTeX公式显示插件,可以支持绝大多数的数据公式,个别的公式还是会有问题
- mermaid-gb3: Mermaid渲染插件,可以支持画图
- code: 为代码块添加行号和复制按钮,复制按钮可关闭,单行代码无行号
- search-plus: 文章内容搜索插件,支持中文,使用这个插件时要移除默认的lunr和search插件
- lightbox: 当前页显示大图,点击图片会放大显示,不支持切换图片
- theme-comscore: 主题插件,默认主题是黑白的,
comscore
主题是彩色的,标题和正文颜色有所区分 - valine: 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统
- pageview-count: 页面浏览量统计,但好像用不了,自己结合cutercounter进行了改造
- favicon-absolute: 网页icon图标定义
- copyright-v: 版权插件,复制文章内容时会附带上定义好的版权信息,和知乎复制的效果一样
.bookignore,存放不想被打包的资源
1 | .gitignore |
_book
使用gitbook build
命令,会在项目的目录下生成一个 _book
目录,里面的内容为静态站点的资源文件
发布出来的就是这个目录下的资源
gitbook build
只负责生成静态文件,gitbook serve
不仅生成文件,还会启动网站服务
使用选项 --log=debug
和 --debug
来获取更好的错误消息
1 | gitbook build ./ --log=debug --debug |
SUMMARY.md,用于存放数据目录
1 | # Summary |
node_modules
终端执行gitbook install
可以安装book.json
配置的插件,下载的插件会在node_modules文件夹
markdown语法
Markdown
是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)
它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档
推荐配合Typora编辑器一起食用
改造
访客数
待完成…
valine
美化
待完成…
部署
前面部分的内容主要讲解了gitbook的构建和美化优化等内容
这部分讲一下如何借助github pages
和gitee 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 和 GitHub Packages 的存储使用详情。 存储使用数据每小时同步一次
(可选)在“本月使用情况”旁边,单击“获取使用情况报告”向帐户主电子邮件地址发送关于 GitHub Actions 和 GitHub Packages 存储使用情况的 CSV 报告
githun actions的使用案例可以自己百度或参考github协作
github pages
自动发布到github pages分支(可以自己设置分支)
配置token
github项目下新建:name=TOKEN,value=github生成的token
基本用法
1 | - name: Deploy #步骤4:把编译好的静态目录上传到gh-pages分支上 |
gitee pages
使用 GitHub Actions 解决了 GitHub 代码自动同步 Gitee 的问题,但我们的博客仓库代码同步到 Gitee 后,并不能像 GitHub 一样自动部署 Pages,如果不使用付费的 Gitee Pages Pro 服务,那我们该怎么实现 Gitee 自动部署 Pages 呢
基本用法
新建一个name=GITEE_PASSWORD, value=gitee登陆密码的secrets
1 | - name: Build Gitee Pages |
多吉云cdn
融合CDN是一种稳定易用、低成本的内容分发服务,为网页 Web、应用 App、文件下载、音视频点播等场景提供加速服务,提升用户体验,降低服务端带宽压力,节省成本的方案
多吉云不自建节点,而是融合阿里云、腾讯云、华为云、网宿等国内一线 CDN 厂商的节点,质量可靠,实时调整调度策略,精准保障访问质量
添加网站
使用多吉云需要网站备案后才可以使用,配置步骤如下:
注册多吉云账号
添加域名管理,详细的配置见下方
添加解析,需要在域名网站添加CNAME解析(多吉云会提供)
| 字段 | 填写说明 |
| ————————- | —————————————————————————————— |
| 记录类型 | 选择CNAME
|
| 主机记录 | 填写完整域名除去主域名后的部分,填写示例:
加速域名为example.com
,则主机记录填写@
加速域名为cdn.example.com
,则主机记录填写cdn
加速域名为doge.cdn.example.com
,则主机记录填写doge.cdn
|
| 线路类型/请求来源 | 建议保持默认
|
| 记录值 | 填写控制台域名管理中该域名的 CNAME 值,一般以.s2-xxx.dogedns.com
(xxx 根据业务类型会有不同)结尾 |
| TTL | 建议保持默认值 10 分钟 |点击确认保存记录,等待生效即可
验证生效
要验证 CNAME 是否配置成功,可以使用命令行工具测试:
在 Windows 系统下,可以使用系统自带的
nslookup
工具进行测试:运行CMD
程序,输入指令:1
nslookup -qt=cname 加速域名
请将
加速域名
替换为你添加的加速域名,并运行上述指令。 如果程序显示的canonical name
和多吉云控制台提供的CNAME值一致,则表示你的加速域名已经成功配置 CNAME,加速生效了在MacOS或Linux系统下,请使用
dig
命令测试:在终端内运行命令:1
dig 加速域名
请将
加速域名
替换为你添加的加速域名,并运行上述指令。 如果程序显示的CNAME
和多吉云控制台提供的CNAME值一致,则表示你的加速域名已经成功配置CNAME,加速生效了
详细配置
网站加速详细配置,可以参考如下
tomcat部署网站
tomcat安装
下载Linux版本的tomcat
下载地址:Apache Tomcat® - Apache Tomcat 9 Software Downloads
比如:apache-tomcat-9.0.80.tar.gz,将其解压到/usr/local/tomcat
启动
1 | cd /usr/soft/apache-tomcat-9.0.80/bin |
注意: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 | <!-- 端口 --> |
这里主要修改端口和项目路径
端口开放
放行指定端口号
1 | # 开放8080端口 |
nginx
配置文件说明
1 | ... # 全局块 |
- 全局 块: 配置影响 Nginx 全局的指令。通常包括:
- 运行 Nginx 服务器的用户组
- Nginx 进程 PID 存放路径
- 日志存放路径
- 配置文件引入
- 允许生成的 worker process 数量
- events 块: 配置影响 Nginx 服务器或用户网络连接的参数,包括:
- 每个进程的最大连接数
- 事件驱动模型的选择
- 是否允许同时接受多个网络连接
- 开启多个网络连接序列化
- http 块: 可以嵌套多个 server,配置代理、缓存、日志定义等绝大多数功能和第三方模块的配置。例如:
- 文件引入
- MIME-type 定义
- 日志自定义
- 是否使用 sendfile 传输文件
- 连接超时时间
- 单连接请求数
- server 块: 配置虚拟主机的相关参数,一个 http 中可以有多个 server
- location 块: 配置请求的路由,以及各种页面的处理情况
配置文件示例
1 | #user nobody; |
yum方式
以下是在CentOS系统中安装Nginx的步骤:
更新系统软件包
1
sudo yum update
安装EPEL存储库
1
sudo yum install epel-release
安装Nginx
1
sudo yum install nginx
启动Nginx服务
1
sudo systemctl start nginx
设置Nginx服务自启动
1
sudo systemctl enable nginx
验证Nginx是否运行
1
sudo systemctl status nginx
日志查看
1
tail -f /usr/local/nginx/logs/access.log
如果一切正常,输出应该是Active: active (running)或者类似的信息
现在,你已经成功在CentOS系统上安装和启动了Nginx
源码方式
直接访问Nginx官网,下载对应的安装包,本次案例选择的是nginx-1.6.3.tar.gz
版本,安装环境是centos7
1 | #下载nginx-1.6.3.tar.gz |
提示wget
命令找不到,使用如下命令,进行安装,之后再次执行上述下载命令
1 | yum install wget |
安装gcc 环境
1
yum install gcc-c++
安装PCRE依赖库
1
yum install -y pcre pcre-devel
安装zlib 依赖库
1
yum install -y zlib zlib-devel
安装OpenSSL安全套接字层密码库
1
yum install -y openssl openssl-devel
解压Nginx: 安装完以上环境库之后,接着进行解压操作
1
2# 解压文件夹
tar -zxvf nginx-1.6.3.tar.gz执行配置命令
1
2
3
4
5cd nginx-1.6.3
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
make install查找安装路径
1
whereis nginx
启动服务
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16cd /usr/local/nginx/sbin/
# 启动
./nginx
# 停止,此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程
./nginx -s stop
# 停止,此方式停止步骤是待nginx进程处理任务完毕进行停止
./nginx -s quit
# 重新加载配置文件,Nginx服务不会中断
./nginx -s reload
# 查看nginx进程
ps -ef|grep nginx修改配置文件: 比如,修改端口号,默认端口号为
80
1
2
3
4
5
6
7cd /usr/local/nginx/conf
# 备份原始配置文件
cp nginx.conf nginx.conf.bak
# 修改配置文件
vi nginx.conf日志查看
1
tail -f /usr/local/nginx/logs/access.log
到此,nginx安装基本完成,直接在浏览器上访问服务器地址ip:80
,就可以进入页面
配置路由
打开nginx.conf
配置文件,配置路由转发
1 | #user nobody; |
自定义域名
配置ssl证书:解压下载的证书文件压缩包,那么你会得到两个文件一个.key一个.pem结尾的文件,这就是SSL配置最主要的两个文件
打开/usr/local/nginx/conf/nginx.conf
,添加如下配置
1 | # HTTPS server |