Skip to content

Ruby製静的サイトジェネレータ

静的サイトジェネレータ(Static Site Generator, SSG)は、Markdownなどのテンプレートファイルから、事前に静的なHTML、CSS、JavaScriptファイルを生成するツールです。生成されたサイトは高速で、安全性が高く、ホスティングも容易です。

Rubyのエコシステムには、世界的に人気のあるものからユニークな特徴を持つものまで、数多くの優れたSSGが存在します。この記事では、代表的なRuby製SSGを紹介します。

1. Jekyll

Jekyllは、最も有名で広く使われているRuby製SSGです。GitHub Pagesの公式SSGでもあり、ブログやポートフォリオ、ドキュメントサイトの構築に非常に人気があります。

  • 特徴:

    • ブログ志向: 投稿、カテゴリ、タグなどのブログ機能が組み込まれている。
    • 豊富なプラグインとテーマ: 長い歴史の中で、巨大なコミュニティによって多くのプラグインやテーマが開発されている。
    • Liquid���ンプレートエンジン: Shopifyによって開発された、シンプルで安全なテンプレートエンジンを使用。
    • GitHub Pagesとの親和性: git pushするだけでサイトをデプロイできる手軽さが魅力。
  • ユースケース: ブログ、個人のポートフォリオサイト、プロジェクトのドキュメント。

  • 基本的な使い方:

    bash
    $ gem install jekyll bundler
    $ jekyll new my-blog
    $ cd my-blog
    $ bundle exec jekyll serve

2. Middleman

Middlemanは、Jekyllよりも多機能で、より複雑なWebサイト構築に対応できるフレームワークです。モダンなフロントエンド開発のツールチェインとの統合も得意としています。

  • 特徴:

    • 高い拡張性: 豊富な拡張機能(アセットパイプライン、画像最適化、国際化など)が公式・サードパーティから提供されている。
    • 柔軟なデータソース: YAML、JSON、Rubyファイルなど、様々な形式のデータをサイト内で利用できる。
    • テンプレートエンジンの選択肢: ERB、Haml、Slimなど、好みのテンプレートエンジンを選択可能。
    • プロキシページ: テンプレートから動的に多数のページを生成する機能が強力。
  • ユースケース: マーケティングサイト、Eコマースサイトのフロントエンド、データ駆動型の静的サイト。

  • 基本的な使い方:

    bash
    $ gem install middleman
    $ middleman init my-site
    $ cd my-site
    $ bundle exec middleman server

3. Bridgetown

Bridgetownは、Jekyllからフォークして生まれた、モダンなWeb開発に焦点を当てた次世代のSSGです。フロントエンドのビルドツールとの統合や、動的なコンポーネントの利用を前提として設計されています。

  • 特徴:

    • モダンなフロントエンド統合: Webpack、esbuild、PostCSSなどが標準でセットアップされており、ReactやVueなどのコンポーネントを簡単に導入できる。
    • Ruby製コンポーネント: ViewComponentに似たRubyベースのコンポーネントシステムを持つ。
    • Rakeベースの自動化: Rakeタスクを使って、コンテンツの生成やデータ取得などのタスクを自動化できる。
    • Jekyllからの移行パス: Jekyllからの移行を支援するツールやガイドが提供されている。
  • ユースケース: インタラクティブな要素を持つ静的���イト、Jamstackアーキテクチャのフロントエンド、RubyとモダンJSの両方を活用したい開発者。

  • 基本的な使い方:

    bash
    $ gem install bridgetown -N
    $ bridgetown new my-bridgetown-site
    $ cd my-bridgetown-site
    $ yarn start # or bin/bridgetown start

まとめ

SSG強みこんな人におすすめ
Jekyllシンプルさ、ブログ機能、GitHub Pagesとの連携ブロガー、個人サイトを素早く立ち上げたい人
Middleman柔軟性、拡張性、データ駆動複雑なマーケティングサイトや企業サイトを構築したい人
BridgetownモダンなJS統合、コンポーネント指向Rubyのバックエンドとモダンなフロントエンドを組み合わせたい人

Ruby製SSGは、それぞれ異なる哲学と強みを持っています。プロジェクトの要件や個人の好みに合わせて最適なツールを選択することで、高速でメンテナンス性の高い静的サイトを効率的に構築することができます。

Markdownでコンテンツを管理し、Gitでバージョン管理を行うワークフローは非常に快適です。ぜひ一度、これらのSSGを試してみてください。

AI が自動生成した技術記事をまとめたテックブログ