關於我寫的乃木坂部落格備份站


一直都有想寫這一篇,但因為具體上不知道要寫到多細所以遲遲沒有動筆。

緣起

小弟2017年中因為接觸16單入坑,當時自然是已經沒有橋本的部落格可以看了,所以當年年底伊藤万理華畢業的時候就想說不然來把部落格文章通通拉一份下來好了,以後說不定忽然會想看。

那時候草草規劃了幾個決定:

爬蟲流程

  1. 指定某個成員之後爬取年月的列表
  2. 進入每個月份爬取該月總分頁數
  3. 於每個分頁爬取標題清單
  4. 下載清單的所有文章

之所以設計這樣流程,原因是因為我發現如果邏輯改成打開最新一篇之後一直爬上一篇,有機會掛掉,掛掉的原因分成兩種

  1. 網站設計的問題:
    好像上一頁不能無限的按回到第一篇文章(分頁數疑似有上限)
  2. 文章內文會有問題:
    部落格本質上是UGC(用戶原創內容),如果成員把文章的html編輯壞了雖然在網站上可以顯示,但爬蟲會掛掉XD 為了避免任何一篇文章出錯就把整個爬蟲弄停真的是煞費苦心…

所以雖然這樣爬起來不是很快,但應該是堪用了,我也怕速度再提升爬蟲會被網站擋下來。

附上程式碼,如果你真的有興趣的話。

設計靜態網站

這本來只是個後端爬蟲專案,沒想到隨手寫個簡單的閱讀器竟然花了我一大堆的時間…
乃木坂46卒業メンバーのブログ

最原始的概念很簡單,就是一個html檔,打開可以看同目錄下的JSON,就這樣。

其實第一版的畫面跟現在沒有太多改變

畫面是用Vue.js兜出來的,由於前述原因所以也沒有用vue-cli開專案,直接引入js檔隨隨便便就開工了。
但寫一寫發現了一些問題…

Chrome的file-access-from-files

這問題一開始是Chrome獨有的,我一直都是firefox的使用者,很後來才注意到我最初的構想用一個單純的html文件當閱讀器是行不通的,因為chrome不允許在檔案內存取另一個檔案(現在Firefox也不支援了),為此我後來還特別寫了一篇文章:

處理Chrome無法讀取本地端文件問題

這問題的解法就是要架站,那既然要架站乾脆就直接丟上github page的服務吧。

要認真經營嗎?

這東西毫無疑問的有著作權問題,所以我起初設了幾個規則

但後來基於個人的好奇心以及虛榮心,除了第一點之外剩下的都做了…

搜尋引擎優化

去Google註冊一個網站很簡單,但要被真的搜尋到可不容易。
對前端框架跟SEO有點概念的人可能會猜到問題點,沒有錯,我需要做SSR(Server side rendering)

不知道SSR是什麼的同學可以閱讀一下這篇的第一段:
SSR — Nuxt.js 超入門

但我只引入單檔,沒辦法使用Nuxt.js幫我做好,所以這部份後來算是用手刻的方法硬著頭皮把它完成的。
有賴於Google的搜尋引擎爬蟲可以執行JS,所以我用了Babel把程式轉成Google Bot可以執行的版本加上預先填入部分資訊到html檔內完成87%像的SSR,至少搜尋引擎可以辨識他們是不同的網頁,而不是大量重複內容然後降我排名。

後來寫了一隻程式專門做這件事情,把資料預填好然後複製html到對應的資料夾內,並產生Sitemap.xml,現在要手動的部分越來越少了。

成果

這應該是可以分享的吧?

然後第一名的搜尋關鍵字是西野七瀬 ブログ,用個字去查排名比七瀨的官網還要前面,希望官方不要宰了我

至於最多人看的前五名分別是:

RWD

掛了GA之後發現大部分的使用者都是使用手機,所以開始著手處理RWD
為了精簡要做的事情,我選擇把左手邊兩塊(成員資料、文章列表)做成浮動的,需要的時候滑出來,要看文章的時候會向左收闔,完全使用CSS達成,最後的成果我還蠻喜歡的。

未來方向

爬蟲本身沒啥好改的了,只要乃木坂的官網沒有大改版我應該就不會再去改它。之前有額外寫一個櫸坂46的版本,可以運作,但我沒有實際在用,寫好玩的。

但網站本身倒是蠻多事情可以做的

後記

這篇本來寫了三分之一就擺著,是昨天就這麼剛好在推特看到睽違了三年的橋本的消息才想到該來把它完成。

Hi 喜歡這篇文章的話 或許可以請我喝杯咖啡
Buy me a coffeeBuy me a coffee