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はNode.jsベースとはいえ、出力されるものは静的なページです。問い合わせフォームを実装となると非常に手間ですし、外部メールAPIやSMTPサービスが必要になってきてしまいます。気軽に導入したい、というユースケースでは、外部フォームサービスの利用が有力になってくるのではないでしょうか。
Hexoで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Hexoサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)
あとはHexoのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Hexoを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なHexoライフを送ってください!