架設個人部落格的心路歷程

之所以架設這個部落格，最初是因為實驗室老師要求。

雖然老師的目的應該只是希望我們每人都能有自己專屬的網頁，能放一些研究相關的資料而已。本來這種如作業般的無聊事隨便做做即可，但我突然想到以前室友有在經營一個部落格，好像還挺有意思。而且我也發現我似乎不曾認真架過完整的網站，於是便決定趁此機會架設一個屬於自己的部落格。

我開始思索部落格應該要寫些什麼內容？花了些許時間，總結後，決定了網站成立的目標－－整合所學，促進自我學習，和展示自我的空間。所以我打算寫技術相關的文章和一些學習心得。

不過在寫部落格文章之前，總要先有部落格才行。為此我準備好適當的環境，並查了許多相關資料。

查詢的過程中，有一篇文章提供了我一些想法－－當美國總統歐巴馬在參加總統大選時，其募款網站之所以可以應付超大流量、並保證安全性，有一個很重要的理由便是採用靜態網頁來取代動態網頁。

這讓我有一些感觸，曾幾何時，每個初學網站製作的工程師，都會以製作動態網頁為目標，先學會 PHP、ASP.net 之類的語言後，才開始製作網站。不管合不合適，都一定要使用到資料庫系統，彷彿沒用到資料庫就會落後人一截似的。說實話，個人網頁的資料真的有多到必須使用資料庫嗎？我很懷疑。

因此，我決定用靜態網頁的方式架設我的部落格，理由是部落格需要和別人互動的地方很少，留言的部分只要交給 DISQUS 就行了。而且我也不是什麼高手，萬一網站被人打壞了，我會很傷心的。至少用靜態網頁的方式，我的網站也會安全許多。

參考了很多自行架設部落格的前輩後，我發現「 Octopress 」這個名字不斷地在我眼前出現，不斷地出現，不斷該死地出現……似乎認為只要出現多次一點，就能讓我忘記 Octopress 是用 Ruby 這個「敵方陣營」的語言開發似的。

士可殺不可辱！就算是泥人也是有火氣的……雖然我確實是有點想學 Ruby 沒錯啦，但這篇文章的分類畢竟是「Python」不是？

所以我決定徹底的唱反調！假使在開發過程中有任何地方會用到該死的 Ruby，就一定要找出 Python 的替代品取代……至少「精神上」一定要與 Ruby 無關才行！

我花了許多時間找尋類似 Octopress 的工具，也許是因為我加了一些條件，所以選擇其實不是很多。好比說我想用 reStructuredText 來寫部落格文章，但偏偏大部分的工具都只支援 Markdown。另外，我也不喜歡部落格文章是以時間來分類，畢竟我的目標不是寫日記，同一篇文章我可能會反覆修改多次，這對這類似的工具來說，其實是很奇怪的要求，因此選擇又更少了。

最後，我找到了 Pelican ，這個工具非常好用，基本可以符合我的要求。使用方式也很簡單，我可以用 reStructuredText 寫我的文章，然後將文章放置在指定的資料夾內，就可以透過該工具直接轉換成一個網站。接下來，只要調整一下 Apache 的設定，我的部落格就誕生了！

不過事情還沒結束，雖然部落格有了，但我希望我的部落格能有更多個人風格，因此我必須重新設計網站的前端才行。我研究了 Pelican 的程式碼，發現它似乎是利用 Jinja2 樣版引擎轉換網頁內容：

<html>
    <head><title>{{chicken}}</title></head>
    <body></body>
</html>

只要事先寫好類似上面的樣版， Jinja2 就可以將「{{chicken}}」這種類似變數的東西代換成實際的網頁內容。也就是說，只要了解這種樣版的使用方式，我便可以藉此設計出屬於自己的網站了。這對我來說不算困難，因為這和 Django 的樣版引擎非常相似。

說到底，這其實還是 HTML，只是多了一些變數、迴圈的概念而已，所以我只需要好好的學習一下 HTML 和 CSS 即可。我查了一些資料，發現 HTML5/CSS3 最近很流行，所以我希望我的網站能盡量符合 HTML5 的標準。而我現今網站有一個小彩蛋－－如果滑鼠放在上面網站左上角的標誌，標誌就會開始旋轉。這個技巧，便是應用了 CSS3 的特性。

外觀設計花了我很長很長的時間，事實上，我大部分的開發時間都花在調整配色上面，這是屬於我的地獄，因為我對色彩似乎不太敏感，所以成果一直不甚滿意。到後來，因為花的時間太長了，心靈受到的創傷太大了，所以從此以後，我之後的專案在想不到用什麼顏色時，就會直接套用這個網站的配色，節省麻煩和時間。

我覺得對新手來說，前端最難搞的就是 CSS 了。相信光是要讓內容在畫面上置中可能就已經搞死一堆人了，更別提很多進階的用法是網路上很難查到的。網路上的資料解決的通常是一個片斷的問題，給予的答案也是片斷的答案。如果真的用這些零零碎碎的資訊來拼湊出一個網站，效果多半不怎麼樣。

不過幸好網路上也有許多高手為了協助人們解決這個問題，製作了許許多多 CSS 框架，這些框架把很多常見的問題標準化，協助我們解決大部分在前端設計時所碰到的各種麻煩。這些框架有的非常強大而複雜，也有的輕巧而易學，像是 Bootstrap 便相當有名，這個框架非常輕巧，而且非常容易學習，我有很多熟悉網站製作的朋友都會使用，所以……本著叛逆的精神，我決定選用 Foundation 這個框架，其實兩者相當類似，功能也差不多，不過我私心認為 Foundation 的畫面好看不少，所以才做出這樣的選擇。

很快地，我的設計限入了瓶頸，有些構想無法達成。原因是 Pelican 會自動將 reStructuredText 文章轉成 HTML 的形式，並與網站的內容結合。也就是說部落格文章內文的部分所用的 HTML 標籤是自動生成的，無法手動更改，偏偏有些標籤性質就是這樣，我無法藉由調整 CSS 來讓畫面變成我想要的樣子。

為了解決這個問題，我研究了一下 Pelican 的程式碼，發現它是利用 Docutils 這個工具來來處理 reStructuredText 的文章，並將文章轉為 HTML 的格式。所以我修改了 Docutils 這個模組的部分內容，並順便新增一些我需要的功能。我修改了 Reference 表現的形式、新增了變數 raw_summary (為了讓 facebook, G+ 這種網站可以截取文章的片段)等。

除此之外，務實的我為了好好與 Ruby 鬧彆扭，我研究了一下那些使用 Ruby on Rails 的傢伙平常會使用什麼工具。沒想到，還真的發現不少有趣的玩意兒，比如說 Haml 。

不得不說，我一直懷疑 Haml 的開發者是不是 Python 使用者叛變過去的，因為點子實在是太一致了。居然懂得利用「縮排」來減少 HTML 的標籤，這真是太聰明了，下面是 Haml 的使用實例：

%html
    %head
        %title
            我是標題
    %body
        我是內文

這種表示方式簡單到我一看例子就知道怎麼使用了，實在是太棒了！所以我立刻決定採用。使用方式也很簡單，只要先用這種 Haml 的格式設計網頁，然後再透過工具轉為 HTML 格式就行了。整個過程唯一礙眼的是這個工具是用 Ruby 開發的……因此我決定找尋 Python 版本的替代品。

Python 版的替代品不難找，甚至稱得上是非常容易，問題反而是替代品太多了，讓人不知道怎麼選擇，而且每一個版本或多或少都和原版有些許的出入。有的修改非常不錯，而且很有 Python 的風格，但因為原版太過有名，很多編輯器都有支援，所以這些修改，反而可能會讓這些編輯器出現錯誤，造成了許多麻煩。

我找了很久，突然發現 Jinja2 樣版引擎其實就有支援使用 Haml 版本的外掛 Hamlish-jinja，既然如此，那還有什麼好猶豫的呢？用下去就對了！

雖然這樣看起來 Jinja2 好像很累，每一個網頁都必須先經由 Haml 轉換為 Jinja2 樣版，然後才轉成 HTML。不過這不是什麼大問題，因為我只要轉一次即可，對觀看網站的使用者來說，他們看的版本都是事先早已轉成 HTML 的網頁，而不是看的時候才動態產生的，所以並不會影響使用的體驗。

我還發現另一個好用的玩意兒則是 SCSS 。如果說 Haml 是針對 HTML 的話，那麼 SCSS 便是針對 CSS，SCSS 新增一些語法來減少 CSS 的程式碼，藉此增進開發效率，減少錯誤的機會。我認為 SCSS 最大的奧妙在於可以巢狀定義 CSS，這樣可以大量減少 class 的使用。

/* Main */
#main{
    background: $sub-dominant-color;

    /* Content */
    #content {
        article {
            header{ }
        }
    }
}

很好用對吧？非常好，找 Python 的版本！

由於 Jinja2 可以支援使用 webassets ，所以我可以輕易的透過 webassets 的幫助，找到可以使用的 Python 版本的 SCSS 。你可以把 webassets 當成一個篩選器，只有符合要求的檔案經過它，就會自動轉為指定的格式：

<!-- 此例即是將 style.scss 轉為「style-local.css -->
-assets filters="pyscss", output="style-local.css", "style.scss"

剛好有一個 webassets 的外掛可以支援 SCSS 的轉換，也就是 pyScss ，這麼一來，我只要安裝 pyScss 就可以直接使用。藉著這個機會，我也順便使用了一些 webassets 支援的優化工具，比如說 cssmin 。顧名思義，這個工具可以壓縮 CSS 以減少傳輸量。聽起來很厲害，但其實壓縮的原理不難，最簡單的做法就是將所有的換行符號去掉，反正換行是方便人看的，電腦讀取的時候其實不需要。

網站的外觀完成後，還有一些細節需要處理，比如說要加上 facebook 或 Google+ 的按讚功能來增加網站被人看到的機會，還要加上一些 facebook 專用的標籤，才能方便別人在 facebook 分享網站時能正確抓到我想要顯示的簡介。

https://marco79423.net/backend/static/c15df8dc-4c88-11ee-9f5e-0242ac110003/

最後，這麼一個沒多少人看的部落格就這麼誕生了！

整體而言，我對成果還算滿意，也得到許多成就感。我覺得做網站最大的樂趣在於只要懂得使用一些工具，你便可以在短短一天的時間內做出外行人看起來好像很厲害的東西，然後享受人家的讚美，這也難怪這麼多人喜歡開發網站，這不是沒有原因的。