1 gitbook
1.1 环境搭建
nodejs
官网下载,这里可以选择12.16.1
版本,太新的版本后面可能会出现奇怪的问题,这是笔者使用的版本
执行以下命令安装gitbook命令
npm install -g gitbook-cli
# 查看是否安装完成, 能正确显示版本号就行,这里推荐gitBook==3.2.3
gitbook -V
CLI version: 2.3.2
GitBook version: 3.2.3
1.2 初始化电子书
初始化电子书
gitbook init
这时候会生成下面两个文件README.md
和SUMMARY.md
README.md
书籍的介绍写在这个文件里;SUMMARY.md
书籍的目录结构在这里配置
安装插件
有配置book.json时,执行gitbook install
会安装插件到node_modules目录
使用以下命令启动gitbook,打开http://localhost:4000就可以访问了,
gitbook serve
1.3 重要文件
book.json,没有的话,自己新建一个就好
用于配置插件和书籍的基本信息
{
"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: 文章内容搜索插件,支持中文,使用这个插件时要移除默认的lunr和search插件
- lightbox: 当前页显示大图,点击图片会放大显示,不支持切换图片
- theme-comscore: 主题插件,默认主题是黑白的,
comscore
主题是彩色的,标题和正文颜色有所区分 - valine: 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统
- pageview-count: 页面浏览量统计,但好像用不了,自己结合cutercounter进行了改造
- favicon-absolute: 网页icon图标定义
- copyright-v: 版权插件,复制文章内容时会附带上定义好的版权信息,和知乎复制的效果一样
.bookignore,存放不想被打包的资源
.gitignore
.bookignore
book_default.json
_book/chapters/*.md
*.bat
*.pdf
_book
使用gitbook build
命令,会在项目的目录下生成一个 _book
目录,里面的内容为静态站点的资源文件
发布出来的就是这个目录下的资源
gitbook build
只负责生成静态文件,gitbook serve
不仅生成文件,还会启动网站服务
使用选项 --log=debug
和 --debug
来获取更好的错误消息
gitbook build ./ --log=debug --debug
SUMMARY.md,用于存放数据目录
# 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文件夹
1.4 markdown语法
Markdown
是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)
它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 HTML 文档
推荐配合Typora编辑器一起食用
2 改造
2.1 访客数
待完成...
2.2 valine
2.3 美化
待完成...
3 部署
前面部分的内容主要讲解了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协作
3.1 github pages
自动发布到github pages分支(可以自己设置分支)
配置token
github项目下新建:name=TOKEN,value=github生成的token
基本用法
- 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
3.2 gitee pages
使用 GitHub Actions 解决了 GitHub 代码自动同步 Gitee 的问题,但我们的博客仓库代码同步到 Gitee 后,并不能像 GitHub 一样自动部署 Pages,如果不使用付费的 Gitee Pages Pro 服务,那我们该怎么实现 Gitee 自动部署 Pages 呢
基本用法
新建一个name=GITEE_PASSWORD, value=gitee登陆密码的secrets
- 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
4 多吉云cdn
融合CDN是一种稳定易用、低成本的内容分发服务,为网页 Web、应用 App、文件下载、音视频点播等场景提供加速服务,提升用户体验,降低服务端带宽压力,节省成本的方案
多吉云不自建节点,而是融合阿里云、腾讯云、华为云、网宿等国内一线 CDN 厂商的节点,质量可靠,实时调整调度策略,精准保障访问质量
4.1 添加网站
使用多吉云需要网站备案后才可以使用,配置步骤如下:
注册多吉云账号
添加域名管理,详细的配置见下方
添加解析,需要在域名网站添加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
程序,输入指令:nslookup -qt=cname 加速域名
请将
加速域名
替换为你添加的加速域名,并运行上述指令。 如果程序显示的canonical name
和多吉云控制台提供的CNAME值一致,则表示你的加速域名已经成功配置 CNAME,加速生效了在MacOS或Linux系统下,请使用
dig
命令测试:在终端内运行命令:dig 加速域名
请将
加速域名
替换为你添加的加速域名,并运行上述指令。 如果程序显示的CNAME
和多吉云控制台提供的CNAME值一致,则表示你的加速域名已经成功配置CNAME,加速生效了
4.2 详细配置
网站加速详细配置,可以参考如下
5 tomcat部署网站
5.1 tomcat安装
下载Linux版本的tomcat
下载地址:Apache Tomcat® - Apache Tomcat 9 Software Downloads
比如:apache-tomcat-9.0.80.tar.gz,将其解压到/usr/local/tomcat
启动
cd /usr/soft/apache-tomcat-9.0.80/bin
# 启动
./startup.sh
# 停止
./shutdown.sh
注意:tomcat依赖了jdk
5.2 静态网站文件
将静态网站文件添加软连接到/usr/local/tomcat/apache-tomcat-9.0.80/webapps
ln -s 静态网站文件 /usr/local/tomcat/apache-tomcat-9.0.80/webapps/静态网站文件
同时修改配置文件/usr/local/tomcat/apache-tomcat-9.0.80/conf/server.xml
<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 "%r" %s %b" />
<Context path="" docBase="/usr/local/tomcat/apache-tomcat-9.0.80/webapps/hycBookPage" reloadale="false" />
</Host>
这里主要修改端口和项目路径
端口开放
放行指定端口号
# 开放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
5.3 nginx
5.3.1 yum方式
以下是在CentOS系统中安装Nginx的步骤:
更新系统软件包
sudo yum update
安装EPEL存储库
sudo yum install epel-release
安装Nginx
sudo yum install nginx
启动Nginx服务
sudo systemctl start nginx
设置Nginx服务自启动
sudo systemctl enable nginx
验证Nginx是否运行
sudo systemctl status nginx
如果一切正常,输出应该是Active: active (running)或者类似的信息
现在,你已经成功在CentOS系统上安装和启动了Nginx
5.3.2 源码方式
直接访问Nginx官网,下载对应的安装包,本次案例选择的是nginx-1.6.3.tar.gz
版本,安装环境是centos7
#下载nginx-1.6.3.tar.gz
wget -c https://nginx.org/download/nginx-1.6.3.tar.gz
提示wget
命令找不到,使用如下命令,进行安装,之后再次执行上述下载命令
yum install wget
安装gcc 环境
yum install gcc-c++
安装PCRE依赖库
yum install -y pcre pcre-devel
安装zlib 依赖库
yum install -y zlib zlib-devel
安装OpenSSL安全套接字层密码库
yum install -y openssl openssl-devel
解压Nginx: 安装完以上环境库之后,接着进行解压操作
# 解压文件夹 tar -zxvf nginx-1.6.3.tar.gz
执行配置命令
cd nginx-1.6.3 ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module make install
查找安装路径
whereis nginx
启动服务
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
修改配置文件: 比如,修改端口号,默认端口号为
80
cd /usr/local/nginx/conf # 备份原始配置文件 cp nginx.conf nginx.conf.bak # 修改配置文件 vi nginx.conf
到此,nginx安装基本完成,直接在浏览器上访问服务器地址ip:80
,就可以进入页面
5.3.3 配置tomcat
打开/usr/local/nginx/conf/nginx.conf
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;
}
}
5.4 自定义域名
配置ssl证书:解压下载的证书文件压缩包,那么你会得到两个文件一个.key一个.pem结尾的文件,这就是SSL配置最主要的两个文件
打开/usr/local/nginx/conf/nginx.conf
,添加如下配置
# 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";
}
}