Hexo + gitalk 使用留言功能

今天來新增留言版功能，部落格最常見的留言系統大概就是 DISQUS 了，但還要到 DISQUS 去註冊一個帳號，太麻煩了於是就用 gitalk 了，工程師人手一個帳號，方便留言

1. 申請 OAuth

第一步先申請 github 的 OAuth Apps 來授權使用 github 帳號

• Settings

• Developer Settings
  

• new OAuth Apps
  

• 填寫表單，之後都可以改的，主要是 homepage Url 填自家網址，Authorization callback URL 有買網域的就填自己的網域名，沒買的用 homepage Url 就行
  

• 接著出現等等要用到的 Client ID 跟 Client Secret
  

關於 OAuth 協議

2. 修改 next 主題 配置

到主題的 _config.yml 檔，找到 gitalk 配置區塊修改設置

admin_user 是用來開通留言區，填自己的 github 帳號就好，除非有其他管理帳號

基本上，儲存並重新部署，到任何一篇文章就可以開通留言區了

到部落格重新整理後，文章末端會出現

於是我快樂的點下去

然後就悲劇了..

頁面直接跳轉到首頁，再點進文章，仍是未初始化，不死心的點了幾次都這樣，怎麼跟教學文說的不一樣…

正常應該要看到下圖

debug

首先打開開發者模式的 network，可以看到在點擊使用者登入後出現三個 redirect 請求

其中有個包含 error=redirect_uri_mismatch，也就是跳回首頁後的網址請求，表示 redirect_uri 跟在 github OAuth Apps 填的 Authorization callback url 不一樣

會造成 redirect_uri 不一樣的原因有很多，舉些看過的例子

• callback url 填的跟 HomePage url 不一樣
• 有買網域但 callback url 不是填自己的網域名 (由於買了網域 CNAME 會幫你定向到原 gitpage 網址)
• callback url 末端沒加上 /
• https 跟 http 填錯 (早期 gitpage 為 http，後強制升級為 https)
• 在測試環境開通，localhost 當然不 match
• clientID、clientSecret 填錯

大部分的登入報錯討論串都是這些問題，然而當每個都確認沒問題卻還是登入失敗，差點崩潰到放棄做留言板

爬了很久的文，終於在這篇文章找到解答:

在啟用 gitalk 前 run 得好好的，難道複製貼上錯了ㄇ…

最後改掉文章檔名就可以成功啟用留言板了，估計是 redirect 時吃到該頁面文章的網址空白，導致無法導向到正確網址

關閉關於、分類、標籤頁面留言功能

完成後會發現不只文章出現 gitalk，連其他頁面也通通出現，這時只要在 hexo/source 下的 about、categories、tags 資料夾中，修改設定為 comments: false 即可

---
title:  # 标题
type: "about"  # about、categories、tags
comments: false
---
...

心得

該檢討一下自己實在太常踩坑了，別人的教學文都順風順水，我卻常因沒注意到小細節而莫名其妙踩坑…

(看看 kevin 大大的檔名命名，多麼清楚精簡阿)

最後，希望新的一年能減少 debug 次數嗚嗚嗚