Disqus On Jekyll 之翻內篇

轉載請註明出處，原文傳送門

在自建Jekyll類靜態博客上搭建輕量級評論系統是一個大抵都走過這幾步：

1. 從最初按照Disqus On Jekyll的標準教程搭建Disqus原生評論系統。
2. 發現在天朝經常加載不起來，或者匿名評論系統比較隱蔽，放棄disqus，轉投類WordPress自建評論系統或者國內成熟的評論系統，比如多說、暢言。
3. 發現國內系統不好用或者不好看，或者不穩定（比如多說系統關閉了），一部分人開始停止折騰，轉投WordPress博客，或者直接不使用評論系統了
4. 然後就沒有然後了

最近發現有篇不錯的文章，介紹怎麼通過反向代理調用在牆內使用Disqus評論系統，目前來看比較成熟的應該是fooleap的這篇博客上提到的方法，即通過中間一個能翻牆的VPS來整一個反向代理server，把對Disqus的API調用通過該服務器來訪問，並把結果返回。

作者還維護了一個GitHub repository，update和bug fix都很active，山人也試了下發現非常好用，代碼寫的也很規範，尤其適合前端小白搭建自用。GitHub 上的readme還是稍微有點省略，在此Mark下從0開始的搭建過程，也同時幫忙推廣這個project  也有些基於該project的repositoreis，比如把原生的PHP代理sever換成nodejs的。。

STEP 0

當然是有一個境外的VPS主機，香港，新加坡，日本或是歐美的都行吶。也不貴一般正常5$/mon的，比如山人用了三年多的Digital Ocean的VPS，平時翻牆Google，油管看視頻完全沒問題。可以點此推薦鏈接直接申請。除卻給Disqus用作反向代理，還可以通過shadowsocks實現科學上網，自建博客當然也沒問題的。一舉三得。當然如果你沒有VPS，博客訪問量不大的化，可以幾個人共用一個VPS也未嘗不可。

STEP 1

基本的搭建過程爲如下幾步：

1. 根據安裝好的VPS操作系統，比如Ubuntu，安裝基本的Nginx和php服務器，配置nginx reverse proxy。
2. 部署 disqus反向代理，並修改server端配置。
3. 修改Disqus代理client端配置。

1.1 安裝Nginx和PHP服務

Ubuntu上安裝nginx直接apt一鍵完成：

sudo apt-get update
sudo apt-get install nginx

接下來安裝PHP：

# for ubuntu 16.04
sudo apt-get install php-fpm php-mysql
# for ubuntu 14.04
sudo apt-get install php

處於安全考慮，接下來配置PHP processor cgi默認安全配置

# 修改php.ini文件
sudo nano /etc/php/7.0/fpm/php.ini
# 搜索cgi.fix-pathinfo，把默認值改爲1
cgi.fix_pathinfo=0
# 重啓PHP server即可
sudo systemctl restart php7.0-fpm

然後就是配置NGINX，把相應的serverip指定使用PHP processor

sudo nano /etc/nginx/sites-available/default

把default文件改成如下類似配置即可 NGINX支持把多個子域名映射到同一個VPS上的。比如可以對Disqus反向代理自建一個子域名disqus.hengwei.me，相應的配置會略有不同，比如我們的server_name需要改成disqus.hengwei.me，根目錄root，需要改成相應子域名目錄，如/var/www/disqus.hengwei.me。。

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;
    index index.php index.html index.htm index.nginx-debian.html;

    server_name server_domain_or_IP;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }
}

修改完之後，可以通過如下命令測試語法是否正確：

sudo nginx -t

如果沒有問題，reload下NGINX：

sudo systemctl reload nginx

測試安裝PHP是否成功

sudo nano /var/www/html/info.php

添加如下內容：

<?php
phpinfo();

保存關閉文件，打開網址http://server_domain_or_IP/info.php查看正確看到PHP頁面。如果可以，刪掉測試頁面

sudo rm /var/www/html/info.php

然後我們就可以進入正題，配置服務器端Disqus PHP 代理的代碼。

1.2 配置Disqus服務器端代碼

進入GitHub disqus-php-api repository 頁面，clone代碼到VPS服務器目錄下，如home目錄下

cd /home/hengwei/
git clone https://github.com/fooleap/disqus-php-api.git

其中api/目錄下爲服務器端代碼，我們只要把該目錄下代碼拷貝到上文nignx配置文件中所示的root目錄路徑/var/www/html即可。

cp -r /home/hengwei/disqus-php-api/api/* /var/www/html/

進入該目錄：

cd /var/www/html

其中config.php爲鏈接disqus所需的配置文件，打開，主要修改如下字段，具體修改config.php裏註冊寫的已經非常詳細了，還有問題可以直接blog.fooleap.org留言，或者直接問山人也可以。修改完保存即可。

define('DISQUS_PUBKEY', 'E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F');
define('DISQUS_USERNAME', 'willheng');
define('DISQUS_EMAIL', '[email protected]');
define('DISQUS_PASSWORD', 'password');
define('DISQUS_WEBSITE', 'http://t.hengwei.me');
define('DISQUS_SHORTNAME', 'shortname');
define('DISQUS_APPROVED', true);

1.3 配置Jekyll上的Disqus反向代理

添加原生Disqus評論

如果你之前已經部署好了自己的Disqus，只是在天朝沒法訪問，請直接跳轉過此步。如果在自己的Jekyll上沒有部署過Disqus，細節可以參照這篇博客，具體過程我就不再贅述，網上代碼到處都是。當按照各種教程在post下方添加好Disqus的評論插件後，如果你也想在文章首頁或者在標題的某個地方顯示每篇文章的評論數，那下面這段代碼可能對你有用：

<script type="text/javascript">
  /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
  var disqus_shortname = 'perfectlyrandom'; // required: replace example with your forum shortname
  // var disqus_developer = 1; // Comment out when the site is live

  /* * * DON'T EDIT BELOW THIS LINE * * */
  (function () {
    var s = document.createElement('script'); s.async = true;
    s.type = 'text/javascript';
    s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
  }());
</script>

然後在你想要顯示評論數的地方，比如像山人這種在博客首頁和文章標題旁顯示的，就可以在相應的HTML里加上下面這行，然後當你點擊評論數的超鏈接時，就會自動調到Disqus評論線程去了。

<a href="index.html#disqus_thread" data-disqus-identifier=""></a>

原生的配置完了，我們就可以再次基礎上使用反向代理技術來科學的在牆內使用Disqus了。

科學使用Disqus篇

相比較其他的反向代理的Disqus評論，比較推崇fooleap的原因就在於其設計初衷是簡單簡化遷移過程，儘可能做到和Disqus原生代碼的透明遷移。修改起來也很簡單

IMPORT css/js

把1.2中我們下載下來的disqus-php-api文件中dist文件夾下的iDisqus.min.js, iDisqus.min.css文件導入到自己博客的相應目錄，如路徑/assets/js/iDisqus.min.js和/assets/css/iDisqus.min.css，然後在相應的HTML文件頭中import進來即可。

<script type="text/javascript" src="/assets/js/iDisqus.min.js"></script>  
<link rel="stylesheet" type="text/css" href="/assets/css/iDisqus.min.css" />

接下來，在把原來加入的Disqus評論JavaScript，類似這樣的：

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'perfectlyrandom'; // required: replace example with your forum shortname
    // var disqus_developer = 1; // Comment out when the site is live
    var disqus_identifier = "/post/disqus-on-jekyll-%E4%B9%8B%E7%BF%BB%E5%86%85%E7%AF%87.html";

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

直接替換成如下：

<div id="comment"></div>
<script type="text/javascript">
  $(document).ready(function () {
    var disq = new iDisqus('comment', {
        forum: 'lengerfulluse',
        api: 'http://disqus.hengwei.me',
        site: 'http://t.hengwei.me',
        url: location.pathname,
        mode: 1,
        timeout: 2000,
        init: true,
        badge: "山人"
      });
    disq.count();
  });
</script>

如此，打完收工。

So long, and thanks for all the fish.

參考

1. DigitalOcean
2. Disqus-php-api.
3. 科學使用Disqus.