読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

静的サイトジェネレータとは? | その利点と比較について説明するよ

静的サイト Hugo Jekyll WordPress

なぜ静的サイトなのか?

  • セキュリティに強くなる
  • 大量アクセスに耐えられる
  • サーバー代が安くなる
  • コメント欄やフォームもつけられる(外部のサービスを利用)

ウェブサイト運営と言えばWordPress?

今時はウェブサイトを立ち上げるというと、すぐWordPress という風潮があるようです。

しかし、WordPressには様々な問題があります。

  • セキュリティの問題
  • 重い
  • 同時接続数の制約
  • コストの問題

WordPress

WordPressは世界で最も普及しているCMSですが、そのセキュリティについては疑問符が付きます。

2013年の話ですが、 4000以上のWordPressサイトが軒並みハッキングの被害に遭う大惨事が発生しました。

www.landerblue.co.jp

togetter.com

また、最近では、REST API機能の脆弱性を狙った大規模なクラッキングが発生しています。

既に約100万件ものサイトで改ざん被害が発生しているというのです。

www.atmarkit.co.jp

事件が発生したのはず昨日(2017/1/30)の午前中。 いつものようにPCのブラウザでこのブログにアクセスすると、ブログのトップページを表示したと思ったら次の瞬間にリダイレクト(URL転送)がかかり、外部のおかしなサイトに切り替わりました。こんなような感じで↓

yossy-style.net

 WordPress向けのセキュリティプラグイン「Wordfence Security」を提供している米Feedjitは、WordPressのREST APIの処理に起因する脆弱性を突いた攻撃により改ざんされたウェブサイトが2月9日までに155万サイトを超えたことを明らかにした。「WordPressに関連する脆弱性のうち、最悪のもの」としている。

internet.watch.impress.co.jp

このように毎年のように新しい脆弱性が発見され、そのたびに大騒ぎになり、多くの被害者が出ているようです。

プログラマーを始め、ある程度詳しい人であれば、すぐにアップデートを始めとした脆弱性対応ができそうですが、そうではない人、特にITに苦手意識のあるクライアントに、WordPressを使用していただくのは、結構リスクの大きなことであると言えるのではないでしょうか?

しかし、静的サイトであればセキュリティの問題はほとんど皆無になります。そもそも動く箇所がないので実質無敵とも言えます。

重い・あまり多くの同時接続に耐えられない

WordPressのようなCMSはアクセスがあるたびにスクリプトが起動してページを動的に組み立てる仕組みになっています。

しかし、WordPressはあまり高速でないPHPの上で構築された言語です。

安いレンタルサーバーであれば数百の同時アクセス、専用のサーバーであっても一千・二千くらいの同時アクセスが殺到すればサーバーがダウンしてしまう。

特定の記事がSNSでバズって、多くの人がウェブサイトを訪れるようなチャンスがあったとしても、その機会を逃してしまうリスクがあるのは残念なことです。

もちろんキャッシュを貼るなり、リバースプロキシを置くなりの対策も可能ですが、非エンジニアで、専門知識のない人には厳しいでしょう

コストの問題

もちろん上記で挙げた同時接続数の問題は、サーバーのスケールアップやロードバランサーなどで解決することも可能なのですが、それは非常にコストがかかります。

ここで挙げた複数の欠点は、JoomlaやDrupalのような他のPHPで構築されたCMSでも当てはまりそうなことです。

静的サイトジェネレータの選択

そこで静的サイトジェネレータの導入はいかがでしょうか?

静的サイトというと少し新しいような印象を与えるかもしれませんが、その実態は極めてプリミティブな、HTMLファイルをサーバーから配信するだけのかんたんな仕組みです。

え?それでは問題があるのでは?

心配は要りません。最近は便利なクラウドサービスが普及しているので、余計な機能はすべて任せればよいのです。

どうして静的サイトなのにコメント欄やフォームを追加できるのか?

それはサーバーではなく、ユーザーの利用しているPCやスマートフォン上で処理を行い、それをクラウドサービスが提供しているサーバー上で処理していいるからで、詳しい説明は省きますが、とにかく、静的サイトでも動的な部分を追加することが可能なのです。

コメント欄

WordPressの組み込みのコメント欄を使用するよりも、便利で管理しやすい外部のWebサービスを利用しましょう.

事実、WordPressのコメント機能をデフォルトの設定で使用すると、すぐに大量のスパムで埋め尽くされてしまいます。もちろんAkismetのようなスパム対策プラグインがありますが、一定以上の機能を使用するとなると有料プランにアップグレードしないといけないので困りものです。

Disqus

f:id:mochizuki_p:20170213214053p:plain

disqus.com

日本語対応は不十分ですが、多機能でデザイン性の高いコメント欄がかんたんに導入できます。

f:id:mochizuki_p:20170213214101p:plain

Facebook

Facebookにはコメントをウェブサイトに取り付けることができる機能があります。これを使用すれば大丈夫ですね。

developers.facebook.com

f:id:mochizuki_p:20170213214112p:plain

お問い合わせ・フォーム欄

これもWordPressの組み込みの機能を使用する必要はありません。

Google フォーム

www.google.com

Googleが提供しているサービスで、任意のフォームをかんたんにWebサイトに設置できます 。フォームはお客様の個人情報を預かることもあり、セキュリティには結構気をつける必要がありますが、Googleの提供するサービスとなるとかなり安心できますね。

複数のHTMLファイルを管理するのは大変では?

もちろん普通に管理していたのでは大変です。

でも、静的サイトジェネレータと呼ばれるフレームワークを使用すれば複数のHTMLファイルを一括で書き出すことができ、非常に管理が楽になります。

いずれのケースもCMSのようにテーマを作成でき、複数のHTMLファイルをかんたんに書き出すことが可能になっています。

書き出されたHTMLファイルはFTPを利用してサーバーに転送すれば簡単に公開できます。

Jekyll

f:id:mochizuki_p:20170213214152p:plain

jekyllrb.com

Rubyで構築された静的サイトジェネレータです。

複数の無料テンプレートが公開されており、自由に使用することができます。

Hugo

f:id:mochizuki_p:20170213214140p:plain

gohugo.io

Go言語で構築された静的サイトジェネレータで、特徴はビルドが非常に高速であること、そして、WordPressのように無料のテンプレートが有志によって複数公開されていることです。もちろん、テンプレートは後で差し替えることも可能です。

StaticPress

f:id:mochizuki_p:20170213214252p:plain

WordPressですでにサイト運営を始めているという場合は、WordPressから静的サイトを吐き出すプラグインを使用すると良いでしょう。 これがStaticPressです。

wordpress.org

まとめ

静的サイトジェネレータが向いているケース

更新の少ないコーポレートサイト・店舗の公式サイトなど

静的サイトジェネレータが向いていないケース

毎日のように更新のあるブログ形式のサイト