Im vorherigen Artikel wurde die Gründe für die Verwendung eines statischen Website -Generators er?rtert. Kurz gesagt, statische Website -Generatoren erstellen Seitendateien, die nur HTML aus Vorlagen und Rohdaten enthalten (normalerweise in Markdown -Dateien enthalten). Es bietet einige CMS -Vorteile ohne Hosting, Leistung und Sicherheit.

statische Websites k?nnen für eine Vielzahl von Projekten geeignet sein, darunter:

• Kleine Website oder pers?nliches Blog. Eine Website mit Dutzenden von Seiten, seltenen Posts und einem oder zwei Autoren ist m?glicherweise ideal.
• technische Dokumentation wie Rest -API.
• Anwendungsprototypen, die eine Reihe von Webansichten erfordern.
• E-Books-Markdown-Dateien k?nnen in PDF oder andere Formate und HTML konvertiert werden.

im Wesentlichen ist ein statischer Website -Generator ein Geb?udetool. Sie k?nnen es verwenden, um Aufgaben auszuführen oder Gerüste wie Sie mit Grunzen oder Schluck zu projizieren.

Schlüsselpunkte

• Metalsmith ist ein flexibler statischer Website -Generator, der ideal zum Erstellen leichter Websites ohne den Overhead von herk?mmlichem CMS ist.
• Die Installation und das Einrichten von Metalsmith ben?tigen Node.js, bei dem ein neues Projektverzeichnis initialisiert und die erforderlichen Plugins über NPM installiert werden.
• Die Projektstruktur in Metalsmith beinhaltet die Organisation von Quelldateien, Vorlagen und Verm?genswerten und unterscheidet deutlich zwischen Entwicklungs- und Produktionskonstruktion.
• Metalsmith verwendet verschiedene Plug-Ins, um die Funktionalit?t zu erweitern, z. B. die Verarbeitung von Markdown-Dateien, das Erstellen von RSS-Feeds und das Generieren von Sitemaps, die alle in Build-Dateien konfiguriert sind.
• benutzerdefinierte Plugins k?nnen erstellt werden, um bestimmte Aufgaben zu erledigen, z. B. das Einrichten von Metadaten oder das Hinzufügen von Debug -Informationen, die Verbesserung der Vielseitigkeit von Metalsmith bei der Verwaltung von Website -Inhalten und -struktur.
• Der Build -Prozess von Metalsmith kann in Aufgabenl?ufer wie Gulp integriert werden, um mit komplexeren Szenarien umzugehen, obwohl Metalsmith selbst für einfachere Prozesse ausreicht.

Warum Metalsmith w?hlen?

Der unbestrittene statische Website -Champion ist Jekyll - ein 2008 ins Leben gerufenes Ruby -Projekt. Sie brauchen nicht unbedingt Ruby -Expertise, um Jekyll zu verwenden, aber das hilft. Glücklicherweise haben die meisten beliebten Sprachen eine Vielzahl von statischen Open -Source -Website -Generatoren. Zu den JavaScript -Optionen geh?ren Hexo, Harfe und Montage. Für einfachere Projekte k?nnen Sie auch Build -Tools wie Gulp verwenden.

Ich habe Metalsmith für dieses Tutorial ausgew?hlt, weil es:

1. nicht auf bestimmte Arten von Projekten (z. B. Blogs) abzielt
2. Unterstützen Sie verschiedene Vorlagen- und Datenformatoptionen
3. Leichtes
4. Selten Abh?ngigkeiten
5. Verwenden der modularen Struktur
6. bietet eine einfache Plug-in-Architektur sowie
7. Einfach loslegen.

Dieses Tutorial hat eine Demo -Website erstellt. Es wird keine Designpreise gewinnen, aber es zeigt das Grundkonzept. Metalsmith -Build -Code kann über das GitHub -Repository überprüft und installiert werden. Alternativ k?nnen Sie die Anweisungen hier befolgen und Ihre eigene grundlegende Website erstellen.

Ich habe ein paar Mal Metalsmith verwendet, um dies nicht zu tun, um jede statische Website zu erstellen!

metalsmith

Stellen Sie sicher, dass Sie Node.js installiert haben (z. B. mit NVM) und dann ein neues Projektverzeichnis wie das Projekt erstellen und Ihre Paket.json -Datei initialisieren:

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

Metalsmith jetzt und die verschiedenen Plugins installieren, mit denen wir die Site erstellen werden. Dies sind:

• Metalsmith-Assets-Fügen Sie statische Verm?genswerte in Ihr Metalsmith Build
auf
• Metalsmith-Browser-Sync-Integrieren Sie Browsersync in Ihren Workflow
• Metalsmith-Sammlungen-Fügen Sie eine Sammlung von Dateien zu globalen Metadaten
hinzu
• Metalsmith-Feed-Generieren Sie RSS-Feed für Sammlungen
• Metalsmith-html-Minifier-Kompress HTML-Dateien mit Kangax/HTML-Minifier
• Metalsmith-an-Place-Renders-Vorlagensyntax in der Quelldatei
rendern
• Metalsmith-Layouts-Layout auf Ihre Quelldatei
anwenden
• Metalsmith-Mapsit-generieren Sie Sitemap.xml-Datei
• Metalsmith-Markdown-Konvertieren Sie Markdown-Dateien
• Metalsmith-Permalinks-Benutzerdefinierte Permalink-Modus in Dateien
anwenden
• Metalsmith-Publish-Beitr?ge, die Entwurf, private und zukünftige Daten unterstützen
• Metalsmith-Wort-Count-Berechnen Sie die Wortzahl/die durchschnittliche Lesezeit für alle Abs?tze in einer HTML-Datei

<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>

Projektstruktur

Wir werden die folgende Struktur als Quelle (SRC) und Build (Build) in unserem Projekt verwenden.

Sie k?nnen wie folgt Beispieldateien erstellen oder sie direkt aus dem Demo SRC -Verzeichnis kopieren.

Seite

Seiten -Markdown -Datei ist in SRC/HTML enthalten. Dies kann ein Unterverzeichnis der ersten Stufe für jeden Website-Abschnitt enthalten, d. H.

• src/html/start - Seiten, die das Projekt in einer bestimmten Reihenfolge beschreiben
• src/html/artike-Verschiedene Artikel, die in anti-chronologischer Reihenfolge
angeordnet sind
• src/html/contact - Einzelkontaktseite

Jedes Verzeichnis enth?lt eine index.md -Datei, die die Standardseite für diesen Abschnitt ist. Andere Seiten k?nnen jeden einzigartigen Namen verwenden.

Der Erstellungsprozess wandelt diese Dateien in verzeichnisbasierte Permalinks um, z. B.

• src/html/start/index.md wird/start/index.html
• src/html/start/installation.md wird /start/installation/index.html

Jede Markdown -Datei enth?lt Inhalte und Meta -Informationen, die als "Vorwort" bezeichnet werden, oben zwischen den Markierungen, z

<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>

Die meisten Vorwortfragen sind optional, aber Sie k?nnen feststellen:

Priorit?t: Eine Zahl zwischen 0 (niedrig) und 1 (hoch), mit der wir Menüs sortieren und XML -Sitemaps definieren werden.
ver?ffentlichen: Kann als Entwurf, privates oder zukünftiges Datum festgelegt werden, um sicherzustellen, dass es nicht ver?ffentlicht wird, bevor es ben?tigt wird.
Datum: Das Datum des Artikels. Wenn nicht festgelegt, verwenden wir zukünftige Ver?ffentlichungsdaten oder Dateierstellungstermine.
Layout: Die zu verwendende HTML -Vorlage.

Vorlage

HTML -Seitenvorlage ist in SRC/Vorlage enthalten. Es wurden zwei Vorlagen definiert:

• src/html/template/page.html Standardlayout
• src/html/template/article.md artike layout, das Datum vor und nach Links usw. zeigt usw.

Obwohl andere Optionen unterstützt werden, wird das Lenker -Vorlagensystem verwendet. Eine typische Vorlage erfordert ein {{{Inhalt}}} Tag, um den Seiteninhalt und alle Vorwortwerte wie {{{title}}:

zu enthalten

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

Die Verweise auf {{& gt;

Teil

Der Abschnitt

oder die HTML -Snippet -Datei ist in SRC/Partials enthalten. Diese werden haupts?chlich in Vorlagen verwendet, k?nnen aber auch mit dem folgenden Code in die Inhaltsseite aufgenommen werden:

<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>

wobei Teilname der Name der Datei im Verzeichnis SRC/Partials ist.

statische Verm?genswerte

statische Assets (wie Bilder, CSS und JavaScript -Dateien) sind in SRC/Assets enthalten. Alle Dateien und Unterverzeichnisse werden ebenso wie in die Stamme der Website kopiert.

benutzerdefiniertes Plugin

Die für die Erstellung der Site erforderlichen benutzerdefinierten Plugins sind im LIB -Verzeichnis enthalten.

bauen Verzeichnis

Die Website wird im Build -Verzeichnis integriert. Wir werden die Website auf zwei Arten erstellen:

Entwicklungsmodus: HTML wird nicht komprimiert und startet den Test -Webserver.
Produktionsmodus: Wenn NODE_ENV auf die Produktion gesetzt ist, wird das Build -Verzeichnis gel?scht und die endgültige komprimierte Datei wird generiert.

Definieren Sie Ihre erste Build -Datei

Sie k?nnen ein grundlegendes Beispiel namens Build.js im Stammverzeichnis des Projektverzeichnisses erstellen:

<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>

Führen Sie es mit Knoten ./build.js aus und eine statische Website wird im Build -Verzeichnis erstellt. Markdown wird als HTML analysiert, ist jedoch nicht verfügbar, da wir die Vorlage w?hrend des Build -Prozesses nicht aufgenommen haben.

Metalsmith Plugin

Auf der Oberfl?che sieht die Metalsmith -Build -Datei ?hnlich aus wie in Gulp (obwohl sie keine Streams verwendet). Rufen Sie das Plugin auf, indem Sie es an die Metalsmith -Verwendung verwenden, indem Sie geeignete Argumente verwenden. Das Plugin selbst muss eine andere Funktion zurückgeben, die drei Parameter akzeptiert:

Ein Dateien -Array mit Informationen zu jeder Seite
• enth?lt
• Ein Metalsmith -Objekt, das globale Informationen wie Metadaten und
enth?lt
• Eine erledigte Funktion, die aufgerufen werden muss, nachdem das Plugin seine Arbeit abgeschlossen hat

Dieses einfache Beispiel protokolliert alle Metadaten- und Seiteninformationen in die Konsole (es kann in Build.js definiert werden):

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

Metalsmith -Build -Code kann aktualisiert werden, um dieses Plugin zu verwenden:

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

Diese Debugging -Funktion kann Ihnen helfen, Ihre eigenen benutzerdefinierten Plugins zu erstellen. Die meisten Funktionen, die Sie m?glicherweise ben?tigen, sind bereits geschrieben - es gibt eine lange Liste von Plugins auf der Metalsmith -Website.

machen einen besseren Build

Die Hauptteile der Demo -Site -Build -Datei werden unten erl?utert.

Wenn die Umgebungsvariable node_env auf die Produktion gesetzt ist (Export node_env = Produktion auf Mac/Linux oder node_env = Produktion unter Windows), wird das variable DevBuild auf true eingestellt:

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

Home -Verzeichnis ist im Dir -Objekt definiert, damit wir sie wiederverwenden k?nnen:

<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>

Metalsmith und Plug-in-Module laden. Hinweis:

• Ausgezeichneter BrowserSync -Testserver ist nur erforderlich, wenn ein Entwicklungsbau
erstellt wird
• HTML -Kompressormodul, auf das HTMLMIN verwiesen wird
Drei benutzerdefinierte Plugins wurden definiert: Setdate, Moremeta und Debug (im Folgenden detaillierter erkl?rt)

<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 -Objekt wird unter Verwendung von Informationen definiert, die auf jede Seite angewendet werden. Wichtige Werte sind Dom?ne und RootPath, die basierend auf Entwicklungs- oder Produktionsbauten festgelegt werden:

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

definiert auch ein TemplateConfig -Objekt, um die Standardwerte der Vorlagen festzustellen. Dies wird von den Metalsmith-in-Place- und Metalsmith-Layouts-Plugins verwendet, die das Rendern von In-Page- und Vorlagen mithilfe von Lenker erm?glichen:

Das

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

Metalsmith -Objekt wird jetzt wie zuvor initialisiert, aber wir übergeben das Sitemeta -Objekt auch an die Metadatenmethode, um sicherzustellen, dass diese Informationen für jede Seite verfügbar sind. So k?nnen wir uns auf Elemente wie {{Name}} auf einer beliebigen Seite beziehen, um den Site -Namen zu erhalten.

<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>

Unser erster Plugin-Anruf Metalsmith-Publish, der jede Datei entfernt, deren Vorwort ver?ffentlichen, auf Entwurf, private oder zukünftige Datum festgelegt wird:

<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>

setDate ist ein benutzerdefiniertes Plugin, das in lib/metalsmith-setdate.js enthalten ist. Es stellt sicher, dass jede Datei einen "Datum" -Wertesatz hat, und selbst wenn in der vorherigen Frage kein Wert definiert wird, kann sie erreicht werden

Metalsmith-Sammeln ist eines der wichtigsten Plugins, da sie eine Kategorie oder Taxonomie auf der Grundlage ihres Standorts oder anderen Faktoren im Quellverzeichnis zuweist. Es kann Dateien mithilfe von Vormitteln wie Daten oder Priorit?ten neu ordnen und erm?glicht Ihnen, benutzerdefinierte Metadaten für die Sammlung festzulegen. Code -Definition:

<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>

Die Startsammlung jeder Datei im Verzeichnis SRC/HTML/START. Es sortiert sie nach Priorit?tswerten, die in der vorherigen Frage in der Datei festgelegt sind.

• Die Artikelsammlung jeder Datei im Verzeichnis SRC/HTML/Artikel. Es sortiert sie in anti-chronologischer Reihenfolge
• Die Seitensammlung jeder Standardseite mit dem Namen Index.*. Es sortiert sie nach Priorit?tswerten, die in der vorherigen Frage in der Datei festgelegt sind.

Der n?chste ist der Markdown-to-HTML-Umbau, gefolgt vom Metalsmith-Permalinks-Plugin, das die Verzeichnisstruktur für den Build definiert. Bitte beachten Sie, dass Moremeta Sets: MainCollection für jede folgende Datei:

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

Metalsmith-Wort-Count berechnet die Anzahl der W?rter in einem Artikel und berechnet, wie lange es dauert, um sie zu lesen. Parameter {RAW: TRUE} Ausgabe nur Zahlen:

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

Moremeta ist ein weiteres benutzerdefiniertes Plugin, das in lib/metalsmith-moremeta.js enthalten ist. Es fügt jeder Datei andere Metadaten an:

<code>metalsmith  = require('metalsmith'),
markdown    = require('metalsmith-markdown'),
publish     = require('metalsmith-publish'),
wordcount   = require("metalsmith-word-count"),
collections = require('metalsmith-collections'),
permalinks  = require('metalsmith-permalinks'),
inplace     = require('metalsmith-in-place'),
layouts     = require('metalsmith-layouts'),
sitemap     = require('metalsmith-mapsite'),
rssfeed     = require('metalsmith-feed'),
assets      = require('metalsmith-assets'),
htmlmin     = devBuild ? null : require('metalsmith-html-minifier'),
browsersync = devBuild ? require('metalsmith-browser-sync') : null,

// custom plugins
setdate     = require(dir.lib + 'metalsmith-setdate'),
moremeta    = require(dir.lib + 'metalsmith-moremeta'),
debug       = consoleLog ? require(dir.lib + 'metalsmith-debug') : null,
</code>

• root: Der absolute oder berechnete relative Dateipfad zum Stammverzeichnis
ispage: Setzen Sie für die Standard -Teilseite mit dem Namen Index auf true.*
• MainCollection: Der Hauptname der Hauptsammlung, d. H. Start oder Artikel
• Layout: Wenn nicht festgelegt, kann die Layout -Vorlage aus den Metadaten der Hauptsammlung
ermittelt werden
• Navmain: Array von Navigationsobjekten auf oberster Ebene
• Navigsub: Array der sekund?ren Navigationsobjekte

Plugin -Code ist komplizierter, da er die Navigation behandelt. Wenn Sie eine einfachere Hierarchie ben?tigen, gibt es einfachere Optionen.

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

Die Plugins mit Metalsmith und Metalsmith-Layouts steuern das In-Page- und Vorlagenlayout. übergeben Sie das gleiche TemplateConfig -Objekt wie oben definiert:

<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>

Wenn Htmlmin eingestellt ist (im Produktionsbau), k?nnen wir HTML komprimieren:

<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>

Debugg ist das endgültige benutzerdefinierte Plugin, das in lib/metalsmith-debug.js enthalten ist. Es ?hnelt der oben beschriebenen Debug -Funktion:

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

Starten Sie den BrowserSync -Testserver, damit wir den Entwicklungsbau testen k?nnen. Wenn Sie es noch nicht benutzt haben, sieht es wie Magie aus: Jedes Mal, wenn Sie eine ?nderung vornehmen, wird Ihre Website auf magische Weise aktualisiert, und wenn Sie auf der Website scrollen oder durchsuchen, werden die Ansichten in zwei oder mehr Browsern synchronisieren:

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

Schlie?lich k?nnen wir:

verwenden
Metalsmith-Mapsit erzeugen XML Sitemap
Metalsmith-Feed generieren einen RSS-Feed für Seiten in der Artikelsammlung
Metalsmith-Assets kopieren Dateien und Verzeichnisse in SRC/Assets, um sie ohne ?nderung zu erstellen.

<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>

Der Rest ist der letzte Schritt. Build (), um die Website zu erstellen:

<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>

Wenn Sie fertig sind, k?nnen Sie Node ./build.js erneut ausführen, um Ihre statische Website zu erstellen.

, was zu achten ist

Ich habe beim Erstellen einer einfachen Metalsmith -Website viel gelernt, aber sind Sie uns der folgenden Probleme bewusst:

inkompatible Plug-Ins

Plugins k?nnen mit anderen Plugins in Konflikt stehen. Beispielsweise ist die Berechnung des Metalsmith-Wurzelwegs des relativen Wurzelpfads nicht sehr kompatibel mit Metalsmith-Permalinks, die benutzerdefinierte Build-Verzeichnisstrukturen erstellen. Ich habe dieses Problem gel?st, indem ich den benutzerdefinierten Root-Pfad-Berechnungscode im lib/metalsmith-moremeta.js-Plugin geschrieben habe.

Plugin -Bestellung ist entscheidend

Wenn die Plugins in die falsche Reihenfolge platziert werden, k?nnen die Plugins von oder Konflikten abh?ngen. Zum Beispiel muss das Metalsmith-Feed-Plugin, das RSS erzeugt, nach Metalsmith-Layouts aufgerufen werden, um sicherzustellen, dass RSS XML in der Seitenvorlage nicht generiert wird.

browsersync resove issue

Wenn BrowserSync die Datei ausführt und bearbeitet, wird die Sammlung neu gestaltet, aber die alten Daten scheinen immer noch zu existieren. Dies kann ein Problem mit dem benutzerdefinierten Plugin von lib/metalsmith-moremeta.js sein, aber das Menü sowie die Vorder- und Rücklinks k?nnen nicht synchronisiert sein. Um es zu beheben, stoppen Sie den Build und starten Sie den Build mithilfe von Strg/CMD C neu.

Ben?tigen Sie noch Schlupf?

Personen, die Taskmanager wie Gulp verwenden, werden feststellen, dass Metalsmith einen vertrauten Build -Prozess bietet. Es gibt Plug-Ins für CSS-Vorverarbeitung, Bildkomprimierung, Dateiverbindung, Verleumdung und mehr mit SASS. Für einen einfacheren Prozess k?nnte es ausreichen.

Gulp verfügt jedoch über eine breitere Auswahl an Plugins und erm?glicht komplexe Build-Aktivit?ten wie FINT-, Bereitstellungs- und PostCSS-Verarbeitung mithilfe von Auto-Prefixer. Es gibt einige Gulp/Metalsmith -Integrations -Plugins, obwohl ich einige Probleme habe und nicht erforderlich sein sollte, da Gulp -Aufgaben Metalsmith direkt ausführen k?nnen, z

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

Dieser Prozess verhindert das oben erw?hnte Browsersync -Wiederaufbauproblem. Denken Sie daran, .Clean (False) zu verwenden, um sicherzustellen, dass Metalsmith den Build -Ordner niemals l?scht, wenn andere Aufgaben aktiv sind.

Ist Metalsmith für Sie geeignet?

Metalsmith ist ideal, wenn Sie einfache oder gut angepasste Website -Anforderungen haben. Versuchen Sie vielleicht ein Dokumentprojekt und fügen Sie jeweils jeweils eine Funktion hinzu. Metalsmith ist nicht so voll funktionsf?hig wie Alternativen wie Jekyll, aber es ist nicht so konzipiert, dass es so ist. M?glicherweise müssen Sie Ihr eigenes Plugin schreiben, aber dies ist einfach, was für JavaScript -Entwickler ein gro?er Vorteil ist.

Das Erstellen eines Metalsmith -Build -Systems braucht Zeit, und wir haben nicht die Arbeit in HTML -Vorlagen und Bereitstellungen berücksichtigt. Sobald Sie jedoch einen Prozess zur Verfügung haben, wird das Hinzufügen, Bearbeiten und L?schen von Markdown -Dateien jedoch sehr einfach. Es kann einfacher sein als die Verwendung von CMS, und Sie haben alle Vorteile einer statischen Website.

FAQs über das Erstellen statischer Websites mit Metalsmith

Was ist Metalsmith und warum sollte ich es verwenden, um statische Websites zu erstellen?

Metalsmith ist ein einfacher und benutzerfreundlicher statischer Website-Generator. Es basiert auf node.js und verwendet eine modulare Struktur, mit der Sie die Funktionalit?t bei Bedarf durch Plugins hinzufügen k?nnen. Dies macht es unglaubliche Flexibilit?t und Anpassbarkeit. Sie sollten Metalsmith verwenden, um eine statische Website zu erstellen, da Sie Ihre Website genau so erstellen k?nnen, wie Sie es wünschen, ohne von herk?mmlichem CMS eingeschr?nkt zu werden. Darüber hinaus sind statische Websites schneller, sicherer und leichter zu warten als dynamische Websites.

Wie installiere ich Metalsmith?

Um Metalsmith zu installieren, müssen Sie Node.js und NPM auf Ihrem Computer installieren. Nach der Installation k?nnen Sie Metalsmith installieren, indem Sie den Befehl NPM -Installation von Metalsmith im Terminal ausführen. Dadurch werden Metalsmith und alle seine Abh?ngigkeiten installiert.

Wie erstelle ich ein neues Metalsmith -Projekt?

Um ein neues Metalsmith -Projekt zu erstellen, navigieren Sie zun?chst im Terminal zum Verzeichnis, in dem Sie das Projekt erstellen m?chten. Führen Sie dann den Befehl Metalsmith aus, um ein neues Projekt zu erstellen. Dadurch wird ein neues Verzeichnis mit dem Namen Ihres Projekts erstellt und in diesem Verzeichnis eine Grundstruktur für Ihre statische Website erstellt.

Wie füge ich meinem Metalsmith -Projekt Plugins hinzu?

Um Ihrem Metalsmith -Projekt Plugins hinzuzufügen, müssen Sie sie über NPM installieren und dann in Ihrer Metalsmith -Konfigurationsdatei verweisen. Um das Markdown-Plugin hinzuzufügen, müssen Sie zun?chst die NPM-Installation von Metalsmith-Markdown ausführen. In Ihrer Konfigurationsdatei müssen Sie var markdown = Require ('Metalsmith-Markdown') hinzufügen. )) Gehen Sie zu Ihrer Metalsmith -Build -Kette.

Wie erstelle ich meine Metalsmith -Website?

Um Ihre Metalsmith -Website zu erstellen, müssen Sie den Befehlsmitglied im Terminal ausführen. Dadurch werden alle Dateien zusammengefasst und in das Build -Verzeichnis ausgegeben, das Sie dann auf Ihrem Server bereitstellen k?nnen.

Wie kann ich das Layout meiner Metalsmith -Website anpassen?

Um das Layout Ihrer Metalsmith -Website anzupassen, k?nnen Sie Vorlagenmotoren wie Lenker oder Jade verwenden. Mit diesen k?nnen Sie wiederverwendbare Vorlagen für verschiedene Teile Ihrer Website erstellen, z. B. Header, Fu?zeilen und einzelne Seiten.

Wie füge ich meiner Metalsmith -Website Inhalte hinzu?

Um Ihrer Metalsmith -Website Inhalte hinzuzufügen, k?nnen Sie im Quellverzeichnis eine Markdown -Datei erstellen. Beim Erstellen einer Website werden diese Dateien in HTML konvertiert. Sie k?nnen auch CMS wie Netlify CMS verwenden, um Ihre Inhalte zu verwalten.

Wie bereitet ich meine Metalsmith -Website bereit?

Um Ihre Metalsmith -Website bereitzustellen, k?nnen Sie Dienste wie Netlify- oder Github -Seiten verwenden. Diese Dienste hosten Ihre statische Website und stellen automatisch ?nderungen bereit, wenn Sie in das Repository drücken.

Wie aktualisiere ich meine Metalsmith -Website?

Um Ihre Metalsmith -Website zu aktualisieren, ?ndern Sie einfach die Quelldatei und Ihre Website neu. ?nderungen werden im Build -Verzeichnis widerspiegelt, die Sie dann auf Ihrem Server bereitstellen k?nnen.

Kann ich Metalsmith für gro?e und komplexe Websites verwenden?

Ja, Metalsmith ist sehr skalierbar und kann für gro?e und komplexe Websites verwendet werden. Mit der modularen Struktur k?nnen Sie bei Bedarf Funktionen hinzufügen, und die Verwendung statischer Dateien bedeutet, dass sie viele Inhalte ohne Verlangsamung verarbeiten kann.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine statische Seite mit Metalsmith. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!