Hugo+Firebase+GitHub+CircleCIでブログ作る-0_1

静的サイトジェネレータについて

Posted on by Nacco 1 分で読める

こんにちは！Naccoです ( ･`ω･´)

前回のシステム構成で使った各ツールを順番に役割、種類などを紹介していきます！

今回は「静的サイトジェネレータについて」調べた内容です。

0章 ブログのシステム構成について

静的サイトジェネレータについて

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

静的サイトジェネレータ is 何？

静的サイトジェネレータとは、Markdownテキスト※1などの「コンテンツ」とデザイン、レイアウト情報などを含む「テンプレート」を合わせてHTMLファイル、CSSファイル、javascriptファイルなどから成る「静的サイト」を生成するツールです。 「コンテンツ」と「テンプレート」は完全に分離した状態でローカルマシンで管理します。

静的サイトジェネレータの種類により、おおまかにテンプレートとジェネレータの実装が異なります。このあと比較してみたいと思います。

※1 Markdownは軽量マークアップ言語。HTML生成用に開発され、現在はいろいろな用途で使用されています。可読性を保持したまま手早く「文書構成」を記すのに向いています。

ブログといえばWordpress(CMS)を思い浮かべます。CMSと比べて、「静的サイトジェネレータ」にはどのようなメリットがあるのでしょうか？

静的サイトジェネレータのメリット

  • セキュリティ脆弱性の心配が少ない
    • プログラムをサーバサイドに設置しないので、第三者による脆弱性の悪用のリスクが減る※2
  • バックアップや更新作業が不要
    • コンテンツ(記事)はMarkdown形式テキストでローカル保存、バージョン管理システム等で管理可能
    • 静的サイトジェネレータ本体の更新が必要になる頻度も低い※3
  • 高速に読込みができる
    • 静的サイトは読込みが速い！
    • この記事の読み込み時間は　およそ534ms！
  • スケールアウトが容易
    • 静的サイトはCDNで配信できるのでトラフィック増加時にスケールアウトできる
  • Markdown記法が利用可能なツールが多種ある
    • コンテンツの転用が簡単！
    • アイディア出し、レビューはHackMDを利用
      • HackMDはMarkdownテキストの共同編集が可能なので、他者とコンテンツのアイディア出し、レビューをしながら執筆を進められた
    • Markdown記法を使用できるプレゼンテーションツールを使ってプレゼン資料として流用もできる
      • GitHubと相性の良いGitPitchなどのプレゼンテーションツール

個人的に、最後にあげたMarkdown記法ツールの展開がうれしいです。例えば、この記事の内容をそのまま発表スライドに使えないかなと思ってます！

※2 SSR(サーバーサイドレンダリング)を導入すると別途サーバ側の堅牢性の考慮が必要になるかもしれません。これはJAMstackでSPA(シングルページアプリケーション)を作ることになったら調べます！

※3 実行ツール上で静的サイトジェネレータを展開する場合、ローカル環境とバージョンを揃える工夫が必要。くわしくは3章で書く予定です

静的サイトジェネレータのデメリット

  • CMS経由のコンテンツ投稿に比べて、静的サイトジェネレータによる投稿(デプロイ)には技術の習得が必要(基本的にはすべてCUI操作)※4
  • 静的ホスティングを利用するので、メールフォームや検索機能などの動的機能は外部API連携、FaaSなどを利用する必要がある
  • ECサイト構築や、コンテンツのマネタイズには向かない

※4 PubliiやLektorのようなダッシュボードからのコンテンツ作成やリモートサーバへのデプロイが簡単にできるような静的サイトCMS(ローカルマシン用)も出ています

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

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

先ほどあげた、ジェネレータの実装言語、テンプレートのフレームワーク、特徴などを一覧にしました。

種類 実装言語 Template FW 特徴
Hugo Go Go 機能はシンプル。HTML生成がとにかく高速
Jekyll Ruby Liquid 2017年一番人気。機能やテーマが充実している。
Gatsby JavaScript React PWA (Progressive Web App)を生成できる。
Next.js JavaScript React Server Side Rendering(SSR)が初期実装されている。
Nuxt.js JavaScript Vue Vue.jsアプリケーションを静的に生成できる。
Expose (demo) Bash HTML 写真、動画のギャラリーサイトを生成できる。
GitBook (demo) JavaScript Jinja2 ドキュメントサイトを生成できる。

今回はHugoを選択しました。 理由は、「とにかく速い」と噂があったことと、golangで実装している静的サイトジェネレータとして興味がありました。

詳しい比較はStaticGenがまとまっています。シングルページアプリケーション(SPA)を作っていくなら、js系のジェネレータを触っていくのも良いかと思います。

Expose、GitBookは用途特化のジェネレータです。 HugoやJekyllはテンプレートテーマが充実していて、ブログ用途に使いやすい印象です。

ブログ自動デプロイのシステム構成について、「静的サイトジェネレータ」について紹介しました！ 0章では、各ツールを順番に役割、種類などを紹介していきます！

次回：静的ホスティングについて≫

もし記事の内容でわからないところがあったら、★質問箱★に質問をください！Twitterで回答できるかはわかりませんが、このブログの記事か発表の糧にさせていただきます。