メタルスミスを使用して静的サイトを作成する方法-jsチュートリアル-php.cn

How to Create a Static Site with Metalsmith

前の記事では、静的なWebサイトジェネレーターを使用するかどうかの理由について説明しました。要するに、静的なWebサイトジェネレーターは、テンプレートと生データ（通常はMarkdownファイルに含まれる）からのHTMLのみを含むページファイルを構築します。ホスティング、パフォーマンス、セキュリティのオーバーヘッドなしで、いくつかのCMSの利点を提供します。

静的Webサイトは、次のようなさまざまなプロジェクトに適している場合があります。

REST APIなどの技術文書。
基本的に、静的なWebサイトジェネレーターは建築ツールです。それを使用して、タスクを実行したり、グラントやガルプのようにプロジェクトの足場をプロジェクトできます。

キーポイント

Metalsmithは、従来のCMSのオーバーヘッドなしで軽量のWebサイトを作成するのに最適な柔軟なプラグ可能な静的Webサイトジェネレーターです。

なぜメタルスミスを選ぶのですか？

議論の余地のない静的WebサイトチャンピオンはJekyllです - 2008年に開始されたRubyプロジェクトです。 Jekyllを使用するために必ずしもRubyの専門知識が必要ではありませんが、それは役立ちます。幸いなことに、ほとんどの人気言語には、さまざまなオープンソースの静的Webサイトジェネレーターがあります。 JavaScriptオプションには、Hexo、Harp、およびAssembleが含まれます。より簡単なプロジェクトでは、Gulpなどのビルドツールを使用することもできます。

このチュートリアルは、このチュートリアルにメタルスミスを選択しました

特定の種類のプロジェクト（ブログなど）をターゲットにしていません

さまざまなテンプレートおよびデータ形式のオプションをサポートしています

軽量

依存関係はめったにありません
は、シンプルなプラグインアーキテクチャと
簡単に開始できます。
このチュートリアルは、デモのWebサイトを構築しました。デザイン賞は獲得しませんが、基本的な概念を示しています。 Metalsmithビルドコードは、GitHubリポジトリからチェックおよびインストールできます。または、ここで指示に従って、独自の基本サイトを作成することもできます。

数回金属スミスを使用しました。これがすべての静的Webサイトを構築する究極の方法だとは思わないでください！

インストールメタルスミス

node.jsがインストールされていることを確認してください（たとえばNVMを使用して）、プロジェクトや初期化などの新しいプロジェクトディレクトリを作成します。

<code>cd project && cd project
npm init -y
</code>

ログイン後にコピー

Metalsmith-Browser-Sync - browseryncをワークフローに統合します
Metalsmith-Collections - グローバルメタデータにファイルのコレクションを追加
Metalsmith-Feed - コレクションのRSSフィードを生成
Metalsmith-HTML-Minifier - Kangax/HTML-MINIFIER
Metalsmith-in-Place - ソースファイルにテンプレートの構文をレンダリング
Metalsmith-Layouts - ソースファイルにレイアウトを適用します
Metalsmith-Mapsite - sitemap.xmlファイルを生成
Metalsmith-Markdown - Markdownファイルを変換
Metalsmith-Permalinks - ファイルにカスタムパーマリンクモードを適用します
Metalsmith-Publish - ドラフト、プライベート、将来の日付をサポートする投稿Metalsmith-Word-Count - HTMLファイルのすべての段落の単語数/平均読み取り時間を計算します

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

ログイン後にコピー

プロジェクトのソース（SRC）およびビルド（ビルド）ディレクトリとして、次の構造を使用します。

次のようにサンプルファイルを作成するか、デモSRCディレクトリから直接コピーできます。

ページ

ページマークダウンファイルはSRC/HTMLに含まれています。これには、各Webサイトセクションの第1レベルのサブディレクトリ、つまり

を含めることができます。

src/html/start - 特定の順序でプロジェクトを説明するページ

各ディレクトリにはindex.mdファイルが含まれています。これは、そのセクションのデフォルトページです。他のページは、一意の名前を使用できます。

ビルドプロセスは、これらのファイルを

などのディレクトリベースのパーマリンクに変換します

src/html/start/index.mdは/start/index.html

になります

になります
各マークダウンファイルは、「序文」と呼ばれるコンテンツとメタ情報を提供します

ほとんどの序文の質問はオプションですが、次のように設定できます。

優先度：0（低）から1（高）の間の数字。これを使用してメニューを並べ替えてXMLサイトマップを定義します。

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

ログイン後にコピー

パブリッシュ：必要になる前に公開されないことを確認するために、ドラフト、プライベート、または将来の日付として設定できます。

テンプレート
HTMLページテンプレートはSRC/テンプレートに含まれています。 2つのテンプレートが定義されています：

src/html/template/page.htmlデフォルトのレイアウト
src/html/template/article.md記事レイアウトは、リンクの前後に日付を表示するレイアウト

他のオプションはサポートされていますが、ハンドルバーテンプレートシステムが使用されます。典型的なテンプレートには、{{{contents}}}タグが必要です。ページコンテンツと{{title}}などの序文値を含む：

<code>cd project && cd project
npm init -y
</code>

ログイン後にコピー

{＆gt; {＆gt;

パート

セクション - またはHTMLスニペットファイルは、SRC/Partialsに含まれています。これらは主にテンプレートで使用されていますが、次のコードを使用してコンテンツページに含めることもできます。

ここで、partialNameはSRC/partialsディレクトリのファイルの名前です。

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

ログイン後にコピー

静的資産

静的資産（画像、CSS、JavaScriptファイルなど）は、SRC/資産に含まれています。すべてのファイルとサブディレクトリは、Webサイトのルートにそのままコピーされます。

カスタムプラグイン

サイトの構築に必要なカスタムプラグインは、LIBディレクトリに含まれています。

build directory

Webサイトはビルドディレクトリに組み込まれています。 2つの方法でWebサイトを構築します

開発モード：HTMLは圧縮されず、テストWebサーバーを起動します。

最初のビルドファイルを定義します

プロジェクトディレクトリのルートディレクトリでbuild.jsという基本的な例を作成できます：

node ./build.jsで実行し、静的Webサイトがビルドディレクトリに作成されます。マークダウンはHTMLとして解析されますが、ビルドプロセス中にテンプレートを含めなかったため利用できません。

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

ログイン後にコピー

Metalsmithプラグイン

表面上、金属製のビルドファイルは、Gulpで使用されているファイルと似ています（ただし、ストリームは使用しません）。適切な引数を使用して、プラグインをMetalsmith使用方法に渡して、プラグインを呼び出します。プラグイン自体は、3つのパラメーターを受け入れる別の関数を返す必要があります。

各ページに関する情報を含むファイルアレイ

メタデータや

などのグローバル情報を含むメタルスミスオブジェクトプラグインがその作業を完了した後に呼び出さなければならない完了関数

Metalsmithビルドコードを更新してこのプラグインを使用できます。

より良いビルドを作成します

<code>
 lang="en">
  >
    {{> meta }}
  >
  >

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1>></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

ログイン後にコピー

デモサイトビルドファイルの主要部分を以下に説明します。

node_env環境変数が生産に設定されている場合（mac/linuxまたはnode_env = windowsでの生産）、変数devbuildはtrueに設定されます：

<code>{{> partialname }}</code>

ログイン後にコピー

<code>cd project && cd project
npm init -y
</code>

ログイン後にコピー

ホームディレクトリはdirオブジェクトで定義されているため、再利用できます。

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

ログイン後にコピー

メタルスミスとプラグインモジュールをロードします。注：

HTMLMINが参照する

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

ログイン後にコピー

SiteMetaオブジェクトは、各ページに適用される情報を使用して定義されます。重要な値はドメインとルートパスであり、開発または生産の構築に基づいて設定されています：

また、

<code>
 lang="en">
  >
    {{> meta }}
  >
  >

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1>></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

ログイン後にコピー

TemplateConfigオブジェクトを定義して、テンプレートのデフォルト値を設定します。これは、Metalsmith-in-PlaceおよびMetalsmith-Layoutsプラグインによって使用されます。これにより、ハンドルバーを使用したページおよびテンプレートのレンダリングが可能になります。

Metalsmithオブジェクトは以前と同じように初期化されますが、SiteMetaオブジェクトをメタデータメソッドに渡して、この情報が各ページで利用可能であることを確認します。したがって、サイト名を取得するには、任意のページの{{name}}のようなアイテムを参照できます。

<code>{{> partialname }}</code>

ログイン後にコピー

最初のプラグインコールMetalsmith-Publishを呼び出します。これは、序文の公開値がドラフト、プライベート、または将来に設定されているファイルを削除します：

<code>// basic build

'use strict';

var
  metalsmith = require('metalsmith'),
  markdown   = require('metalsmith-markdown'),

  ms = metalsmith(__dirname) // the working directory
    .clean(true)            // clean the build directory
    .source('src/html/')    // the page source directory
    .destination('build/')  // the destination directory
    .use(markdown())        // convert markdown to HTML
    .build(function(err) {  // build the site
      if (err) throw err;   // and throw errors
    });
</code>

ログイン後にコピー

setDateは、lib/metalsmith-setdate.jsに含まれるカスタムプラグインです。各ファイルには「日付」値が設定されていることが保証され、前の質問で値が定義されていなくても、リリース日またはファイルの作成時間にできるだけ戻ることで達成できます。

<code>function debug(logToConsole) {
  return function(files, metalsmith, done) {
    if (logToConsole) {
      console.log('\nMETADATA:');
      console.log(metalsmith.metadata());

      for (var f in files) {
        console.log('\nFILE:');
        console.log(files[f]);
      }
    }

    done();
  };
};
</code>

ログイン後にコピー

Metalsmith-Collectionsは、ソースディレクトリ内の場所またはその他の要因に基づいて各ページをカテゴリまたは分類に割り当てるため、最も重要なプラグインの1つです。日付や優先順位などの前メタルを使用してファイルを再注文し、コレクションにカスタムメタデータを設定できます。コード定義：

<code>ms = metalsmith(__dirname) // the working directory
  .clean(true)             // clean the build directory
  .source('src/html/')     // the page source directory
  .destination('build/')   // the destination directory
  .use(markdown())         // convert Markdown to HTML
  .use(debug(true))        // *** NEW *** output debug information
  .build(function(err) {   // build the site
    if (err) throw err;    // and throw errors
  });
</code>

ログイン後にコピー

SRC/HTML/STARTディレクトリの各ファイルの開始コレクション。ファイルの前の質問で設定された優先度の値によってそれらを並べ替えます。

<code>devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production')
</code>

ログイン後にコピー

Metalsmith-Word-Countは、記事の単語の数を計算し、それを読むのにかかる時間を計算します。 parameter {raw：true}出力番号のみ：

<code>dir = {
  base:   __dirname + '/',
  lib:    __dirname + '/lib/',
  source: './src/',
  dest:   './build/'
}
</code>

ログイン後にコピー

Moremetaは、lib/metalsmith-moremeta.jsに含まれるもう1つのカスタムプラグインです。各ファイルに他のメタデータを添付します：

root：ルートディレクトリへの絶対または計算された相対ファイルパス
ispage：indexという名前のデフォルトの部分ページにtrueに設定します。*

Metalsmith-in-PlaceおよびMetalsmith-Layoutsプラグインは、それぞれインページとテンプレートのレイアウトを制御します。上記と同じTemplateConfigオブジェクトを渡します：

<code>cd project && cd project
npm init -y
</code>

ログイン後にコピー

htmlminが設定されている場合（生産ビルドで）、HTMLを圧縮できます：

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

ログイン後にコピー

debugは、lib/metalsmith-debug.jsに含まれる最終的なカスタムプラグインです。上記のデバッグ関数に似ています：

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

ログイン後にコピー

開発ビルドをテストできるように、browsersyncテストサーバーを起動します。以前に使用したことがない場合は、魔法のように見えます。変更を加えるたびに、ウェブサイトが魔法のようにリフレッシュし、Webサイトをスクロールまたは閲覧すると、2つ以上のブラウザのビューが同期します。

<code>
 lang="en">
  >
    {{> meta }}
  >
  >

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1>></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

ログイン後にコピー

最後に、

を使用できます

<code>{{> partialname }}</code>

ログイン後にコピー

Metalsmith-MapsiteはXML SiteMapを生成します

<code>// basic build

'use strict';

var
  metalsmith = require('metalsmith'),
  markdown   = require('metalsmith-markdown'),

  ms = metalsmith(__dirname) // the working directory
    .clean(true)            // clean the build directory
    .source('src/html/')    // the page source directory
    .destination('build/')  // the destination directory
    .use(markdown())        // convert markdown to HTML
    .build(function(err) {  // build the site
      if (err) throw err;   // and throw errors
    });
</code>

ログイン後にコピー

完了したら、node ./build.jsを再度実行して静的Webサイトを構築できます。

<code>function debug(logToConsole) {
  return function(files, metalsmith, done) {
    if (logToConsole) {
      console.log('\nMETADATA:');
      console.log(metalsmith.metadata());

      for (var f in files) {
        console.log('\nFILE:');
        console.log(files[f]);
      }
    }

    done();
  };
};
</code>

ログイン後にコピー

に注意を払うもの

シンプルなメタルスミスのウェブサイトを構築するときに多くのことを学びましたが、次の問題に注意してください。

互換性のないプラグイン

プラグインは、他のプラグインと競合する場合があります。たとえば、相対ルートパスのメタルスミスルートパスを計算することは、カスタムビルドディレクトリ構造を作成するMetalsmith-Permalinksとあまり互換性がありません。 Lib/Metalsmith-Moremeta.jsプラグインにカスタムルートパス計算コードを作成することで、この問題を解決しました。

プラグインの順序は重要です

プラグインが間違った順序で配置されている場合、プラグインは依存または競合する場合があります。たとえば、RSSを生成するMetalsmith-FeedプラグインをMetalsmith-Layouts後に呼び出して、RSS XMLがページテンプレートで生成されないことを確認する必要があります。

BROWSERSYNC REBUILD ISSUE

browsersyncがファイルを実行および編集すると、コレクションは補償されますが、古いデータはまだ存在しているようです。これは、lib/metalsmith-moremeta.jsカスタムプラグインの問題かもしれませんが、メニューとフロントおよびバックリンクは同期していない場合があります。それを修正するには、Ctrl/CMD Cを使用してビルドを停止し、ビルドを再起動します。

まだガルプが必要ですか？

Gulpなどのタスクマネージャーを使用する人々は、Metalsmithがおなじみのビルドプロセスを提供していることに気付くでしょう。 SASSを使用して、CSSの前処理、画像圧縮、ファイル接続、中傷などのプラグインがあります。より単純なプロセスでは、それだけで十分かもしれません。

ただし、Gulpにはより広い範囲のプラグインがあり、Lint、展開、Auto-Prefixerを使用したPostCSS処理などの複雑なビルドアクティビティを可能にします。いくつかのGulp/Metalsmith Integrationプラグインがありますが、いくつかの問題があり、Gulpタスクはメタルスミスを直接実行できるため、必要ではありません

このプロセスは、上記のBrowserSyncの再構築問題を防ぎます。 .clean（false）を使用して、他のタスクがアクティブなときにメタルスミスがビルドフォルダーをクリアしないようにすることを忘れないでください。

<code>cd project && cd project
npm init -y
</code>

ログイン後にコピー

メタルスミスはあなたに適していますか？

メタルスミスは、シンプルまたは高度にカスタマイズされたWebサイトのニーズがある場合に理想的です。ドキュメントプロジェクトを使用して、一度に1つの機能を追加してみてください。メタルスミスはJekyllのような代替品ほど完全に機能していませんが、そのように設計されていません。独自のプラグインを作成する必要があるかもしれませんが、簡単に行うことはできます。これは、JavaScript開発者にとって大きな利点です。

メタルスミスビルドシステムの作成には時間がかかり、HTMLテンプレートと展開に関与する作業の量を考慮していません。ただし、プロセスを利用できると、マークダウンファイルの追加、編集、削除が非常に簡単になります。 CMSを使用するよりも簡単な場合があり、静的Webサイトのすべての利点があります。

金属スミスを使用して静的Webサイトを作成することに関するFAQ メタルスミスとは何ですか？なぜそれを使用して静的なWebサイトを作成する必要があるのですか？

Metalsmithは、シンプルで使いやすいプラグ可能な静的Webサイトジェネレーターです。 Node.jsに基づいており、プラグインを介して必要に応じて機能を追加できるモジュラー構造を使用します。これにより、信じられないほどの柔軟性とカスタマイズ可能性が得られます。 Metalsmithを使用して静的Webサイトを作成する必要があります。これにより、従来のCMSに制限されずにWebサイトを正確に構築できるようにする必要があります。さらに、静的なWebサイトは、動的なWebサイトよりも速く、より安全で、メンテナンスが容易です。

メタルスミスをインストールする方法は？

Metalsmithをインストールするには、コンピューターにnode.jsとnpmをインストールする必要があります。これらをインストールした後、ターミナルにCommand NPMインストールMetalsmithを実行してMetalsmithをインストールできます。これにより、Metalsmithとそのすべての依存関係がインストールされます。

新しいMetalsmithプロジェクトを作成する方法は？

新しいMetalsmithプロジェクトを作成するには、最初に端末でプロジェクトを作成するディレクトリに移動します。次に、コマンドメタルスミスを実行して新しいプロジェクトを作成します。これにより、プロジェクトの名前を含む新しいディレクトリが作成され、このディレクトリ内で静的Webサイトの基本構造が作成されます。

メタルスミスプロジェクトにプラグインを追加する方法は？

メタルスミスプロジェクトにプラグインを追加するには、NPM経由でそれらをインストールしてから、メタルスミス構成ファイルに参照する必要があります。たとえば、Markdownプラグインを追加するには、最初にNPMのインストールMetalsmith-Markdownを実行する必要があります。次に構成ファイルで、var Markdown = require（ 'Metalsmith-Markdown'）を追加する必要があります。））メタルスミスビルドチェーンに移動します。

メタルスミスのウェブサイトを構築する方法は？

Metalsmith Webサイトを構築するには、ターミナルでCommand Metalsmithビルドを実行する必要があります。これにより、すべてのファイルがコンパイルされ、それらをビルドディレクトリに出力し、サーバーに展開できます。

メタルスミスのウェブサイトのレイアウトをカスタマイズする方法は？

Metalsmith Webサイトのレイアウトをカスタマイズするには、ハンドルバーやJadeなどのテンプレートエンジンを使用できます。これらを使用すると、ヘッダー、フッター、個々のページなど、Webサイトのさまざまな部分に対して再利用可能なテンプレートを作成できます。

私のMetalsmith Webサイトにコンテンツを追加する方法は？

Metalsmith Webサイトにコンテンツを追加するには、ソースディレクトリにMarkdownファイルを作成できます。ウェブサイトを構築するとき、これらのファイルはHTMLに変換されます。 Netlify CMSなどのCMSを使用してコンテンツを管理することもできます。

メタルスミスのウェブサイトを展開する方法は？

Metalsmith Webサイトを展開するには、NetlifyページやGitHubページなどのサービスを使用できます。これらのサービスは、静的Webサイトをホストし、リポジトリにプッシュするときに変更を自動的に展開します。

メタルスミスのウェブサイトを更新するにはどうすればよいですか？

Metalsmith Webサイトを更新するには、ソースファイルを変更してWebサイトを再構築するだけです。変更はビルドディレクトリに反映され、サーバーに展開できます。

大規模で複雑なWebサイトにMetalsmithを使用できますか？

はい、Metalsmithは非常にスケーラブルで、大規模で複雑なWebサイトに使用できます。そのモジュラー構造により、必要に応じて機能を追加できます。また、静的ファイルを使用すると、減速せずに多くのコンテンツを処理できます。

以上がメタルスミスを使用して静的サイトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。