這次意外發現原來hexo可以支援雙留言系統,覺得有趣便在原本的Utterances以外加多加使用Gitalk
另外也重新設定了Google Search Console
(不過現在似乎網址審查比過去還要再花更多時間)

評論系統 - Gitalk, Utterances

Butterfly的主題中預設可以介接多種不同的評論系統
包括Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances等
這邊使用GitTalk來串接,畢竟Hexo的靜態Blog是建在Github上,串連上穩定性也會高很多
壞處就是登入評論系統必須要有GitHub帳號,似乎也有一些關於所需權限過高的疑慮存在
而Utterances也是一種基於GitHub Issue的評論系統,導入也是非常簡易的。

Enable Comments

找到./themes/_config.yml中的comments block
在use的部分選擇Gitalk以及Utterances(Butterfly可以使用雙評論系統

image

可以選擇是否要新建一個repo來存放評論,我這邊又建了一個新的Github repo來存放評論,將他命名為Comment,並且設為public

GitTalk設定

建立OAuth App

到GitHub的Settings-Developer settings裡,找到OAuth Apps、建立一個App
image
image

記下Client ID以及Client secrets

image

修改主題下的config檔

image

repo: 只需寫上repo name即可

接著部署 hexo cl & hexo d -g就可以看到結果了
image

到存放評論的repo下的Issue就可以查看所有的評論
image

Utterances設定

專案設定

到:https://utteranc.es/ 填入你的專案設定
image

Blog Post <-> Issue Mapping的部分可以設定Issue的title name

他會自動產生相關設定的javascript腳本
image

接著只需照填即可:
image

Install App

到:https://github.com/apps/utterances 安裝App到你的GitHub
設定Access給Comment repo
image

留下評論後可以至Issue裡確認
image

SEO - Google Search Console

我們可以加入sitemap來幫助我們分析網頁的搜尋成效
只需透過Hexo的sitemap plugin即可達成

  1. 安裝plugin

npm install hexo-generator-sitemap --save

  1. 到: https://search.google.com/search-console/ 建立新資源
    image

  2. 到根目錄下的_config.yml下加入

    1
    2
    sittmap:
    path: sitemap.xml
  3. 接著重新編譯部署:hexo cl & hexo d -g

  4. ./public下查看是否有產生sitemap.xml的檔案

  5. 到:https://search.google.com/search-console/ 輸入你的sitemap位置
    image

  6. 接著他會進行網址審查,會耗費幾天的時間
    image

  7. 我們可以用這套系統監控網站的流量跟受歡迎的文章或是關鍵字是什麼,並且持續優化內容來提高SEO
    image