会社の勉強会的なので発表することになったのですが 特に発表できるような内容がないので 静的サイトジェネレータの話をすることにしました。これを含めた以降の記事をほぼそのまま使う予定です。

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


英語では「Static site generator」といいます。

従来のサイトの作成ではWordPressやghostといったCMSを利用することが多かったと思いますが、これらのCMSはデータをデータベースに格納してユーザのリクエストに応じてデータベースから値を取得し結果を表示するという方式をとります。これに対して静的サイトジェネレータではあらかじめhtmlを生成しておいて、ユーザからのリクエストに応じてWebサーバがhtmlを配信するという方法をとります。

htmlは各々の静的サイトジェネレータの言語別のテンプレートエンジンを利用して生成します。例えばHexoの場合はEJS, PugであったりGatsbyの場合はReactであったりします。これらのテンプレートエンジンを組み込んだテーマが公式、もしくはコミュニティで公開されており、ユーザは利用したいテーマを使用・もしくは自作・カスタマイズしてhtmlを生成します。

次に従来のCMSと比較した静的サイトジェネレータのメリット・デメリットについて記載します。

メリット


環境構築が容易

昨今ではDocker等で容易になったとは言え、やはりデータベースと実行環境を準備するのは非常に手間です。静的サイトジェネレータではローカルマシンの開発環境のみでサーバ側はWebサーバのみ、ホスティング方法によっては不要です。

セキュリティ的に強い

基本的にhtml + css + JavaScriptのみなので脆弱性は少ないです。

配信が高速

前述のとおり、あらかじめ生成されているコンテンツを配信するだけなので(基本的に)高速です。

Markdownで記述できる

だいたいの静的サイトジェネレータはMarkdownで記述できます。Markdown便利ですよね(方言で違いがあるのを除いて)また、各記事のメタ情報(tagなど)の書き方もおおよそ似通っているので静的サイトジェネレータジェネレータ間の移行も比較的容易と思われます。

デメリット


WebUIで編集できない

CMS機能は備わっていないので基本的に編集はローカルマシンで行います。ただし、NetlifyやForestry.ioを利用すると静的サイトジェネレータの種類と記事の保管先(GitHubとか)によってはCMS機能を付与できるようです。

複雑なことを行うには工夫がいる

データベースがないので、以下のようなことを行うにはひと工夫必要です。

  • いいね。ボタンの実装
  • 検索機能
  • 関連記事
  • コメント欄

…などなど。要するに基本的に記事生成時に全てが決まってしまうため、動的にデータを取得して何かを行うということは難しいです。これらを行うにはJavaScriptと外部のサービスを組み合わせるなどの工夫が必要になります。

情報が少なめ

WordPressなどと比較すると(特に日本語の情報が)少ないように思えます。

用途


静的サイトジェネレータの用途ですが、基本的にCLIで行うということもあってかIT系のサイトや個人ブログで用いられることが多いです。他にはOSSのドキュメント生成に利用されることも多いようです。

続き


一つの記事で書くと長いので区切ります。

つづき