github + jekyll 建自己的博客

2020-02-17

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


1. 效果

效果


2. 概述

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


3. 目的

对知识进行条理化管理。有几点要求:

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

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 分钟左右)

5. 系统部署

如果你只用 xxx.github.io,博客也能正常使用,但是预览不是很方便,还有 github 有时候网络很慢,这时候需要部署本地的,或者将它部署在云服务。

5.1. Linux

5.1.1. 安装 ruby

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

1
2
3
4
5
6
# 安装开发工具
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

下载源码包安装:

1
2
3
4
5
6
7
8
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 运行版本。
ruby -v

5.1.2. 拉取代码

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

我的 blog 图片现在越来越多了,代码拉取可能会有点慢,直接下载压缩包可能要快点。


5.1.3. 运行 jekyll 服务

1
2
3
4
5
cd wenfh2020.github.io
gem install jekyll bundler
bundle install
# jekyll serve -wIt
bundle exec jekyll serve

5.2. MacOS

MacOS 与 Linux 安装大同小异,不同 macOS 系统版本安装遇到的问题可能不一样。

MacOS 升级后,附带着很多软件会升级。最近手贱将系统升级到 macOS big sur,系统将 ruby 2.x 升级到 3.x 了,然后服务跑不起来,这时候应该把 ruby 恢复到旧版本,重新走一次安装流程。

已经稳定了的部署环境,就不要随便升级了,升级后服务跑不起来,对于小白,重新稳定不是一件容易的事情 🤦‍♂️。


5.2.1. 问题

ERROR: Error installing http_parser.rb:……

listen-3.2.1 requires ruby version >= 2.2.7, ~> 2.2, which is incompatible with the current version, ruby 3.0.0p0


5.2.2. 安装流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 查看版本号,确认是否被升级。
sudo ruby -v
# 卸载
brew uinstall ruby
# 安装旧版 ruby
wget https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.0-preview1.tar.bz2
tar zxf ruby-2.6.0-preview1.tar.bz
cd ruby-2.6.0-preview1
./configure
make
make install
# 安装 jekyll bundler
sudo gem install jekyll bundler
sudo bundle install
# 余下环节,拉取代码,运行 jekyll 服务,参考 Linux 的步骤。

6. 优化

6.1. 代码块

  • 原来框架的代码块代码自动换行,字体太大,还屏蔽了滚动条滚动功能。在手机上看,感觉挺别扭的,可以修改文件 _sass/_syntax-highlighting.scss 相关选项设置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
    }
}
  • 代码主题,可以在 _sass/_syntax-highlighting.scss.highlight 中,调整自己喜欢的颜色。也可以引用第三方插件 highlight.min.js
1
2
3
4
5
6
7
8
.highlight {
    border-radius: 3px;

    background: #272822;
    .hll { background-color: #272822; }
    .c { color: #6a9955 } /* Comment */
    ...
}

6.2. 搜索文章题目功能

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

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

搜索


6.3. 其它功能

后面陆续添加了一些功能:作者版权信息,分享,打赏,评论。

分享功能感觉没啥用屏蔽了。评论是 gitalk,加载速度慢,也屏蔽了,有需要的同学再重新打开吧。

新增功能


6.4. 提交博客文章

写博客文章,经常操作的只有 images_posts 目录,将 git 的几个命令 pulladdcommitpush 整合在一起方便操作。

commit.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/bin/sh
# -------------------------------------------------------------------------------
# project  blog
# file:    commit.sh
# brief    整合多个 git 命令,方便提交文章。
# author:  wenfh2020
# date:    2020-02-18
# note:    ./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

_files='images _posts commit.sh refresh.sh _config.yml README.md _includes'
git pull && git add $_files && git commit -m "$(echo "$@")" && git push -u origin master && git status

7. 启动

  • 用脚本 refresh.sh 启动 jekyll 服务,当博客目录有更新时,实时 rebuild。
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
#!/bin/sh
# -------------------------------------------------------------------------------
# project  refresh
# file:    refresh.sh
# brief    rebuild blog to run.
# author:  wenfh2020
# date:    2020-02-18
# note:    nohup ./refresh.sh >> /tmp/blog_log.txt 2>&1 &
# -------------------------------------------------------------------------------

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
bundle exec jekyll serve
  • 后台运行 jekyll 服务。contab 后台定时刷新,可以将时间设置短一点。
1
2
# crontab -e
* */12 * * * nohup /home/other/wenfh2020.github.io/refresh.sh >> /tmp/blog_log.txt 2>&1 &
  • jekyll 服务的其它功能配置,可以参考帮助。
1
jekyll serve -h

8. markdown 编辑器

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


8.1. 插件

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

Paste Image 插件主要配置项:

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

8.2. 图片

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

markdown 插入图片格式如下:

![](/images/123.png){: data-action=”zoom”}


9. ECS 云服务部署

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

博客更新流程:

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

9.1. 域名

域名不是必须的,它的好处就不用多说了。

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

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


9.2. 安装服务

参考上面 系统部署 章节。


9.3. nginx 配置

1
2
3
mkdir -p /etc/nginx/vhost
cd /etc/nginx/vhost
vim blog.conf
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
# 注意 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\. ~\.bing\.;
        if ($invalid_referer) {
            return 403;
        }

        expires    30d;
        access_log off;
    }
}
  • 添加新域名文件路径到主配置文件。
1
vim /etc/nginx/nginx.conf
1
2
3
4
5
http {
    ...
    # 添加新域名文件
    include /etc/nginx/vhost/*.conf;
}
  • 刷新 nginx 配置
1
nginx -s reload

10. 参考