静的サイトの構造見直し

2年以上前に mh.home のデザインをリニューアルしました。

blog.kondoumh.com

この時は、Google Web Starter Kit を使いました。Material Design っぽい Responsive なページが作れて、BrowserSync でクロスブラウザテストが簡単。Gulp でのタスクパイプラインが用意されていてすぐに作成に取りかかれるというものでした。

github.com

2016 年までリリースされてましたが、更新止まってます。

静的サイトは更新頻度少ないので、たまにメンテしようとすると、NPM や Gulp のエラーが出て萎えます。HTML 書くのもだるいです。

最近は、static site generator が流行っているので乗り換え先候補として、React StaticHexo の使い心地を試してみました。Markdown で書けて更新楽そうです。

これらツールで生成されたサイトは、わかりやすいパス構造のディレクトリが掘られ、パスごとに index.html を配置するという構成になっています。かたや mh.home は適当な命名の html ファイルを直接参照する方式。static site generator を導入する前に今の構造を見直した方が良さそうです。

ということで、久々に Web Starter Kit のプロジェクトの package を更新して、Gulp のエラーを解消し、サイト構造を修正しました。

before after
Top /index.html /
Profile /profile.html /profile/
History /history.html /history/
Software /software/index.html /software/
iEdit /software/iedit.html /software/iedit/
iEdit Download /software/dliedit.html /software/iedit/download/
iEdit Tools /software/iedittools.html /software/iedit/tools/

パス構造がわかりやすく正規化されました。URL 末尾のスラッシュ (trailing slash) はファイルではなくディレクトリへの要求を表すことになるそうです。

既存のページへのリクエストをリダイレクトさせるため .htaccess で Rewrite を設定。

今回はここで力尽きました。

kondoumh.com

追記) 2019.08.07

1年越しで static site generator に移行しました。

blog.kondoumh.com