Hexoにフォームを追加/設置/設定する方法

What is Hexo?
Hexoとは

Hexoは、Node.js上に構築された静的サイトジェネレーターです。近年人気を集めている他のJavascript系ジェネレーターと違い、Node.jsだけで扱える気軽さが特徴です。ビルトインサーバーもあり、普段からNode.jsを使っている方にはつまづくところが少ないのではないでしょうか。テンプレートも多くあり、マークダウンでも記述ができ、フットワークの軽い運用が可能です。静的サイトを生成するために、MarkdownやPugなどのテンプレートエンジンを使用し、テーマやプラグインを使ってカスタマイズすることができます。

Hexoは2012年にトミーチェン氏により開発がはじめられ、当初、Hexo.jsは「Octopressの改良版」としてリリースされました。Octopressは、Rubyで書かれた静的サイトジェネレーターで、人気がありましたが、Hexo.jsはNode.jsで動作することによって、高速かつ効率的な開発が可能になりました。

Hexo.jsの最初のバージョンは、GitHubで公開され、オープンソースとして開発が続けられました。その後、Hexo.jsは、多数の開発者によってコントリビュートされ、機能の追加や改善が行われています。今に至るまで、他の静的サイトジェネレーターと比べるとコミュニティ開発の色が強いプロジェクトのように感じます。継続的に開発は続けられているものの、そのペースは類似のサービスと比べると少し見劣りするかもしれません。

Hexo公式サイトは以下をご参照ください。
» Hexo公式サイト

Hexoの主なリリース

Hexo x SSGform
Hexoにフォームを追加する方法

HexoはNode.jsベースとはいえ、出力されるものは静的なページです。問い合わせフォームを実装となると非常に手間ですし、外部メールAPIやSMTPサービスが必要になってきてしまいます。気軽に導入したい、というユースケースでは、外部フォームサービスの利用が有力になってくるのではないでしょうか。

Hexoで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。

1. SSGformアカウントを作成する

メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。

2. SSGformマイページで、フォームを作成する

好きな名前をつけてフォームを管理することができます。ここでは例えば「Hexoサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。

3. Hexo側にフォームのhtmlを記述する

<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)

<form action="https://ssgform.com/s/HeXoFoRm" 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. テスト送信して、完了です

あとはHexoのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。

「Hexoを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なHexoライフを送ってください!

 

Get Started
まずはフリープランでスタート

フリープランでも機能制限は無し。フォームURL数無制限、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。
SSGformロゴ