JavaScript勉強会

JavaScriptの学習日記

静的サイトジェネレーターの人気ランキング「StaticGen」

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。

  • 静的ページ=早い:Webサーバーに置いたHTMLファイルをそのまま表示
  • 動的ページ=遅い:アクセスのたびにプログラムでHTMLを生成して表示

 

Webサイトのコンテンツ制作を管理するCMS(コンテンツ管理システム)の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」(Static Site Generator)と呼ばれています。

 

WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。

 

jsstudy.hatenablog.com

 

StaticGen

今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか?いまいちよく分かりませんでした。

 

とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあったので、選ぶときの参考にしてみたいと思います。

 

www.staticgen.com

 

f:id:jsstudy:20181114220107j:plain

 

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

「Languages」(使用プログラミング言語)の欄を見ると、JavaScriptが結構多いですね?

JavaScriptの勉強がてら、ちょっと試してみるのもいいかも?

 

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

PHPだと、「Jigsaw」というLaravel用の静的サイトジェネレーターもありました。

http://jigsaw.tighten.co/

 

最近はノーマークだったけど、CodeIgniter製のCMS「ExpressionEngine」が無料になったみたいです。(WordPressの代替にいいかも?)

 

expressionengine.com

 

サーバー

静的ページを設置するWebサーバーは、「Netlify」が人気みたいです。

 

www.netlify.com

 

静的ページと動的ページを1つのサーバーに混在させるなら、サーバーの管理者権限が必要ですね。

とりあえずなら、さくらVPSの安いプランでOK?

 

vps.sakura.ad.jp

 

  • 構成:Nginx+Varnish+Cloudflare、とか。

 

静的ページと動的ページでサブドメインを分けて、DNSロードバランサーを使って、別々のサーバーに割り当てることも可能ですね。(サーバーの料金を節約w)

 

StaticGenの参考情報

tech.qookie.jp

 

まとめ

  • 静的サイトジェネレーターは、たくさんある。
  • 候補の選択は、人気ランキングの「StaticGen」なども参考にしてみる。
  • デザインのカスタマイズが簡単にできるのがいい。
  • コンテンツ作成後の静的ページ生成のスピードが速いのがいい。
  • 静的ページと動的ページを混ぜる場合は、別々のサーバーに置いて、DNSなどで割り振る。

 

選択肢がたくさんあるので、いろいろ試してみたいと思います。 

 

 

Node.js超入門[第2版]

Node.js超入門[第2版]

 

 

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発