部落格部署設計和構建

吳楠予發表於2020-07-25

Blog deployment design and construction | 部落格部署設計和構建

Convert markdown note files to blogs, and automatically update blog information

將markdown筆記檔案轉為部落格，且能夠自動更新部落格資訊

部落格可以用來記筆記或者釋出文章，是一種資訊載體，我們可以把一些資訊放到部落格，方便在網路環境查閱。

最近打算搭建一個私人部落格，已知網路上的公共部落格網站有部落格園（國內），github（全球）都挺好用的，本人有在用，部落格園和github也有掛的時候（訪問不了），情況很少；

搭建私人部落格能學習，擴充技能面，並且可以沒有那麼多依賴，可以自定義更多，自由發揮

Object | 功能

  1. Blog site, the content is static files

    執行環境：Linux 系統

  2. Operating environment: Linux system

    部落格網站，內容是靜態檔案

  3. Monitor folder changes through shell scripts, monitor the modification of markdown files under the folder, and automatically generate corresponding HTML directories and files

    通過shell指令碼監控資料夾變化，監控資料夾下markdown檔案的修改，自動生成對應的HTML目錄和檔案

Request | 要求

  1. 不能有較多依賴，儘量簡單，並且能夠較好地擴充套件（包括前端js html，後端linux）
  2. 自動化，除了markdown檔案需要人自己上傳，其他任何事情包括文章資訊更新都自動去完成

markdown 個人認為是一種非常好的寫作工具，markdown支援包括圖片，表格，簡單清晰。

Overall design ideas | 整體設計思路

將寫好的markdown檔案放入特定資料夾，伺服器獲得檔案資訊，將檔案轉為html檔案，並將資訊存入檔案，使首頁能否訪問到html檔案

  1. access：用靜態訪問，先有一個index.html檔案作為部落格訪問首頁，有一個bloginfo檔案用於存放文章（markdown）資訊，然後有一個js檔案 用於讀取bloginfo中的部落格資訊，並顯示在首頁
  2. monitor: linux 執行一個監控程式,監控markdown資料夾下面的變化，有檔案變化，就獲得檔案資訊並將資訊更新到bloginfo
  3. markdown2html： 當有檔案新增時，將檔案轉為HTML格式存入部落格訪問目錄（如有markdown檔案新增，通過工具將markdown轉為html）
  4. bloginfo: 生成html檔案後，將新增的markdown文章資訊更新到bloginfo檔案中

Specific plan | 具體實現

  1. accesspage：靜態檔案訪問形式，nginx實現，檔案以 html css js為主，index做導航頁，js中執行部落格資訊處理邏輯
  2. filemonitor：文件檔案以及資料夾的建立刪除等動作監控，使用inotify-tools在linux伺服器後臺監控
  3. markdown2html：markdown檔案轉html檔案，這裡採用markdown2html-converter工具
  4. bloginfo extraction：文章及資料夾資訊整理分類，資訊採用json檔案儲存，用jq對檔案讀寫更新資訊

Accesspage| 網頁

部落格的靜態訪問檔案，包括文章資訊；作為一個可以訪問的網站，靜態檔案訪問相對於動態，壓力最小，訪問也是較快速的

Index Page | 首頁

​ 首頁是訪問部落格首先顯示的頁面，應該簡單明瞭，不能給人複雜的感覺，主要做導航效果。

​ 首頁元素：

​ 以簡潔清晰問主，設立設計展示導航欄，文章目錄列表，文章標題列表， 翻頁器

		<div id="indexcontent" style="text-align: center;">
            <div id="headerHTML">
                <h1>頁面頭</h1>
            </div>
            <div id="articleTable">
            	文章目錄列表
			</div>
            <div id="articlelist">
                <h3>文章標題1</h3>
                <p>摘要</p>
                <p>時間</p>
                <h3>文章標題2</h3>
                <p>摘要</p>
                <p>時間</p>
            </div>
            <div id="pageTurner">
                <h2>
                    &lt; 1 2 3 4 5 &gt;
                </h2> 翻頁器
            </div>
        </div>

Index.js Logic | 首頁邏輯處理

主要邏輯應該是在頁面載入完畢之後，獲取bloginfo 資料，遍歷提取文章簡要資訊，並寫入首頁目錄

window.onload = function () {
    //get bloginfo
    //foreache 遍歷
    //write in articleTable
}

Filemonitor | 監控

markdown檔案如果有變化，需要監聽到變化，並且拿到這些markdown檔案的資訊並儲存

有什麼工具能夠做到監控，也是需要去了解的，查閱資料瞭解到linux有監聽工具inotify-tools可以做到，這裡用shell指令碼去執行這個程式（後臺執行）

inotify-tools | 監控工具

系統環境：Linux Centos7

install | 安裝

yum install -y epel-release && yum update 更新資源

yum --enablerepo=epel install inotify-tools 下載安裝

use | 使用

inotifywait folder 這是簡單表示，實際引數更具具體要求而定，inotifywait表示監聽資料夾下的變化 folder就是監聽物件

example

如果監聽 /home/data/narule/markdown/ 資料夾，之後在/home/data/narule/markdown/建立了java 資料夾

對應的指令碼思路：

#!/bin/bash

#設定監聽的資料夾位置
SRCDIR=/home/data/narule/markdown/  


# 啟動監聽任務：監聽create,delete,modify 事件  -e 表示監聽事件輸出 
inotifywait -mqr --timefmt '%d/%m/%y %H:%M' --format '%T %w %f %e' -e 'create,delete,modify' $SRCDIR | while read DATE TIME DIR FILE EVENT;


# 迴圈監聽邏輯
do
	echo ${EVENT}
	#獲取資訊
	#資料夾位置  全路徑 DIR=/home/data/narule/markdown/
    folder=$DIR 
    #檔名（資料夾也是檔案）  file=java
    file=${$FILE} 
    
    
    #判斷事件型別
    if [[ $EVENT == "CREATE,ISDIR" ]]; #建立資料夾 
    	then #執行對應動作 這裡建立java資料夾，所以在此處執行相關指令碼
    		
    elif [[ $EVENT == "MODIFY,ISDIR" ]]; #修改資料夾
    	then
    
    elif [[ $EVENT == "DELETE,ISDIR" ]]; #刪除資料夾
    	then
    
    elif  [[ $EVENT == "CREATE" ]]; #建立檔案
    	then
    
    elif [[ $EVENT == "MODIFY" ]]; #修改檔案
    	then
    	
    elif [[ $EVENT == "DELETE" ]]; #刪除檔案
    	then
    	
    fi
done

Markdown2html | 文章轉網頁格式

markdown檔案轉為html檔案是普遍需求，markdown釋出後，將其轉為html檔案，能夠很好的支援網站的訪問

很多網站，是直接將markdown檔案翻譯為html內容，顯示在頁面，github中也有很多開源的資源，這裡採用來自麻省理工？某團隊的工具 markdown2html-converter。感謝

markdown2html-converter

系統環境：Linux Centos7

install | 安裝

安裝前提是你的系統安裝了rust動態程式語言

# rust 安裝 安裝看看是否能夠全域性執行
curl -sSf https://build.travis-ci.org/files/rustup-init.sh | sh -s -- --default-toolchain=$TRAVIS_RUST_VERSION --profile=minimal -y

# 從github獲取專案程式碼
git clone --depth=50 --branch=v1.1.1 https://github.com/magiclen/markdown2html-converter.git  

# 構建
## 配置TARGET
export TARGET=x86_64-unknown-linux-musl

# markdown2html-converter 資源獲取
rustup target add $TARGET
cargo test --target $TARGET

# 編譯生成可執行檔案
make

官網安裝教程 https://travis-ci.org/github/magiclen/markdown2html-converter/jobs/709086971

use | 使用

markdown2html-conventer

Bloginfo extraction| 部落格資訊提取

文章的資訊如何存放，用什麼形式儲存，會較好理解並且能夠解析，這裡打算用json資料形式去儲存部落格的文章資訊

**json解析確定後，遇到一些json檔案建立和讀寫的問題，json檔案知識包含網站文章的資訊，本人覺得不應該執行一個java或者其他什麼程式去做這件事，這沒必要，浪費資源；最後我在網上找到了jq工具，他可以很好的解析json檔案並配合shell修改json檔案 **

**jq文件 **

jq | json解析工具

系統環境：Linux Centos7

install | 安裝

yum install -y jq

文件：https://github.com/stedolan/jq/wiki/Cookbook

jq 的使用命令比較多，本人也是剛瞭解

use | 使用

解析檔案

cat file.json | jq . 或者 jq . file.json

前提file.json 內容是正確的json格式，才好正常解析

example

author.json：

{
    "name": "rule",
    "age": "2",
    "from": "china"
}

執行 cat author.json | jq ' ."age" = "5" ' 後控制檯輸出：

{
    "name": "rule",
    "age": "5",
    "from": "china"
}

執行 cat author.json | jq ' del(."name") ' 後控制檯輸出：

{
    "age": "5",
    "from": "china"
}

通過這些命令，就可以處理部落格文章資訊儲存到json檔案中，完全自動更新

編寫好指令碼檔案後，給檔案加許可權使可執行

chmod + x markdown_monitor.sh

後臺啟動

nohup ./markdown_monitor.sh > /var/log/monitor.log 2>&1 &

就可以監控運作了，上傳markdown檔案，就自動更新HTML頁面到部落格

​ 2020-07-25 吳楠予

相關文章