如何備份乃木坂畢業成員部落格


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

緣起

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

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

爬蟲流程

2022 補充:底下的流程已經因為官網在 2022 年改版過而完全失效了,看看就好

  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 pages 的服務吧。

要認真經營嗎?

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

  1. 不放廣告
  2. 不讓搜尋引擎索引
  3. 不塞 GA(Google Analytics)

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

搜尋引擎優化

去 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