github + jekyll 建自己的博客

自從用 markdown 寫文檔之後，感覺就離不開它了。工作這麼久，遺憾沒有條理化地將知識實時落地，後面做了大量重複勞動。幸運 github 提供了一個很好的源碼管理和博客平臺。[我的博客][框架]來自Gaohaoyang，然而國內的網絡對 github 平臺不是十分友好，如有條件，可以同時部署到自己的雲主機上。

更精彩內容，可以關注我的博客：wenfh2020.com

---

效果

---

概述

自己的博客 = 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