Hexo Icarus 顯示瀏覽量(一):何謂動態、靜態網站,如何記錄瀏覽量?

我目前的部落格所使用的 Hexo,是一個產生靜態網頁的框架,優點在於你可以將產生出來的網頁放在任何一台網頁伺服器來供人瀏覽。

但相較於如 WordPress 這類動態網站的服務,如果我們想要顯示每篇文章被瀏覽的數量,Hexo 就比較難達到這個目的。

緣起

然而,在寫了幾年的文章之後,我發現得知瀏覽量這件事對於撰文者來說有著強大的助益。如果你能夠知道一篇文章有人閱讀,並且閱讀量會上升,你就會想繼續動筆。

若是能以簡便的方式讓文章作者得知閱讀量,例如直接在文章上面顯示此篇內容被瀏覽的次數,就又比進入系統後台查看統計資料來的更有效果。

這點我是深有體悟的,因為在部落格上線時我其實便已整合 GA(Google Analytics)了,但是透過 GA 來對比某篇文章瀏覽的次數,實屬不太方便。

因此,接下來的文章便來聊聊其原理,以及在 Hexo 中要如何將瀏覽量整合到每篇文章之中的。

動態、靜態網站的資料流

在談到記錄文章瀏覽次數的原理前,我們先來看看一般的部落格文章是怎麼被儲存以及瀏覽的。

整個過程當中可以分成三個角色:

A - Browser(瀏覽器)、B - Web Server(網頁伺服器)、C - Database(資料庫)

瀏覽網頁資料流

如果是如 WordPress 這類的動態網站,需要一個專門的網頁伺服器和資料庫,用戶的文章能夠以單純文字的方式存在資料庫當中,並透過網頁伺服器處理後「動態」產生出頁面再丟給瀏覽器。

但是像 Hexo 這樣的靜態網站生成器,並沒有辦法讓網頁伺服器根據資料庫的內容產出頁面,而是在任何一篇文章完成後先產生出「靜態」的頁面存起來,當有人瀏覽時將預先存好的頁面取走。

Hexo 會預先產出靜態頁面,供瀏覽器存取

動態網站可以更靈活的控制資料,任意加工資料再給瀏覽器,而靜態網站就只能存什麼就給什麼,不過倒少了一個專職的資料庫,能夠便宜一些。

如何記錄文章瀏覽次數?

那麼,要怎麼記錄每篇文章的瀏覽次數呢?

這個功能在動態網站中的實作就簡單許多,因為我們不但能更靈活的控制網頁伺服器,更有專職的資料庫可以儲存這個統計數字。

所以只要在每次有人瀏覽網站的頁面時,將此頁面的計數器往上加,存到資料庫裡面即可。

動態網站記錄瀏覽次數

但由於 Hexo 沒有辦法控制網頁伺服器,也沒有資料庫,我們便沒有辦法透過既有的網頁伺服器來記錄文章瀏覽數。

此時就需要一個第三方的資料庫來儲存這個資訊了。

第三方資料庫儲存文章瀏覽數

首先我們需要在 Hexo 產生頁面時就預先指定好第三方資料庫的位置,例如使用 Google Analytics,其本質上就是一座資料庫,可以透過埋入追蹤碼,當頁面被瀏覽時通知 Google Analytics 來記錄新增的瀏覽數。

除了 Google Analytics 外,也能使用類似的服務,例如 Matomo不蒜子等等,又或是自己硬架一台資料庫也不是不行。