github + jekyll 建自己的博客

自从用 markdown 写文档之后，感觉就离不开它了。工作这么久，遗憾没有条理化地将知识实时落地，后面做了大量重复劳动。幸运 github 提供了一个很好的源码管理和博客平台。[我的博客][框架]来自Gaohaoyang，然而国内的网络对 github 平台不是十分友好，如有条件，可以同时部署到自己的云主机上。

🔥 文章来源：《github + jekyll 建自己的博客
》

---

效果

---

概述

自己的博客 = git + github + jekyll + vscode

---

目的

希望对知识进行条理化管理。有几点要求：

1. 终端简洁，无广告，无推荐。
2. 支持 markdown 文本格式，能展示 markdown 目录。
3. 支持文章分类管理。
4. 支持文章题目搜索。

---

搭建流程

github 上搭建博客，并不复杂。jekyll + github 搭建详细文档，网络上很多，可以参考下这个，细节问题，还是需要花点时间，简单记录下流程：

1. 会 git 的基本使用方法。
2. 注册个 github 账号。
3. 在 github 上建立自己的博客项目 xxx.github.io。
4. 拷贝别人的 xxx.github.io 文件放在自己的目录下。
5. 别人的 xxx.github.io 项目有别人的信息，需要替换删减成自己的。
6. 本地查看博客预览。（请参考这个文档的搭建流程）
7. 本地预览正常，git 提交 github。
8. 浏览器打开链接 xxx.github.io。（刷新有时候不是实时的，大概需要等 1 分钟左右）

---

优化

页面代码块显示

原来框架的代码块代码自动换行，字体太大，还屏蔽了滚动条滚动功能。在手机上看，感觉挺别扭的，可以修改文件 _sass/_syntax-highlighting.scss 相关选项设置。

pre {
    margin: 12px 0;
    padding: 8px 12px;
    overflow-x: auto;      // 滚动条滚动功能
    word-wrap: break-word;      /* IE 5.5-7 */
    // white-space: pre-wrap;      /* current browsers */
    white-space: none;     // 代码自动换行  /* current browsers */
    > code {
        margin: 0;
        padding: 0;
        font-size: 12px;   // 代码块字体大小
        color: #d1d1c9;
        border: none;
        background-color: #272822;
        line-height: 1em;
    }
}

---

搜索文章题目功能

原框架没有搜索功能，可以将这个博客的搜索组件添加进来，谢谢了。有些代码没扣得好，搜索页面还有点问题，凑合着用吧。

双击键盘 ctrl 键，调出搜索浮动窗口，或者点击页面右下角搜索图标。

---

提交博客文章

写博客文章，经常操作的只有 images 和 _posts 目录，将 git 的几个命令 pull， add，commit，push 整合在一起方便操作。

commit.sh

#!/bin/sh
# wenfh2020/2020-02-18/./commit.sh msg1 msg2

cd `dirname $0`
work_path=`pwd`
cd $work_path

if [ $# -lt 1 ]; then
    echo 'pls input commit message'
    exit 1
fi

git pull && git add images _posts && git commit -m "$(echo "$@")" && git push -u origin master

---

启动

• 用脚本 refresh.sh 启动 jekyll 服务，当博客目录有更新时，实时 rebuild。

#!/bin/sh
# wenfh2020/2020-02-18/refresh for browser

cd `dirname $0`
work_path=`pwd`
cd $work_path

# find and kill
_pids=`ps -ef | grep 'jekyll serve' | grep -v grep | awk '{print $2}'`
for p in $_pids
do
    echo "kill pid=$p"
    kill -9 $p
done

# 有时候不能实时刷新，需要删除 _site 目录，重新启动。
[ -d _site ] && rm -r _site
jekyll serve -wIt

• 后台运行 jekyll 服务。contab 后台定时刷新，可以将时间设置短一点。

# crontab -e
* */12 * * * nohup /home/other/wenfh2020.github.io/refresh.sh >> /tmp/blog_log.txt 2>&1 &

• jekyll 服务的其它功能配置，可以参考帮助。

jekyll serve -h

---

markdown 编辑器

markdown 编辑器可以用 vscode，有不少插件支持。

---

插件

插件	描述
Markdown All in Once	文档编写基本插件
Markdown Preview Enhanced	预览
markdownlint	语法检查
PicGo	可以关联图床
Paste Image	在编辑器贴图

---

Paste Image 插件主要配置项：

配置项	数据
Base Path	${projectRoot}
Insert Pattern	${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}
Path	${projectRoot}/images

---

图片

在博客目录下创建 images 文件夹，用于存放文章用到的图片。

markdown 插入图片格式如下：


---

ECS 部署

github 国内的网络访问不是很稳定，特别是图片加载。自己手上有一台云主机，顺手部署上去，云主机从 github 上拉取代码，两个平台可以同时使用。

博客更新流程：

1. 本地 vscode 编辑 markdown 文档。
2. 本地网页预览博客。
3. 上传代码到 github。
4. 云主机上用 git pull 拉取代码。（可以用 crontab 定时执行脚本）
5. 刷新域名对应博客。

---

域名

域名不是必须的，用 ip 也行。

1. 阿里云购买域名。
2. 阿里云域名绑定云主机 ip。

   以前没有备案过的，域名需要实名认证，备案，这需要等，可以先用 ip。

---

安装 ruby

云主机系统是 centos7

yum 默认安装 ruby 版本太低，需要升级到 2.3 以上。

# 安装开发工具
yum groupinstall "Development tools"
# 清理安装过的 ruby 文件
yum erase ruby ruby-libs ruby-mode ruby-rdoc ruby-irb ruby-ri ruby-docs
# 安装依赖
yum -y install zlib-devel curl-devel openssl-devel httpd-devel apr-devel apr-util-devel mysql-devel

下载源码包安装

cd /home/soft
wget https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.5.tar.gz
tar zxf ruby-2.6.5.tar.gz
cd ruby-2.6.5
./configure
make && make install
ruby -v

---

拉取代码

cd /home/other/
git clone https://github.com/wenfh2020/wenfh2020.github.io.git

---

运行 jekyll 服务

cd wenfh2020.github.io
gem install jekyll bundler
bundle install
jekyll serve -wIt

---

nginx 配置

• 添加域名到新的 nginx 配置文件。
• http 升级 https

mkdir -p /etc/nginx/vhost
cd /etc/nginx/vhost
vim blog.conf

# 注意 nginx.conf 中默认的 80 端口处理.
# 如果没有使用，可以注释掉 nginx.conf 的 80 端口的 server。

server {
    listen 80;
    server_name  wenfh2020.com www.wenfh2020.com;
    # http 转 https
    return 301   https://$host$request_uri;
}

server {
    listen       443 ssl;
    server_name  wenfh2020.com www.wenfh2020.com;
    ssl_certificate /usr/local/nginx/ssl/blog/3515736_wenfh2020.com.pem;
    ssl_certificate_key /usr/local/nginx/ssl/blog/3515736_wenfh2020.com.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
    ssl_prefer_server_ciphers on;

    root /home/other/wenfh2020.github.io;
    # 反向代理
    location / {
        proxy_pass http://localhost:4000;
    }

    # 防止盗链
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        root /home/other/wenfh2020.github.io;
        valid_referers none blocked server_names  ~\.google\. ~\.baidu\.;
        if ($invalid_referer) {
            return 403;
        }

        expires    30d;
        access_log off;
    }
}

• 添加新域名文件路径到主配置文件。

vim /etc/nginx/nginx.conf

http {
    ...
    # 添加新域名文件
    include /etc/nginx/vhost/*.conf;
}

• 刷新 nginx 配置

nginx -s reload

---

参考

• jekyll 官网
• simple-jekyll-search
• 通过Nginx实现图片防盗链

---

• 更精彩内容，请关注作者博客：wenfh2020.com