僅需 3 行代碼就能將 Gitter集成到個人網站中，實現一個 IM 功能

一、前言

從很早以前就有寫博文的習慣，不過那個時候，也沒咋認真地寫，倒是挺喜歡倒騰，從最初在 CSDN 寫博客，寫了得有 100 多篇後，那時，CSDN 開始加入了噁心的廣告，體驗開始變得極差後，就棄了 CSDN。

當時，就想著自己弄個純淨地個人博客，於是，從 Jekyll 到 Hexo 都玩過，最終都放棄了，原因是不能隨心所欲地改成自己想要的樣式。

開始進入正題，由於網站沒有留言，聊天的功能，導致與很多讀者 0 溝通，粘性也就比較差。

那麼，要如何在網站中快速的集成 IM 即時通訊功能呢？

二、什麼是 Gitter？

什麼是 Gitter 呢？聽名字貌似和 GitHub 有點關係呢？

以下來之維基百科的解釋：

Gitter 是 GitHub 存儲庫的開發人員和用戶的即時通訊聊天室系統。 Gitter 作為軟件即服務提供商，提供包括免費選項和所有基本功能，以及創建單個私人聊天室的能力，和個人和組織的付費訂閱選項，允許他們創建任意數量的私人聊天室。

該服務可以為 GitHub 上的各個 Git 存儲庫創建個人聊天室。聊天室隱私遵循關聯 GitHub 存儲庫的隱私設置：因此，私有的 GitHub 存儲庫的聊天室對於訪問存儲庫的人員也是私有的。

它還可以將連接到聊天室的地址信息放置在 git 存儲庫的 README 文件中，以引起項目所有用戶和開發人員的注意。用戶也可以通過 GitHub 登錄 Gitter 訪問他們訪問的存儲庫的私人聊天室。（注意： GitHub 密碼是不與 Gitter 共享）

Gitter 類似於 IRC 和 Slack。但與 IRC 不同的是，它像Slack一樣，會將所有聊天記錄存檔至雲端。

三、訪問 Gitter 官網，並註冊用戶

1. 訪問 Gitter 官方網站 https://gitter.im:

1. 註冊用戶，這裡支持 GitLab，GitHub, Twitter 三種方式來授權登錄，選的是 GitHub:

四、創建自己的 Gitter 聊天室

點擊 ADD A ROOM 按鈕:

接下來，添加一些朋友加入到你創建的聊天室吧：

聊天室創建完成啦！

接下來，讓我看下剛剛創建的聊天室：

• ①：聊天室名稱；
• ②：聊天室唯一域名（域名要記住，等下我們集成到個人網站需要）；
• ③：聊天室描述；

五、藉助 Sidecar 集成 gitter 到個人網站

好了，聊天室你也創建好了，怎麼集成到自己的網站咧？為了開箱即用式的集成到個人網站，我們還需要藉助一下 Sidecar, 等等！什麼是 Sidecar?

Sidecar 能夠幫助你快速便捷的集成 gitter, 僅僅需要添加幾行 javascript 代碼即可，開箱即用，你還可以通過一些配置來自定義它。

Sidecar 官方網站為： https://sidecar.gitter.im：

將如下 javascript 代碼，集成到個人網站中：

<script>
 ((window.gitter = {}).chat = {}).options = {
 room: 'quanxiaoha/community'
 };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>