大類的技術手記

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

  • 分類:
  • 字數:雞 x 2雞數:計算文長的常見計量單位,一般而言數字大小與文章長度呈正相關

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

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

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

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

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

這讓我有一些感觸,曾幾何時,每個初學網站製作的工程師,都會以製作動態網頁為目標,先學會 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/

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

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

,,
,