Build a website with HUGO on Docker and deploy to Netlify - (2).
前回の記事「Docker と HUGO と Netlify で Web サイトを作る - (1)」ではテンプレートを使い、HUGO でサイトを構築し Netlify にデプロイしました。
しかしデプロイしたサイトにアクセスすると Netlify より Alert: Insecure mixed content detected in SITE NAME と行った趣旨のメールが届いたのではないでしょうか？
今回は HUGO や Netlify の設定を変更することで、これらの解決や独自ドメインの追加などについて書いていきたいと思います。
全て https 化する
独自ドメインを設定する
独自ドメインを設定する方は先に設定して下さい。
設定方法に関しては他人任せにします。
【Netlify】カスタムドメインを設定するをご覧ください。
Netlify から送られてきた Alert: Insecure mixed content detected in SITE NAME に対応する。
さて本題です。
これは、http と https が混ざっている時に出るアラートです。
全て https に対応させましょう。
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "Blogpaper"
site/config.toml に書いてある baseURL = "http://example.org/" を書き換えて下さい。
上記で独自ドメインを設定した方はそちらを、設定していない方は Netlify から与えられたURLを設定して下さい。
config.toml の設定
先ほど編集した config.toml は HUGO の設定ファイルになります。
せっかくなので、著者がサイトを作る時に設定した項目について紹介します。
全ての設定項目はConfigure Hugo - All Configuration Settingsに書かれています。
googleAnalytics
名前の通り、Google Analytics を追加するためのものです。
詳細は Hugo google アナリティクス設定方法をご覧ください。
enableEmoji
名前の通り、絵文字が使える様にするものです。
enableEmoji = true と追記するだけで，\:tada\: と打つと 🎉 となります。
hasCJKLanguage
Hugo のサマリー機能を理解する。そしてブログのパフォーマンス改善へ。を見ていただけると書かれていますが、デフォルトではスペースで分割するため日本語や韓国語が分割できず、.Summary が非常に長くなります。
そのため hasCJKLanguage = true を付けることで分割できる様にします。
テーマをカスタマイズする
テーマが使えることは素晴らしいのですが、少しだけ変更したいことがあると思います。
そこでテーマをカスタマイズの仕方をお伝えします。
site/themes/[THEME NAME] 配下にテーマのコードがありますが、こちらを直接変更するとサブモジュールが更新された際に消えてしまいます。
HUGO にはオーバライド機能として、カスタムしたいファイルを site/layouts 配下にコピーし編集するとそちらを使ってくれる様になります。
詳細は Hugo でテーマをカスタマイズする方法をご覧ください。
外部サービスを使う
HUGO ではいくつかの外部サービスの使い方が公式サイトに記載されています。
便利そうなものをいくつか紹介しましょう。
googleAnalytics
再掲です。
詳細は Hugo google アナリティクス設定方法をご覧ください。
Disqus
これはコメントを書ける様にするためのものです。 導入方法について、公式サイトや Hugo で作ったブログに Disqus を使ってコメント機能を追加するで詳細に書かれているのでそちらをご覧ください。
デプロイ先を変更する
前回の記事「Docker と HUGO と Netlify で Web サイトを作る - (1)」では Netlify にデプロイしましたが、他にもデプロイ先とデプロイ方法が公式サイトに記載されています。
まとめ
今回はより良いサイトにするためにいくつかの Tips を紹介しました。
しかし、HUGO でできることは他にも多くあります。
ぜひさらに調べて良いサイトを構築して、著者に共有して頂けたらと思います😊