サイトを大規模リニューアルしました
投稿: 2023年4月2日 (最終更新: 2023年12月9日) • 4 分 で読了 • 1,587 語Jekyll から Hugo へ
こんにちは！
お気付きの通り、この度サイトをリニューアルしました。
変更点
多言語対応
とりあえずブログ以外のページを日本語・英語両対応にしました。
右上の「Language」から切り替えられます。
(スマホの場合は右上の三本線をタップすると出てきます。)
ブログも、余力があるときには英語版を用意するかもしれません。
検索機能追加
全文検索機能を追加しました。
左上の検索ボックスに文字を打ち込むことで検索可能です。
(スマホの場合は右上の三本線をタップすると検索ボックスが現れます。)
ただし、動的サイトではないのでサーバーサイドでの検索処理は行えません。
そのため、インデックスファイルを取得しクライアント側で検索処理を行う仕組みになっています。
インデックスファイルはそれなりに容量がありますが、検索ボックスがクリックされてから読み込むようにすることで無駄なデータ通信を抑えています。
(つまり、検索ボックスに触れなければインデックスファイルは読み込まれません。)
上下矢印キーで候補を選択し、Enter キーで該当ページに飛べます。
ブログとポートフォリオの統合
今まではブログとポートフォリオが別サイト・別ドメインでしたが、このリニューアルを機に統合しました。
単純にブログとポートフォリオが別だと管理が面倒なのと、この2つを分ける意義を感じられなくなってきたためです。
また、今までは作品一覧や問い合わせフォームがポートフォリオ上にあり、ブログからはアクセスしづらい状態でした。
(一応、自己紹介ページからポートフォリオに飛び、アクセスすることは可能でしたが……)
今回の統合により、ブログから作品一覧や問い合わせフォームへの導線がシンプルになりました。
なおブログがポートフォリオに吸収される形での統合となったためブログのドメインが変更になりましたが、リダイレクトを付けて対処しています。
問い合わせフォームの刷新
今までは独自のフォームに入力された内容を Google フォームに Ajax で送信する、というかなり無理のあるシステムでしたが、今回埋め込みフォームの専門のサービスに切り替えました。
これにより、今まで諦めていた reCAPTCHA を導入できました。これでスパムの問い合わせがかなり減るはずです。
(Google フォーム自体にも reCAPTCHA 機能はありますが、自分は Google フォームを無理やりカスタマイズしていたので使えませんでした。)
リニューアルの動機
では、なぜわざわざリニューアルしたのかということですが、それはポートフォリオとブログで使用していた CMS がサービス終了することになったためです。
今までは Forestry という CMS を使用していたのですが、同じ開発チームが TinaCMS を新たに開発し安定版に達したため Forestry は役目を終えることになりました。
現在使っているのは TinaCMS の方です。
「なら、デザイン等は変えずに CMS だけ変えればよかったのでは？」と思われるかもしれませんが、実は今までのブログやポートフォリオでは Node.js を使用していなかったのです。TinaCMS は npm ライブラリとして提供されるため、Node.js の導入が必要となります。
Node.js を入れるのも可能ではあるのですが、面倒なことになりそうだったのと他のフレームワークにも関心があったのでリニューアルを決意しました。
Hugo にしてどうだったか
ということで Jekyll から Hugo に乗り換えたのですが、結果的には良かったと思っています。
多言語対応や Git と連携した更新日時表示が標準機能のみでできるので、開発・執筆体験が大幅に改善されました。
過去に Next.js でブログを作ったこともあるのですが、SPA 周りの挙動が厄介であまりいい記憶は残っていません。
Hugo も同じようなものかと思っていましたが、想像以上に簡単にサイトを構築できました。
検索機能など、「静的サイトだから…」と諦める要件が少なかったです。
ブログのフレームワークで困っている人が居たら、とりあえず Hugo を勧めようと思っています。
関連記事
