Hugoサイトをhttps対応化してDisqusを追加した

技術
Hugo / Let's Encrypt

画像

↑事故により驚きの白さとなった弊サイトの図

このサイトの役割のひとつである、cd5コンテンツのTODOリストおよび要望受付の機能を果たせるようにするため、コメント欄の追加を行った。
ついでにhttps対応もした。
この記事では以下の作業についてやったことを簡単に説明する。
サーバーのOSはUbuntu18.04LTSを使用。

  • 既存Hugoサイトのhttps化
    • Let’s Encryptで作成済みの証明書に新たにドメインを追加する
    • Apacheに既存の証明書を流用するhttpsのサイトを追加する
    • Hugoの設定をhttpsに対応させる
  • 既存HugoサイトにDisqusのコメント欄追加
    • Disqusに登録してサイト作成
    • Hugoの設定とテンプレートを変更してコメント欄を追加

Let’s Encryptのサブドメイン追加

まずはhttps対応から。cd5.jpドメインの証明書はLet’s Encryptで一括管理している。
コマンドひとつで対象のドメインを追加できる。
現在、cd5.jp、www.cd5.jp、triglav.cd5.jpの三つのドメインに対応する証明書となっている。
ここにblog.cd5.jpを追加する。
一度--dry-runオプションを付けてテストし、問題なければオプションを外して実行。
証明書の更新コマンドはそのままでよいので本当にこれだけ。便利。
以下のコマンドは実際に使ったもの。ドキュメントルートのパスは歴史的な都合によりこうなっている。

sudo letsencrypt certonly --webroot -w /var/www -d cd5.jp -d www.cd5.jp -w /var/sites/uruluk/public/ -d triglav.cd5.jp -w /var/sites/nikki5/public/ -d blog.cd5.jp --dry-run

Apacheのサイト設定

Apacheのサイト設定ファイルを変更して、https接続の設定と、http接続をhttpsにリダイレクトする設定を追加する。
もともとあったhttp用の設定は削除。
証明書はすべてのサイトで同じものを使うようにしてあるので、新たに証明書自体の設定を追加する必要はない。

<VirtualHost blog.cd5.jp:80>
        RewriteEngine on
        RewriteCond %{HTTPS} off
        RewriteRule ^/(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</VirtualHost>

<VirtualHost blog.cd5.jp:443>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/sites/nikki5/public
        ErrorLog ${APACHE_LOG_DIR}/nikki5-error.log
        CustomLog ${APACHE_LOG_DIR}/nikki5-access.log combined
        SSLEngine on
</VirtualHost>

設定を変更したら、ちゃんと動作するかconfigtestで確認する。
問題なければapacheを再起動。

sudo apachectl configtest
sudo service apache2 restart

Hugoのhttps設定

さてhttps設定も済んだことでわくわくしながらここでサイトにアクセスすると冒頭の画像のようになる。
何が起きているかというと、jsやcssがhttpで読み込まれようとして失敗している。
最初はテーマの仕様かと思ったが、単純にconfig.tomlのbaseURLがhttpになっているだけだった。
baseURLをhttpsに書き換えるだけで直った。

Disqusに登録・サイト追加

コメント機能としてHugoでサポートされているDisqusを使用する。
普通にツイッター連携で登録してサイトを登録するだけなので特に解説するようなことがなかった。
サイトは英語だがそんなに難しくない。(小学生並の感想)
下記のサイトを参考に設定した。
Hugo で作ったブログに Disqus を使ってコメント機能を追加する - michimani.net

余談だが、サイト名を「管理人の日記Part5」にしたせいで、shortnameがguan-li-ren-nori-ji-part5になってしまった。
非常に格好悪いが変更できないらしいので諦めた。

Hugoの設定とテンプレートの変更

取得したshortnameをconfig.tomlに追記する。

disqus = "guan-li-ren-nori-ji-part5"

これに加えて、記事のテンプレートを変更する。
コメント欄を追加したい位置でdisqusのテンプレートを読み込むようにする。
テーマはサブモジュールで管理しているので、変更する場合には自分のlayoutsディレクトリ以下にコピーして変更する。
当サイトで使用しているテーマ、blackburnでは、layouts/_default/single.htmlに追記となった。
blackburnではlayouts/post/single.htmlでデフォルトでdisqusのテンプレートを読んでいるため変更不要。

cd ~/nikki5
mkdir layouts/_default
cp theme/blackburn/layouts/_default/single.html layouts/_default/
vim layouts/_default/single.html

実際の変更内容については以下を参考。
Disqusのコメント欄を追加 · Candle5000/nikki5@3fe2f46

完走した感想

30分もかからなかった作業を説明する記事を書くのに2時間くらいかかった。
ブログ書くだけで収入ｗｗｗとか笑ってた時期が僕にもありました。
普通にめちゃくちゃ時間かかる。

 
comments powered by Disqus