【部落格營建筆記】Gitalk設定教學—和hexo、github page自定義域名的愛恨糾葛踩坑記錄

儘管設定gitalk和hexo的使用已經有很多教學，然而在設定上還是有很多眉角，特別是自定義域名，有很多需要修改的地方，不然就會遇到error not found的問題，本文以butterfly主題為例，一步步帶你設定好gitalk！

建立GitHub OAuth Application

建立一個OAuth應用才可以讓Gitalk透過id和secret來存取repo的issue。
這裡作者我弄了很久，在排解到底要填什麼XD

右上角頭像點開，進入自己的帳號設定
左側欄往下看到Developer settings，進入後再於左側欄點擊OAuth Apps，點擊New OAuth App新增application
共有四個欄位需要填寫(一個選填)：

Application name—應用名稱，開心就好
Homepage URL—你的github page預設網址(xxxxxx.github.io)
Application description—應用描述，開心就好
Authorization callback URL—你的github page預設網址

如果有設定github page的自定義域名，callback URL需要填寫你的自定義域名，Homepage URL則是原本的github.io網址。

如果沒有自定義域名，那樣兩個欄位都填github.io網址就可以囉(兩個都是https://xxxxxx.github.io/)

創建完成，取得Client ID和Client secrets
第一次創建application需要點擊Generate a new client secret來生成第一個secret

請好好保管這兩筆資料，切勿外洩

接著就可以拿著這兩筆進行gitalk的設定！

`_config.butterfly.yml`設定gitalk與啟用

`_config.butterfly.yml`設定gitalk

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: 
  client_secret: 
  repo: rainmeocat.github.io
  owner: RainMeoCat
  admin: RainMeoCat
  option:

client_id—你的Client ID
client_secret—你的Client secrets
repo—你的公開靜態網頁repo名稱
owner—你的帳號名稱
admin—你的帳號名稱

`_config.butterfly.yml`以gitalk啟用留言系統

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
  use: Gitalk
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Pag