1 gitbook

使用 Gitbook 打造你的电子书

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

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

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

安装插件

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

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

gitbook serve

img

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: 文章内容搜索插件,支持中文,使用这个插件时要移除默认的lunrsearch插件
  • 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

博客Valine评论样式美化

2.3 美化

待完成...

3 部署

打造完美写作系统: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协作

3.1 github pages

GitHub Pages Deploy Action

自动发布到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

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

使用 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 添加网站

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

  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程序,输入指令:

      nslookup -qt=cname 加速域名
      

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

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

      dig 加速域名
      

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

4.2 详细配置

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

多吉云_基本配置

多吉云_回源配置

多吉云_缓存与响应

多吉云_访问控制

多吉云_性能优化

多吉云_HTTPS配置

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 &quot;%r&quot; %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的步骤:

  1. 更新系统软件包

    sudo yum update
    
  2. 安装EPEL存储库

     sudo yum install epel-release
    
  3. 安装Nginx

    sudo yum install nginx
    
  4. 启动Nginx服务

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

    sudo systemctl enable nginx
    
  6. 验证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
  1. 安装gcc 环境

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

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

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

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

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

    cd nginx-1.6.3
    
    ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
    
    make install
    
  7. 查找安装路径

    whereis nginx
    
  8. 启动服务

    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

    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";
    }
}

Copyright © narutohyc.com 2021 all right reserved,powered by Gitbook该文件修订时间: 2024-02-15 00:50:07

results matching ""

    No results matching ""