博客部署設計和構建
- 2020 年 7 月 25 日
- 筆記
- H5, linux/windows
Blog deployment design and construction | 博客部署設計和構建
Convert markdown note files to blogs, and automatically update blog information
將markdown筆記文件轉為博客，且能夠自動更新博客信息
博客可以用來記筆記或者發佈文章，是一種信息載體，我們可以把一些信息放到博客，方便在網絡環境查閱。
最近打算搭建一個私人博客，已知網絡上的公共博客網站有博客園（國內），github（全球）都挺好用的，本人有在用，博客園和github也有掛的時候（訪問不了），情況很少；
搭建私人博客能學習，拓展技能面，並且可以沒有那麼多依賴，可以自定義更多，自由發揮
Object | 功能
-
Blog site, the content is static files
運行環境：Linux 系統
-
Operating environment: Linux system
博客網站，內容是靜態文件
-
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 | 要求
- 不能有較多依賴，盡量簡單，並且能夠較好地擴展（包括前端js html，後端linux）
- 自動化，除了markdown文件需要人自己上傳，其他任何事情包括文章信息更新都自動去完成
markdown 個人認為是一種非常好的寫作工具，markdown支持包括圖片，表格，簡單清晰。
Overall design ideas | 整體設計思路
將寫好的markdown文件放入特定文件夾，服務器獲得文件信息，將文件轉為html文件，並將信息存入文件，使首頁能否訪問到html文件
- access：用靜態訪問，先有一個index.html文件作為博客訪問首頁，有一個bloginfo文件用於存放文章（markdown）信息，然後有一個js文件 用於讀取bloginfo中的博客信息，並顯示在首頁
- monitor: linux 運行一個監控程序,監控markdown文件夾下面的變化，有文件變化，就獲得文件信息並將信息更新到bloginfo
- markdown2html： 當有文件新增時，將文件轉為HTML格式存入博客訪問目錄（如有markdown文件新增，通過工具將markdown轉為html）
- bloginfo: 生成html文件後，將新增的markdown文章信息更新到bloginfo文件中
Specific plan | 具體實現
- accesspage：靜態文件訪問形式，nginx實現，文件以 html css js為主，index做導航頁，js中執行博客信息處理邏輯
- filemonitor：文檔文件以及文件夾的創建刪除等動作監控，使用inotify-tools在linux服務器後台監控
- markdown2html：markdown文件轉html文件，這裡採用markdown2html-converter工具
- 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>
< 1 2 3 4 5 >
</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 //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 //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
官網安裝教程 //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
文檔：//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 吳楠予
