重寫了我的個人博客

最近又不務正業了。。

起因是想要直接複製博客內容和樣式到微信公眾號，但很多樣式都失效了，於是想去改網站的樣式，又因為原來的網站代碼寫得真是一坨*（使用了某個博客模板），完全沒有修改的慾望。所以，乾脆重寫一個咯。

說起來，其實公眾號排版問題也不多，主要就改了兩個問題：

標題、正文、代碼等字體大小信息丟失。

代碼換行信息丟失，很多地方的換行都被去掉，非常醜陋。

但在這次開發之前，我其實很早就想著要統一自己幾個站點的風格了，甚至已經在 Sketch 中進行了一番設計，已經心痒痒了大半年，趁著這股熱情，趕緊把它搞出來。

太長不看

寫完文章發現又灑出了5000多字，心想沒人會想看這麼多字吧，但寫都寫了，也懶得刪。所以還是提供一個 TL;DR 的版塊，根據需要再往下看吧。

這次重寫，基本上就做了這麼些事情：

利用 Sketch 進行視覺設計。

使用 Jekyll 框架來生成純靜態網頁，託管在 GitHub Pages

文章使用 Markdown 編寫

基於 Materialize 進行頁面排版布局和渲染，採用 rem 單位定義字體大小

使用 JS 腳本處理代碼塊，避免粘貼到微信公眾號後換行丟失的問題

Design

先來看看設計稿。

這和專業設計師的作品相比，實在是簡陋得可以。配色似乎有些呆板，字體選擇有些隨意，布局看起來還行，只是比較普通沒有什麼吸引人的地方。

但是，還能看。沒那麼漂亮，但還算是不醜，整體沒有什麼亂糟糟的感覺，比較清爽，不會影響到內容的閱讀，對內容的主次劃分也能處理得比較乾淨。作為第一個版本的產品，我覺得還不錯。

那麼，就開始開發吧。

Jekyll, Markdown and GitHub Pages

首先做的，是技術選型。作為一個懶人，首先考慮的，就是怎麼才能不做重複的事情，所以寫網頁一定的是模塊化的，不同的頁面復用同一套標題欄、復用同一套底欄、引用統一的調色板，甚至作者名字、站點網址，也一定要是統一引用的。

很幸運，之前就已經搭過幾個基於 Jekyll 框架的站點，嘗到了它的甜頭。我不知道是否還有前端開發沒有聽過或是沒有用過Jekyll，但我想它是一定要去試一試的。很多人會認為，想要復用頁面模塊，那肯定是伺服器在收到用戶的請求時，動態的將多個頁面片段拼接起來，再給用戶響應。沒錯，這就是世界上最好的語言 PHP 擅長的事情，而且基於PHP，有著世界上最流行的博客框架——WordPress。但我一直認為，現在已經不是將前端頁面、後台業務邏輯以及資料庫整合到一個工程里的時代了，世道變了。現在大家談論的是分散式資料庫、微服務、前後端分離、RESTful API、CDN。所以仔細想想，博客類站點的搭建，只能用PHP那一套嗎？

博客站點，最重要的，無非就是一個文章列表和文章內容排版展現，WordPress為了完成這個事情，將文章存到了資料庫里（或者文件系統上？），然後提供一個賬戶系統，讓你可以登錄到後台系統，提交新的文章。對於一個媒體類站點，這也許是必要的，但個人博客，就我一個人或者少數幾個人寫文章，有必要搞這麼一套么？

於是，Jekyll們（類似的還有Hexo等框架），提供了一個新的思路。既然搭網站的，和寫文章的是一個人，那為啥還需要分兩步？文章即代碼，直接存入代碼庫，然後通過編譯，將文章內容編譯成靜態站點文件，就可以直接部署了。無需賬號系統、無需後台編輯系統，而且，由於有編譯過程，那網頁的模塊化、JS、CSS內容的模塊化，都可以在編譯之前進行，一次編譯，到處使用，編譯後的所有頁面都是靜態的，幾乎完全不需要考慮伺服器負載問題，而且還非常利於使用CDN來提示訪問速度，對於博客站點這樣有著大量內容，又幾乎不需要數據交換的網站，有著天然的優勢。

再說說 Markdown。如果一個文字工作者還沒有接觸過類似 Markdown 這樣，將文本格式，和文本樣式分離的工具，那他一定失去了很多快樂。編寫時使用簡單標記來標識類似標題、正文、代碼之類的文本格式，而不必關心這行文字大小是多少，需要前後間隔多少之類煩人的排版問題。一篇文章寫完，排版就已經完成了，這種舒暢感，只有使用過的人才能體會得到，而一旦體驗過，就回不去了。

Jekyll 這類現代框架，當然是內建了對 Markdown 的支持，編譯過程中，就會自動將 Markdown 文件直接轉換成 HTML 塊，然後再與模塊化的頁面框架、CSS、JS等內容拼接，就可以生成完整的文章網頁了。除此之外，當然也支持文章索引、分頁、分類、標籤等等常見需求。想要詳細了解，可以去它的官網（https://jekyllrb.com/）看看。

使用 Jekyll，而不是 Hexo 等工具的一個很重要的原因，是因為它是 GitHub Pages 內建支持的建站框架。GitHub Pages 是 GitHub 提供的靜態網站託管服務，你只需要將站點代碼提交到GitHub，它就已經將網站部署完成了。這個服務的初期，是為了展示項目介紹、文檔等目的而存在的，但GitHub官方也推薦用戶將其個人站點等網站託管在其伺服器上，所以也不懂擔心是在擼它的羊毛，敞開用就好了。唯一需要擔心的，是它託管在境外，所以面臨一些訪問穩定性上的風險（原因你懂的）。所以建議那些用戶量大，希望有穩定訪問速度的，還是託管在AWS或是阿里雲等境內伺服器上。我後續也許也會發個文章來介紹如何讓 GitHub 的代碼提交後，自動部署到 AWS 服務上，阿里雲等服務，使用類似的方式部署就好了。

網頁排版和樣式

本來想，是不是應該專業一些，直接用 Bootstrap 或者 Foundation 之類的主流框架。但發現他們特性實在太豐富，再加上內心一些不愛從眾的心理，就放棄了。考慮到我只有幾個基本需求：

網格布局和響應式布局系統

文章基礎樣式

標題欄、側邊欄、按鈕等基礎組件

於是還是選用了我相對熟悉的 Materialize。

之所以熟悉，是因為之前在開發 Material Doc 項目時，就已經使用過，對它的12等分網格布局、以及優秀的響應式布局方案印象非常深刻。之前也將其網格布局方案用於 TicDesign 的文檔編寫中。如果繼續使用這個框架，一切都會順利些。而且，誰讓我是 Android 開發呢，自然對 Material Design 的方案有著更強的親切感。所以，最終還是翻了 Materialize 的牌子。

在寫的過程中，由於不熟悉，遇到一些麻煩的地方。但總的來說，Google 一下，總能找到一些比較完美的方案來。也有一些奇技淫巧，比如下面這個布局：

這是博客主頁的文章列表項。圖片高度隨其相鄰元素動態調整的布局實現，比如左側的概要內容比較少時，圖片需變矮，內容比較多時，需變高，而且需響應瀏覽器寬度變化導致左側內容重新布局的行為。行內人可以想想如何實現，反正我初步Google了一下發現確實不是容易的事情。最終是使用了 Flex Box 這一技術才得以解決。

另一件值得一提的事情是，博客中所有的文字大小，以及行高、字間距等與文字相關的布局，都使用了 rem 為單位，而不是 px。rem 使用相對大小，1rem 定義為 html tag 的字體大小。其他大小，則都是這個大小的倍數。使用 rem 的好處，是所有文字都可以根據 html 字體的大小而相應調整，非常適合在PC以及移動端這種多平台的場景使用。使用這套單位以後的一個附帶好處，就是粘貼到微信公眾號以後，格式得以完整的保留了。

代碼在公眾號的粘貼問題

微信公眾號的編輯器一直有個問題沒有解決，那就是代碼的粘貼。如果你也是一個公眾號的作者，你可以試著從網頁上複製一段代碼，然後粘貼到編輯器中。比如下面這段代碼（我的博客已經對代碼段進行了處理，從這裡複製都是不會復現問題的）：

粘貼到微信公眾號以後，就會變成這樣：

很多換行符都被幹掉了。。研究以後，發現是公眾號編輯器對於的處理有問題。HTML代碼的換行符後面如果直接接文字，而不是空格的話，在編輯器中會被忽略。解決辦法是使用 標籤來強制換行。

問題定位以後，就很好解決了，在文章頁面中插入一段JS來處理代碼段，將換行符替換為標籤就解決了。

後記

在博客搭建過程中，當然還有些零碎的細節，這裡就不多累述。對於公眾號的發文，也還有兩個未解決的問題：

超過屏幕寬度的代碼，在iPhone上會被折行，而不是可滾動。

圖片無法顯示。

都只能等將來有空再慢慢解決了。

如果對這個網站的具體實現感興趣，可以到我的 GitHub 項目 —— Fly The Code 上，通過源碼來了解實現細節，也可以 Watch 或 Star 這個項目，跟蹤我後續的更新。當然，也歡迎 Follow 我的 GitHub 賬號，隨時了解我又做了什麼奇怪的事情。

祝好。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！