技術部落格寫作:靜態網站產生器 (Static Site Generator)

PUBLISHED ON AUG 23, 2018 — BLOGGING

    對於部落客來說,常見的選擇就是我們先前提過的自架 WordPress 。雖然這個方案很簡單,但這些站台將資料存在資料庫中,再由伺服器動態生成頁面;這類站台很容易變成駭客攻擊的目標。由於大部分的部落格文章其實是以呈現靜態內容為主,於是出現靜態網站產生器 (static site generator) 這種新興的部落格撰寫方式。

    對於不熟網頁運作方式的部落客來說,靜態網站產生器的概念比較難以理解。相對於靜態網頁來說,動態網站就是在網站拜訪者拜訪特定頁頁時,由網頁伺服器將遠端儲存的資料轉為網頁後輸出;而靜態網站產生器將輸出網頁的過程提前在撰寫文章的時期,部落客撰寫文章後,交由靜態網站產生器產生網頁,然後將這些網頁上傳到遠端主機即可。對於靜態的部落格文章來說,不論網頁是動態生成或靜態輸出,看到的文字、圖片等是等效的。

    雖然得到相同的網頁,相對於動態網頁來說,靜態網頁有一些額外的優點。因靜態網頁沒有用到後端的程式語言和資料庫,因而減少駭客攻擊的目標點。另外,靜態網頁不依賴特定的語言執行環境,幾乎所有的站台都可用來儲存靜態網頁;對於相同的內容,所需的硬體資源也較低,無形中減少的建置網站的成本。當然,靜態網頁不是萬靈丹,對於一些需要動態改變內容的網頁,像是論壇 (forum)、影音 (video)、網頁遊戲 (web games)、社群媒體 (social media) 等,就不適合使用靜態網頁。

    即使適合靜態網頁的場合,我們也不會直接手刻網頁,這樣子做的效率太差。這時候,靜態網頁生成器就可以協助我們生成網頁。但使用靜態網頁生成器需要一些些網頁的概念,因此,筆者撰寫這系列的文章,希望降低初心者入門的門檻。

    在這裡,我們不急著動手做,而先從 50,000 呎的高空來看靜態站台產生器的概念。有概念後再開始操作,比較不會盲目地死記指令但卻不知其所以然。

    靜態站台生成器分為三個部分:

    • 網頁內容 (content)
    • 模板 (template)
    • 網頁生成引擎 (site-generating engine)

    網頁內容就是部落客實際撰寫的內容,實際的內容會隨著各個部落格的主題而有所不同。為了簡化這個部分,通常不會直接撰寫網頁,而會使用某種輕量級的標記語言 (lightweight markup language),這類語言易學易讀易寫,通常在數小時至一兩天內就可以學會。在這類標記語言中,Markdown 是最流行的,本系列文章之後也會使用 Markdown 來撰寫網頁。

    為了增加生成網頁的效率,通常都會搭配某種模板,以減少撰寫重覆的網頁代碼,使網頁更易於維護。由於模板是從網頁框架 (web framework) 借鑑而來的思維,對於完全沒有網頁相關概念的部落客來說,的確會稍微難一些。比起一般的部落格平台,使用模板的可自訂性很高,所以這類網站生成模式,受到許多技客 (geek) 的喜愛。不同的站台產生器所使用的模板也相異,換了一套站台產生器後模板有可能要修改,無法繼續套用;通常部落客選定某一套站台產生器後,就會持續使用下去。

    網頁生成引擎就是軟體的核心,除了要寫 plugins 或是想自製新的站台產生器以外,部落客甚少需要去知道引擎本身如何實作的,只要知道這類工具的使用概念,偶爾視需要改一下模板就足夠了。由於本系列文章的目標是使用站台產生器撰寫部落格,我們不會去接觸站台產生器的內部實作。

    絕大部分的站台產生器,都沒有自己特定的編輯器,直接使用一般程式設計用的編輯器即可。少數硬派的部落客會用 Vim 或 Emacs,若沒有學過這兩套駭客用編輯器,倒也不需要刻意去學,有許多新生代的編輯器更簡單,像是 Sublime Text、Atom、Visual Studio Code 等,筆者目前使用 Visual Studio Code,讀者可依照自己的喜好選擇即可。另外,這類站台產生器通常要使用命令列來操作,但並不會像電影中的駭客那樣使用各種華麗的技巧,只要使用幾佪基本指令即可。

    comments powered by Disqus