推奨されます, 2024

エディターズチョイス

10最高の静的サイトジェネレータ

最近、Web開発の分野では静的Webサイトへの大きなシフトがあります。 静的サイトは保守がより簡単で(データベース、サーバーサイドスクリプトはありません)、より安全です。一般に、ユーザーのデバイスに提供されるのはHTML、CSS、およびJavascriptファイルのみです。 ブログやドキュメンテーションWebサイトなどの特定の種類のWebサイトを静的にするには、HTMLファイルに直接コードを書くだけでも大変です。 特にデザインなどの小さな機能を変更する必要がある場合は、大規模なコンテンツを含むサイトを維持することも困難になります。

ここが静的サイトジェネレータが登場するところです。静的サイトジェネレータは基本的に、さまざまなリソースファイルを1つのWebサイトに変換(またはコンパイル)します。 つまり、コンテンツをレイアウトコードから分離し、画像などのサイト資産を完全に区別することができます。 そこにはたくさんの静的サイトジェネレータがあります。 ここに彼らのレビューと共に10最高の静的サイトジェネレータのリストがあります。

静的サイトジェネレータ

1.ジキル

一言で言えば: スタティックサイトジェネレータの王様 。 Jekyllは最も優れたドキュメント、最大のコミュニティ、そして最高のサポートを備えた、最もよく使われている静的ジェネレータです。 GitHubでも、GitHub PagesサービスでJekyllのサポートを提供しています。 Jekyllはブログを意識していることに誇りを持っています。 Jekyllで静的ブログを作るのは本当に簡単です。 基本的なWeb開発に関する知識だけが必要です。 初心者向けの簡単なセットアップ機能のおかげで、それは本当に輝いています。同時に、それらを使う知識を持っている人にとっては本当に強力な機能を持っています。

Jekyllでは、さまざまなプラグイン、タグを作成して使用したり、Jekyllで使用したいマークアップ言語用の独自のコンバータを作成したりすることもできます。 Jekyllのデフォルトのマークアップ言語は他のほとんどのものと同様にMarkdownです。 JekyllはLess、Stylusをコンパイルするためのプラグイン、タグクラウドを生成するためのプラグイン、ブログ用のユーザーページ、その他たくさんのものを提供しています。

JekyllはShopifyのLiquid Template Engineに基づいています。 完全にRuby上で動作するので、rvmを使って、またはbundlerを使って、依存関係と共に簡単にインストールすることができます。 WordPress、Blogger、またはその他のブログサイトからの移行を検討している場合は、Jekyllにも簡単な移行オプションがあります。 ユーザーサイズの点では、他の静的サイト生成ツールを凌駕しています。 それは活発に開発中です(執筆時点で1日前に来るそのGitHubリポジトリへの最後の変更)。

Jekyllをインストールするには、Rubyで次のコマンドを入力してgem install jekyll

ホームページ

ペリカン

PelicanはPython上に構築された静的サイトジェネレータです。 多言語コンテンツの投稿、コード(構文)の強調表示、RSSやAtomフィードの簡単な生成を特徴としています。 Pelicanにはプラグインの素晴らしい選択があり、それらはすべて中央のGitHubリポジトリでホストされています。 デフォルトでは、Markdown、reStructuredText、およびAscii Docの3つの文書フォーマットをサポートしています。

PelicanはPython上に構築されているので非常にユニークです。 それはPelicanのための美しいテーマとテンプレートの簡単な作成を可能にするために、Pythonベースの強力なJinjaテンプレートエンジンをサポートします。 移行サポートに関しては、PelicanはWordPressとTumblrのサポートを提供しています。 通常のYAMLファイルの設定ではなく、Pelicanは設定と設定にpelicanconf.pyという名前の.pyファイルを使用します。

pelicanをインストールする最も簡単な方法は、pipを使用pip install pelicanですpip install pelican

ホームページ

仲介人

MiddlemanはRubyで動くスタティックサイトジェネレータで、スタティックサイトを構築するための簡単なアプローチに従います。 簡単なタグ生成、分類された記事を一覧表示するためのクイックコマンド、ページネーションなど、静的ブログを維持するための強力な機能があります。 Middleman は移行サポートを提供していないので、既存のブログを静的にしたい場合は、今のところMiddlemanは最善の方法ではないかもしれません。

Middlemanは、HAML、Coffeescript、Sassなど、最新のWeb開発ツールのほとんどをサポートしています。 デフォルトのテンプレートエンジンはeRbですが、好みのカスタムテンプレートエンジンに切り替えることができます。 Tilt対応のすべてのテンプレートエンジン(完全なリストはここにあります)はMiddleman上で動作します。 それはネイティブに2つの設定フォーマットをサポートします - YAML、JSON。 コンテンツのFrontmatterも、使用している設定フォーマットに応じてYAMLまたはJSONにする必要があります。

Rubyを使用してMiddlemanをインストールします。gem gem install middleman

ホームページ

4.メタルスミス

Metalsmithはプラガブルな静的サイトジェネレータであることを誇りにしています。 これは、Metalsmithのすべてのロジックがプラグインによって処理されることを意味します。 あなたが必要とするどんな機能でも、ただ必要なプラグインを追加するだけです。 Metalsmithが提供する膨大な数のプラグインは、ほぼすべての競合他社を上回っています(JekyllとDocpadを除く)。 つまり、Metalsmithは単なる静的サイトジェネレータ以上のものとして使用できるということです。

彼ら自身の言葉では、「すべてがプラグインなので、コアライブラリは実際にはファイルのディレクトリを操作するための単なる抽象概念です」。 これが最終的に付け加えるものは、あなたがプロジェクト足場、電子ブックジェネレータ、ビルドツール、技術文書などを作るのと同じくらい簡単にあなたがMetalsmithを使うということです(これらの例のいくつかはMetalsmithウェブサイトで紹介されます)。

MetalsmithはNode.jsをベースにしており、Node Package Managerを使用して$ npm install metalsmithできます。 $ npm install metalsmith

  Homepage 

5.ハープ

Harpは、追加の設定なしで、Jade、Markdown、LESS、Sass、Coffeescript、EjS、Stylusの前処理を組み込んでいます。 また JadeとEjSでレイアウト/部分的なパラダイム使用することもできます。これには他の静的サイトジェネレータに特別なプラグインが必要です。

HarpはNode.Js上に構築されており、あなたのDropboxフォルダからWebページを作成することを可能にするHarpプラットフォームと連携して動作することができます。 Harpは、GitHubページ、PhoneGap、およびHerokuでも使用できるようにページをコンパイルすることもできます。

Harpをインストールするには、npmを使って実行しますsudo npm install -g harp

 ホームページ 

オクトプレス

技術的にはOctopressは修正されたJekyllフォークですが、その人気の高さからこのリストに含まれています。 Octopressは基本的にハッカー(そしてRails開発者)のためのJekyllです。 Octopressのデフォルト設定にはJekyllでブログを実行するために必要なプラグインの多くが含まれているので、Octopressのカスタマイズは、特にブログを作成している場合は特に簡単になります。

カスタマイズ部分では、Octopressのコードによって、ユーザーはコードを変更したり自分でコードを書いたりすることが簡単になります。 そうは言っても、Octopress用のプラグインの多くはJekyllと互換性があります(逆も同様)。

Octopressをインストールするには、

  1. GitHubリポジトリをクローンする
    git clone git://github.com/imathis/octopress.git octopress
    cd octopress
  2. 依存関係をインストールする
    gem install bundler
    rbenv rehashrbenv rehashを使用している場合は、bundleコマンドを実行できるように再ハッシュします。
    bundle install
  3. デフォルトのOctopressテーマをインストールする
    rake install
ホームページ

7. Docpad

Docpadは動的静的サイトジェネレータです。 通常の静的サイトジェネレータの機能を拡張します。クエリエンジンを介したデータベースクエリ、外部データベースからのページのインポート、リクエストごとのWebページの再レンダリングなどの機能があります。

Docpadは、Coffeescript、Stylus、LESSなどのプリプロセッサをネイティブでサポートしており、テンプレートエンジン、プリプロセッサ、およびマークアップ言語をサポートするためのプラグインを使用しているため、必要なプラグインを使用して任意の組み合わせを選択できます。 DocpadはTumblr、GitHubそしてDropboxのような外部ソースからのプラグインによるページのインポートもサポートします。

Docpadは機能豊富なプラットフォームで、たくさんのプラグインと素晴らしいドキュメントがあります。 これは、サーバーとの対話のためにNode.js上に構築され使用されています。

npmを使用してDocpadをインストールするだけです。npm npm install -g npm; npm install -g [email protected] npm install -g npm; npm install -g [email protected]

 ホームページ 

ヘクソ

Hexoは、非常に高速なサイト生成速度を誇る軽量の静的ブログフレームワークです。 Hexoは、単純な静的サイトジェネレータを必要とする大量のコンテンツを持つブロガーに最適です。 WordPress、Joomla、Jekyll、Octopress、RSSなどの他のブログプラットフォームからの簡単な移行オプションを提供します。 Hexoの素晴らしいところは、Octopress用に作成されたプラグインのほとんどを使用できるということです(さらに拡張すると、Jekyll用に作成されたプラグインに非常に小さな変更を加えるだけです)。

HexoはMarkdownをサポートしています、YAMLはフロントマターと設定についてです。 迅速な性質を維持しながら、Hexoを使用すると、GitHub、Heroku、Rsyncなどのサイトに1つのコマンドで展開できます。

Hexoは、Node.jsを使用してインストールできます。npm npm install hexo-cli -g

ホームページ

9.ヒューゴ

Hugoは、テンプレートやパーシャルのサポート、ページ付け、そして基本的にHugoに続く独自のコンテンツ分類システムである「分類法」のような優れた万能機能を備えた汎用の静的サイトジェネレータです。 つまり、タグだけでなく、他の方法でも簡単に分類できます。たとえば、 カテゴリシリーズから直接フロントマターに直接アクセスできます。 Hugoは、YAML、JSON、およびTOMLの3つのデータファイルタイプをサポートしています。そして、どれが最も快適かを決定することができます。

プラグインの代わりに、Hugoは 'shortcodes'を使用しているので、Markdown内でリッチコンテンツを使用できます。 これがどのように機能するかを知るためには、この記事を読んでください。 HugoはGoプログラミング言語で書かれており、GitHubページにはプラットフォームごとに別々のインストールファイルがあります。 Hugoをどのように使用できるようにインストールできるかを正確に知るには、Hugoのインストール手順を読んでください。

Homebrewを使用している場合は、Hugoとすべての依存関係を次のbrew install hugoできますbrew install hugo

ホームページ

10.ブランチ

ブランチは、ブログやWebサイトではなくHTML5 Webアプリケーションに向いていますが、それでもまだ非常に使いやすく、迅速で静的なサイトジェネレータです。 すべてのコードとスクリプトをコンパイルするだけでなく、コードを縮小(縮小)したり、画像を自動的に圧縮したりすることもできます。 ブランチはあなたのニーズに応じてそれをカスタマイズするために使用できるプラグインの全体のホストを持っています。 Brunchプラグインの完全なリストはここにあります。

ブランチは基本的にあなたのウェブサイト(またはウェブアプリ)を開始するための定型句である「スケルトン」を提供します。 Brunchはプロジェクトの変更されていない部分をすべてキャッシュし、改訂されたファイルだけをコンパイルするので、最も速いコンパイル速度の1つを提供します。 ブランチはNode.js上に構築されており、npmを使用してインストールできますnpm install -g brunch

ホームページ

この記事について何か提案がありますか? コメントに残してください。

Top