子猫を保護したので Hugo + Netlify を使って爆速で里親募集ページを作る

8500 ワード
Netlify Markdown Hugo Markdown テキストリンク

先日に通勤路で子猫を保護したのですが、我が家には既に白血病キャリアの先住猫が居るので、当面は隔離してお世話をしつつ、現在は里親さんを募集中です。

Twitter などでは猫好きの方が気になる情報を伝えきることができないので、里親募集のために静的サイトを作成することにしました。

　8/17追記: 里親さんが見つかりました！

TL;DR

  • 簡単な静的サイトは Hugo とそのテンプレートテーマを使って爆速で静的サイトが作れる
  • Git リポジトリを Netlify に登録すれば、commit や push をトリガーに爆速でサイトをデプロイできる
  • Hugo は記事を Markdown で書けるので執筆も爆速です
  • 里親募集中(作ったサイト)

Quick Start

Hugo の初期設定については以下の記事、および公式ドキュメントを参考にしました。

サイトの作成

Hugo のインストール

まず、静的サイトのフレームワークである Hugo をインストールします。
公式で配布されているバイナリをダウンロード、インストールしてください。
Homebrew なら

$ brew install hugo

プロジェクトフォルダ、サイトの雛形を作成する

hugo new siteコマンドで neko というサイトを作成します。
実行したカレントディレクトリ直下に neko という Hugo の雛形ディレクトリが作成されます。

$ hugo new site neko
Congratulations! Your new Hugo site is created in /Users/username/dir/neko.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

この後の Netlify へのホスティングのため、プロジェクトルートでgit initして、Netlify でサポートされている GitHub, GitLab, または Bitbucket のいずれかにリモートリポジトリを作成してください。

お気に入りのテーマを探す

公式に多くのテーマが用意されていますが、その多くがブログ用のテンプレートになっています。
ノンブログな静的サイトを作る場合、landing page などからお好みのテーマを探すと良いでしょう。

また、里親募集という用途だと問い合わせフォームが付いているものが便利です。
※問い合わせフォームは Formspree などの外部サービスが使われていると思います。リリース前にそれらのアクティベーションを忘れずに。

動的な処理を追加したい場合、Netlify では AWS Lambda が公式にサポートされているようです。

プロジェクトフォルダにテーマをダウンロードする

ダウンロード方法は、公式では git submodule add で追加することが推奨されています。
テーマ側の更新を適用したい場合はgit submodule updateで更新できるので、基本的に submodule として追加するのが良いでしょう。

今回私は利用したテーマを改変したかったので、theme フォルダ配下に clone し、テーマの .git フォルダを削除しました。改変などを行う場合は、利用するテーマのライセンスを確認してください。

以下の手順は補足として書いておきますが、各テーマの README に適切な使用方法が書いてあると思うので、ご自身が採用したテーマに従ってサイト作成を進めてください。

サイト全体の設定

Hugo ではサイト全体の設定をルートフォルダに配置されたconfig.tomlに定義していて、これはhugo new siteを実行した際に作成されます。

私はダウンロードしたテーマのexampleSite配下に含まれているconfig.tomlをプロジェクトのルートに移動し、BaseURL や Title、ロゴ画像など必要な箇所のみ修正しました。

ローカル起動

hugo serverコマンドでポート 1313 のローカルサーバーが立ち上がります。
ブラウザからアクセスし、サイトのレイアウトや動作を確認してください。

なお、hugo server -hでヘルプを表示することができます。

コンテンツの追加、画像などの差し替え

コンテンツの追加、変更については各テーマの README や exampleSite フォルダーを参考にしてください。
可愛い画像をどんどん追加していきます。

公開用サイトの生成

公開したいサイトが完成したら、プロジェクトルートでhugoコマンドを実行してください。
デフォルトではpublicフォルダが生成され、これが公開用のフォルダになります。
これは手元で実行しなくても Netlify 側の CD の機能で自動実行させることが可能ですが、念の為初回は手元で実行して確認しておくと良いでしょう。

サイトの公開

Hugo を Netlify でホスティングする方法については Hugo の公式ページに説明があります。

作成したサイトのリポジトリと連携するので、Sign up から利用しているサービス（GitHub, GitLab, Bitbucket）を選択してアカウントを作成してください。
アカウント作成、およびリポジトリの選択は公式ドキュメントの記載に従えば問題ないと思います。

なお、この時 Netlify の build command にhugoを設定しておくと、ホスティングサーバー側でデプロイのタイミングでビルドしてくれるので手元で public フォルダを更新する手間が省けます。

URL の設定

URL が決まったら、ローカルリポジトリのconfig.tomlの BaseURL を更新してください。

公開

Netlify の Production branch に設定したブランチに対して、変更を Push or Merge してください。
ビルド状況は Netlify のDeploysというメニューから確認することができます。

ビルド完了後、サイトが公開されます。
今回は SEO などを全く考慮していないので、URL を SNS などで拡散しましょう。

次に新しいサイトを作成する際も、今回作成したものを流用して記事をマークダウンで修正したり、写真を入れ替えたりするだけで作れるので簡単ですね。

ところで

猫好きエンジニアのみなさま、こちらのページをご確認ください。
東京くらいまでなら頑張って伺います・・・

動物の保護に関しての注意事項

私たちがいくら爆速でホームページをデプロイできるからといって、安易に動物を保護することはお勧めできません。
今回は保護した後に血液検査などをして健康な子であることが分かりましたが、仮に感染症などを保有していた場合は里親が見つかる可能性も低くなるでしょうし、周囲の動物に被害を拡大させる可能性もあります。もちろん、病院代が掛かることも考慮しておく必要があります。

保護する際は様々な可能性を考慮し、自分が責任を持って幸せにすることができると判断してから行動してください。

脅すような書き方になってしまいましたが、保護してから徐々に元気を取り戻す猫を見てるとそういった苦労も些事だと感じます。
可愛い動物が横にいるとコーディングも捗りますよ！