このブログの構成について

このblogはHugoで生成したコンテンツをNetlifyでホスティングしています。
ざっくりとサイトをデプロイするまでにやったことを残しておきます。

静的サイトジェネレータの選び方

まずはコンテンツを作る部分です。

記事の作成にできるだけ手間をかけたくなかったので、Markdownで管理できることが前提です。

静的サイトジェネレータにはいくつか有名なものがあるらしく、利用者が多い（と思われる）のは以下になります。

他にもまだまだあるので自分に合ったものを選ぶと良いでしょう。

筆者の選択基準は、導入のための記事がある程度存在し、テンプレート（テーマ）のデザイン等でチョイスしました。

ホスティング

当初はgithub pagesでのホスティングを考えていました。

しかし、GitのCommit Logを公開したくなかった等の理由から、最終的にはNetlifyを選んでいます。

GitのリポジトリをNetlifyに連携することでブログのCIが回せるのも個人的に高得点です。
（Github Pagesの場合はCircle CIなどと連携させれば同じようにCIは回せそうですが）

hugoで雛形を作る

ローカルのテスト環境

先んじて動作環境を用意する必要があるのですが、
Dockerhubに公式のHugo用イメージはなさそうでした。
（将来的にHugo用のイメージは作りたいところです）

今回はローカルにインストールして環境構築しています。

# homebrewでインストール
brew install hugo

雛形作成

ここから雛形を作成していきます。

# blog（ディレクトリ）の作成
hugo new site "Path"

Hugoには有志の方々が作成したデザインテーマがあるので、Hugo Themes から選びます。

今回は、Blonde というテーマを利用させてもらっています。

インストール方法はREADME の通りですが、予め postcss-cli と autoprefixer が必要になります。

プレビューしながら作り込み

実際に見た目をプレビューしながら作り込むことができるのでとても便利です。

ドキュメント上でも言及されていますが、Hugoがコンテンツを監視しているため、編集を加えるとサイトを自動的に再構築してくれます。

# ブログをプレビュー
hugo server

# 下書き（draft）もプレビュー
hugo server -D

Netlifyにデプロイする

Hugo上にNetlifyで公開する手順が記されているので沿ってデプロイします。

Disqusを有効にする

コメントフォームをブログに付与するためにDisqusを設定していきます。

Hugoでコメント機能を追加するにはDisqusを使うのがセオリーのようです。

Disqus上の設定

Disqusを埋め込むには、shortnameというパラメータが必要になります。

これを取得するところがゴールです。

Add Disqus to Site から I want to install Disqus ON my site を選択し、
サイトの情報を入力します。 disqus_install

Disqusを組み込むプラットフォームを聞かれますが、
Hugoは一覧に無いため画面下部（I don’t see my platform listed...）から次に進みます。

サイトにコピペする用のタグと手順が説明されますが、今回はHugoを用いるのでスキップして次に進みます。

無事に設定が完了するとShortnameが取得できるのでこれを控えておきます。 disqus_shortname

Hugoへの埋め込み

今回のデザインテンプレートにはDisqus用の設定が用意されているのでconfig.tomlにDisqus用のshortnameをセットするだけで有効化できます。

...
# Disqus Comment System
disqusShortname = "YOUR_DISQUS_SHORT_NAME"
...

なお、ローカル環境でプレビューしてもDisqusは有効にならないので注意が必要です。 disqus_on_localhost

Getformを設定する

問い合わせフォームを導入するためにGetformを利用しています。

今回はNetlifyでホスティングしているのでNetlify Formsを利用するのが筋ですが、
テンプレートにGetformを利用したページがあるため、ひとまずはGetformを利用します。

Getform登録

Getformのドキュメントに、HTMLを始めとした導入手順が載っています。

getform_top

登録が終わると、My FormsのSettingsからEndpointを確認できます。

getform_endpoint

Hugo反映

今回はこの値でContactページのサンプルを差し替えます。

...
<div class="content">
    <p class="mb-2">To contact us, please fill out the form below.</p>
    <form name=contact action="https://getform.io/f/MY_GETFORM_ENDPOINT" method=post>
    <div class="mb-4">
         <input type=text placeholder="Your Name" name=name class="w-full p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
...

実際に問い合わせフォームから問い合わせが送信されると、管理ページではこのように確認できます。

getform_submission

参考