Hugoにフォームを追加/設置/設定する方法
What is Hugo?
Hugoとは
Hugoは、Go言語で書かれたオープンソースの静的サイトジェネレーターの一つです。ページ数が多くなっても非常に高速に動作することで有名です。Hugo公式サイトによると、そのビルド時間は1ms以下。ページ数が多くても、全体のビルドが1秒以下で終わることがほとんど、というパワフルさです。これは、Go言語で書かれていることや、ビルドプロセスが並列化されていることが理由だと言われています。
記述方式はマークダウンを主とし、その他、htmlを書き込むことでマークダウンではなかなか難しい表現も可能になっています。ショートコードを設定することで、コードを使いまわしたり、独自のプリセットを用意したり、ということが容易に実現可能です。HTML以外での出力にも対応しており、JSONなど、好きな書式で出力できます。また、豊富なテーマやプラグインが用意されており、デザインに疎い場合でもスムーズに始められます。
Go言語に馴染みがない方も多いかもしれませんが、その処理速度から近年人気が高まっている言語でもあります。また、Hugoをサイト構築のジェネレーターとして使う限りは、高度なGo言語の知識は求められないため、Hugo公式サイトのドキュメント等を参照しながら記法について理解を深めれば、それほど学習コストも高くないと思います。簡単なブログやWEBサイトを構築する際に必要な機能は一通り揃っていると言えるでしょう。
HugoはSteve Franciaによって2013年7月に最初のリリースが行われ、現在に至るまで、多くの改良や機能追加が行われ、現在では広く使われるようになりました。Hugoは、オープンソースのプロジェクトであり、多くの開発者がコントリビュートしています。Hugoはコマンドラインでの操作が主流であり、テキストベースの作業が可能なため、開発者にとっても使いやすいフレームワークとしても知られています。
HUGO公式サイトは以下をご参照ください。
» HUGO公式サイト
HUGOの主なリリース
- 0.141.0
エラーハンドリングをコントロールしやすくするためのtryが導入された他、images.Maskやimages.QRの追加、alignxオプションの導入、バグ修正や機能改善が行われました。 - 0.140.0
柔軟なフックやランナーのセットアップが可能になるjs.Batchが機能追加された他、多数のバグ修正や機能改善が行われました。 - 0.139.0
廃止予定だったコードの除去が多数行われた他、依存性の更新や、hugo server後にブラウザを自動的に開く-Oオプションの追加などが行われました。 - 0.138.0
Page.Scratchの非推奨化が行われた他、データ競合の修正などが行われました。 - 0.137.0
バグ修正や多数の改善、依存ライブラリの更新、ドキュメントの更新が行われました。 - 0.136.0
DockerfileやDocker imageの改善が行われた他、バグ修正や多数の改善、依存ライブラリの更新、ドキュメントの更新が行われました。 - 0.135.0
タグ付けされたDocker imageが利用可能になった他、いくつかの機能改善と依存ライブラリの更新が行われました。 - 0.134.0
ContentWithoutSummaryメソッドが導入された他、table用レンダーフックの追加や多数のバグ修正、機能改善、依存ライブラリの更新が行われました。 - 0.133.0
設定オプションの追加や依存ライブラリの更新などが行われました。 - 0.132.0
KaTeXを用いたサーバーサイドの数式レンダリングのtransform.ToMathが導入された他、Githubスタイルのアラート表示への対応や、バグ修正、多数の改善などが行われました。 - 0.131.0
画像処理でのファイル名がより短いものになった他、多数の改善と依存パッケージのアップデートが行われました。 - 0.130.0
EXIFライブラリの変更があった他、math機能への追加が行われました。 - 0.129.0
hugo server実行時のブラウザ自動リロード機能に改修が加えられた他、複数のバグ修正や機能改善、依存パッケージの更新などが行われました。 - 0.128.0
TailwindCSS v4のサポートが加わった他、templates.Defer機能の追加や$page.GetTermsの速度改善などを含む多数の機能追加やバグ修正、改善が行われました。 - 0.127.0
resources.GetRemoteを用いた外部リソースのキャッシュやライブリロードの設定が行えるようになったほか、付随する調整が行われました。 - 0.126.0
JSONやTOML、YAML、XMLといったリモートのデータソースからページを生成できるContent Adaptersが導入された他、挿入テキストにもマークダウンを適用できる拡張の導入や、機能改善、依存パッケージのアップデート等が行われました。 - 0.125.0
テンプレート機能としてstrings.Diffの追加や、レンダー時にページ内容を取得する.PageInnerの追加が行われた他、多数のバグ修正や機能改善が行われました。 - 0.124.0
segmentsへの設定項目が追加された他、Goのバージョン更新やバグ修正、その他依存ライブラリ更新などの改善が行われました。 - 0.123.0
環境変数HUGO_MEMORYLIMITでメモリ使用量の上限を設定できるようになった他、ドキュメントストアの改善、paramsの概念のフロントマターへの追加など、多数の改善とバグ修正が行われました。 - 0.122.0
LaTeXやTeX記述がマークダウン内で利用できるように機能追加された他、依存パッケージの更新やバグ修正などが行われました。 - 0.121.0
libweb v1.3.2を筆頭に、依存パッケージの更新の他、細かな機能改善が行われました。 - 0.120.0
依存パッケージの更新の他、新しいPaddingイメージフィルタやパフォーマンス上のボトルネック発見に役立つdebug.Timer機能の導入などが行われました。 - 0.119.0
html/templateパッケージに関連するセキュリティ修正や画像処理の改善、依存パッケージの更新等が行われました。 - 0.118.0
キャッシュディレクトリが必要になるまで作られないようになった他、RegularPagesRecursiveの修正等のバグ修正が行われました。 - 0.117.0
Page.RenderShortcodesのメソッドが追加されるなどの改良が行われています。 - 0.116.0
cacheDirのデフォルトが変更された他、whereテンプレート機能が正規表現に対応しました。 - 0.115.0
sectionやtaxonomyページにおいても、パーマリンク設定が行えるようになりました。 - 0.114.0
Dart Sass Embeddedプロトコルへの対応が行われました。 - 0.113.0
hugo serverコマンドにTLS/HTTPSサポートが追加されました。 - 0.112.0
TailwindCSS v3.x系に正式に対応しました。 - 0.111.0
Pageに.Fragmentsメソッドが追加されました。
Hugo x SSGform
Hugoにフォームを追加する方法
HugoはいわゆるSSG(静的サイトジェネレーター)のため、それ自体の機能を使ってフォームを設置することはできません。正確には、フォームのhtmlを記述することはできても、その送信内容を受け取り、動的に処理しメールを発信する、といったことはできません。そこで、外部のフォームサービスを利用するか、メールアドレスを記載するだけにするか、の二択になってしまいます。
Hugoで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Hugoサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Hugo側にフォームのhtmlを記述する
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)
<form action="https://ssgform.com/s/HuGoSaMpLeFoRm" method="post">
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはHugoのローカルサーバーから、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Hugoを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なHugoライフを送ってください!
Get Started
まずはフリープランでスタート
フリープランでも機能制限は無し。フォームURL数無制限、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。