Hexoにフォームを追加/設置/設定する方法
What is Hexo?
Hexoとは
Hexoは、Node.js上に構築された静的サイトジェネレーターです。近年人気を集めている他のJavascript系ジェネレーターと違い、Node.jsだけで扱える気軽さが特徴です。ビルトインサーバーもあり、普段からNode.jsを使っている方にはつまづくところが少ないのではないでしょうか。テンプレートも多くあり、マークダウンでも記述ができ、フットワークの軽い運用が可能です。
Hexoは2012年にトミーチェン氏により開発がはじめられ、今に至るまで、他の静的サイトジェネレーターと比べるとコミュニティ開発の色が強いプロジェクトのように感じます。
HexoはNode.jsベースとはいえ、出力されるものは静的なページです。問い合わせフォームを実装となると非常に手間ですし、外部メールAPIやSMTPサービスが必要になってきてしまいます。気軽に導入したい、というユースケースでは、外部フォームサービスの利用が有力になってくるのではないでしょうか。
Hexo x SSGform
Hexoにフォームを追加する方法
Hexoで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Hexoサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Hexo側にフォームのhtmlを記述する
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはHexoのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Hexoを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なHexoライフを送ってください！
