preloader

静的サイトジェネレーターHugoによるウェブサイト構築 part.1

blog-image

新たにウェブサイトを立ち上げることになった際に、今度はどんな手法でサイトの構築を行おうか検討した結果、最近トレンドの静的サイトジェネレーターというものを使ってみようという事になりました。

静的サイトジェネレーターとは

文字通り、静的サイトを生成するソフトウェアのことです。と、これだけではわかる人にしかわかりませんね。

静的サイトというのは、事前に生成しておいたウェブページを単純に表示するだけのサイトのことで、これに対し、ユーザーからの要求(ブラウザ等でのアクセス)に応じて、その場でウェブページを生成して表示するサイトのことを動的サイトと呼びます(ブログサービスやCMS等がそれです)。

動的サイトの問題点と静的サイトの利点

現在のウェブサイトは動的サイトが主流ですが、最近、静的サイトが見直されるようになってきました。その理由として、動的サイトの抱える問題点が挙げられます。

  • パフォーマンス
    サーバー上でプログラムを動作させウェブページを動的に生成している関係上、どうしてもサーバー負荷が高くなりパフォーマンスの低下を招きやすいです。
  • セキュリティ
    同上の理由で、サーバー側プログラムの脆弱性を狙った攻撃を受けやすく、セキュリティを維持するのが難しいです。
  • メンテナンス
    サーバー側プログラムはもちろんプログラムの実行環境も適切なメンテナンスが必要であり、ウェブサイト本来の管理以外に余分な管理作業が発生します。
  • コスト
    サーバー負荷が高くなりやすいため高性能なサーバーが必要であり、プログラムの実行環境(データベースやアプリケーションサーバー等)も必要なため、コストが高くなります。

対して静的サイトの場合は、

  • パフォーマンス
    あらかじめ生成しておいたページを表示するだけなのでサーバーへの負荷も低く、パフォーマンス的には非常に有利です。
  • セキュリティ
    そもそもサーバー側プログラム自体が存在しませんから、脆弱性も攻撃のしようがありません。ウェブサーバー自体の脆弱性をつつかれる恐れはありますが、セキュリティ的には極めて安全性が高いと言えます。
  • メンテナンス
    静的サイトジェネレーターを使用する以上、ジェネレーターにかかわるメンテナンス作業は発生します。とはいえ余分な作業は動的サイトに比べると少ないです。
  • コスト
    静的コンテンツがほとんどのためさほど高性能なサーバーは必要なく、データベース等も必要ないためコストは低くなります。小規模サイトであれば無料で利用できるホスティングサービスもあります。

と、動的サイトの抱える問題点をあっさり解決できてしまいます。もっとも、静的サイトにも当然ながら欠点はあります(それ故、動的サイトが主流となったわけですから)。

  • インタラクティブ
    事前にウェブページを生成しておくため、問い合わせフォームや検索フォーム、掲示板といったユーザーの入力に応答するページを用意できません。これらの機能が必要な場合はクラウドサービスを利用する等の工夫が必要になります。
  • ターンアラウンド
    事前にウェブページを生成しサーバーにアップロード(デプロイ)する工程が必要なため、ページを追加・更新しても即座には反映できません。規模の大きなサイトになると相当なタイムラグが発生する場合もあります。
  • プログラミング
    HTMLやJavaScript等プログラム言語の知識や、エディタやシェル等開発環境に関するある程度の知識が必要になります。今後、静的サイトジェネレーターが普及してくれば変わるかもしれませんが、現時点ではプログラミング知識がないと静的サイトの構築は困難です。

つまり、静的サイトジェネレーターに向くのは、さほど規模の大きくない、更新頻度もあまり高くない、動的要素の少ないサイトで、プログラミング知識のある人材のいるサイト(まさにここのような)、ということになります。

静的サイトジェネレーター Hugo

前置きが長くなりましたが、以上のような理由でこのサイトの構築・管理に静的サイトジェネレーターを使うことに決めたのですが、有名どころだけでも

  • Gatsby
  • Next
  • Nuxt
  • Hugo
  • Jekyll

と結構あり、どれにするか迷うのですが、今回は、ビルドが爆速wとの噂のHugoを採用することにしました。

今日はここまで。次回はHugoの導入と開発環境の構築について投稿します。

comments powered by Disqus