Comment créer un site statique avec Metalsmith

L'article précédent a discuté des raisons de l'utilisation d'un générateur de sites Web statique. En bref, les générateurs de sites Web statiques construisent des fichiers de page qui ne contiennent que du HTML à partir de modèles et de données brutes (généralement incluses dans les fichiers de marque). Il offre certains avantages CMS sans les frais généraux de l'hébergement, des performances et de la sécurité.

Les sites Web statiques peuvent convenir à une variété de projets, notamment:

• petit site Web ou blog personnel. Un site Web avec des dizaines de pages, des messages peu fréquents et un ou deux auteurs pourraient être idéaux.
• Documentation technique, comme l'API REST.
• Prototypes d'application qui nécessitent une série de vues Web.
• E-Books - Les fichiers de marketing peuvent être convertis en PDF ou dans d'autres formats et HTML.

Essentiellement, un générateur de sites Web statique est un outil de construction. Vous pouvez l'utiliser pour exécuter des tâches ou projeter un échafaudage comme vous le feriez avec Grunt ou Gulp.

points clés

• Metalsmith est un générateur de sites Web statique en difficulté flexible qui est idéal pour créer des sites Web légers sans les frais généraux du CMS traditionnel.
• L'installation et la configuration de Metalsmith nécessitent Node.js, qui consiste à initialiser un nouveau répertoire de projet et à installer les plugins nécessaires via NPM.
• La structure du projet dans Metalsmith implique d'organiser des fichiers source, des modèles et des actifs, et distingue clairement le développement et la construction de la production.
• Metalsmith utilise divers plug-ins pour étendre les fonctionnalités, telles que le traitement des fichiers de démarche, la création de flux RSS et la génération de sitemaps, tous configurés dans des fichiers de construction.
• Les plugins personnalisés peuvent être créés pour gérer des tâches spécifiques, telles que la configuration des métadonnées ou l'ajout d'informations de débogage, l'amélioration de la polyvalence de Metalsmith dans la gestion du contenu et de la structure du site Web.
• Le processus de construction de Metalsmith peut être intégré à des coureurs de tâches tels que Gulp pour gérer des scénarios plus complexes, bien que Metalsmith lui-même soit suffisant pour des processus plus simples.

Pourquoi choisir Metalsmith?

Le champion du site Web statique incontesté est Jekyll - un projet Ruby lancé en 2008. Vous n'avez pas nécessairement besoin d'expertise Ruby pour utiliser Jekyll, mais cela vous aidera. Heureusement, les langues les plus populaires ont une grande variété de générateurs de sites Web statiques open source. Les options JavaScript incluent Hexo, Harp et Assemble. Pour des projets plus simples, vous pouvez également utiliser des outils de construction comme Gulp.

J'ai choisi Metalsmith pour ce tutoriel car il:

1. ne pas cibler des types spécifiques de projets (tels que les blogs)
2. Soutenez divers modèles et options de format de données
3. léger
4. Dépendances rarement
5. en utilisant la structure modulaire
6. fournit une architecture de plug-in simple, ainsi que
7. Facile à commencer.

Ce tutoriel a construit un site Web de démonstration. Il ne gagnera aucun prix de conception, mais il illustre le concept de base. Le code de construction MetalSmith peut être vérifié et installé à partir du référentiel GitHub. Alternativement, vous pouvez suivre les instructions ici et créer votre propre site de base.

J'ai utilisé Metalsmith à plusieurs reprises - ne pense pas que ce soit le moyen ultime de créer chaque site Web statique!

Installation Metalsmith

Assurez-vous que Node.js est installé (par exemple à l'aide de NVM), puis créez un nouveau répertoire de projet, tel que Project et Initialisez votre fichier package.json:

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

Installez Metalsmith maintenant et les différents plugins que nous utiliserons pour construire le site. Ce sont:

• Metalsmith-Assets - Inclure des actifs statiques dans votre construction Metalsmith
• Metalsmith-Browser-Sync - Intégrez BrowSersync dans votre flux de travail
• Metalsmith-Collections - Ajoutez une collection de fichiers aux métadonnées globales
• Metalsmith-Feed - Générez des aliments RSS pour les collections
• Metalsmith-html-minificier - Fichiers HTML de compression à l'aide de Kangax / Html-minitifier
• Metalsmith-in-place - Render le modèle de syntaxe dans le fichier source
• Metalsmith-Layouts - Appliquez la mise en page à votre fichier source
• Metalsmith Mapsite - Générer un fichier SiteMap.xml
• Metalsmith-Markdown - Convertir des fichiers de marquage
• Metalsmith-Permalinks - Appliquez le mode de permalien personnalisé aux fichiers
• Metalsmith-Publish - Posts qui soutiennent le projet, les dates privées et futures
• Metalsmith-Word-Count - Calculez le décompte des mots / temps de lecture moyen pour tous les paragraphes dans un fichier 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>

Structure du projet

Nous utiliserons la structure suivante comme répertoire Source (SRC) et build (build) dans notre projet.

Vous pouvez créer des exemples de fichiers comme suit, ou les copier directement à partir du répertoire SRC de démonstration.

page

Le fichier de marque de page est inclus dans SRC / HTML. Cela peut contenir un sous-répertoire de premier niveau pour chaque section de site Web, c'est-à-dire

• src / html / start - pages qui décrivent le projet dans un ordre spécifique
• SRC / HTML / Article - Divers articles organisés en ordre anti-chronologique
• src / html / contact - page de contact unique

Chaque répertoire contient un fichier index.md, qui est la page par défaut de cette section. D'autres pages peuvent utiliser n'importe quel nom unique.

Le processus de construction convertit ces fichiers en permaliens basés sur les répertoires, tels que

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

Chaque fichier de marque fournit du contenu et des méta-informations, appelée "préface" est située en haut - marques, par ex.

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

La plupart des questions de préface sont facultatives, mais vous pouvez définir:

Priorité: un nombre entre 0 (bas) et 1 (haut), que nous utiliserons pour trier les menus et définir des sitemaps XML.
Publier: peut être défini en tant que rédaction, privée ou future pour s'assurer qu'elle n'est pas publiée avant qu'elle ne soit nécessaire.
Date: la date de l'article. Si ce n'est pas défini, nous utiliserons des dates de libération futures ou des dates de création de fichiers.
Disposition: le modèle HTML à utiliser.

Modèle

Le modèle de page HTML est inclus dans le modèle SRC /. Deux modèles ont été définis:

• src / html / template / page.html Layout par défaut
• SRC / HTML / Template / Article.md Disposition d'article qui affiche la date, les liens avant et après, etc.

Bien que d'autres options soient prises en charge, le système de modèle de guidon est utilisé. Un modèle typique nécessite une balise {{{contenu}}} pour contenir le contenu de la page et toutes les valeurs de préface, telles que {{title}}:

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

Les références à {{& gt; Meta}, {{& gt;

partie

La section

- ou le fichier d'extrait HTML - est contenue dans SRC / partiels. Ceux-ci sont principalement utilisés dans les modèles, mais peuvent également être inclus dans la page de contenu en utilisant le code suivant:

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

où PartialName est le nom du fichier dans le répertoire SRC / partiels.

Assets statiques

Les actifs statiques (tels que les images, CSS et les fichiers JavaScript) sont inclus dans SRC / Assets. Tous les fichiers et sous-répertoires seront copiés tels quels sur la racine du site Web.

Plugin personnalisé

Les plugins personnalisés requis pour construire le site sont inclus dans le répertoire Lib.

Build Directory

Le site Web sera construit dans le répertoire de construction. Nous allons construire le site Web de deux manières:

Mode de développement: HTML ne sera pas compressé et démarrera le serveur Web de test.
Mode de production: si Node_env est défini sur la production, le répertoire de construction est effacé et le fichier compressé final est généré.

Définissez votre premier fichier de construction

Vous pouvez créer un exemple de base appelé build.js dans le répertoire racine du répertoire de projet:

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

Exécutez-le avec Node ./build.js et un site Web statique sera créé dans le répertoire de construction. Markdown sera analysé en tant que HTML, mais il n'est pas disponible car nous n'avons pas inclus le modèle pendant le processus de construction.

Plugin Metalsmith

En surface, le fichier de construction Metalsmith ressemble à celui utilisé dans Gulp (bien qu'il n'utilise pas de flux). Appelez le plugin en le transmettant à la méthode d'utilisation de Metalsmith à l'aide de tous les arguments appropriés. Le plugin lui-même doit renvoyer une autre fonction, qui accepte trois paramètres:

un tableau de fichiers contenant des informations sur chaque page
Un objet Metalsmith contenant des informations globales, telles que les métadonnées, et
Une fonction terminée qui doit être appelée une fois le plugin terminé ses travaux

Cet exemple simple enregistre toutes les métadonnées et les informations de la page à la console (elle peut être définie dans build.js):

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

Metalsmith Build Code peut être mis à jour pour utiliser ce plugin:

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

Cette fonction de débogage peut vous aider à créer vos propres plugins personnalisés, mais la plupart des fonctionnalités dont vous pourriez avoir besoin sont déjà écrites - il existe une longue liste de plugins sur le site Web Metalsmith.

faire une meilleure construction

Les principales parties du fichier de construction du site de démonstration sont expliquées ci-dessous.

Si la variable d'environnement Node_env est définie sur la production (exportation node_env = production sur mac / linux ou node_env = production sur Windows), la variable DevBuild sera définie sur true:

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

Le répertoire domestique est défini dans l'objet DIR afin que nous puissions les réutiliser:

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

Chargez des modules Metalsmith et Plug-In. Remarque:

• Excellent serveur de test BrowSersync n'est requis que lors de la création d'une version de développement
• Le module de compresseur HTML référencé par HTMLMIN n'est requis que lors de la création d'une version de production
• Trois plugins personnalisés ont été définis: SetDate, MoreMeta et Debug (expliqué plus en détail ci-dessous)

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

L'objet SiteMeta est défini à l'aide d'informations appliquées à chaque page. Les valeurs importantes sont le domaine et le Pathe Root, qui sont définis en fonction du développement ou de la construction de production:

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

définit également un objet TemplateConfig pour définir les valeurs par défaut du modèle. Ceci sera utilisé par les plugins Metalsmith-in-Place et Metalsmith-Layouts, qui permettent le rendu en page et au modèle à l'aide du guidon:

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

L'objet

Metalsmith est désormais initialisé comme auparavant, mais nous passons également l'objet Sitemeta à la méthode des métadonnées pour nous assurer que ces informations sont disponibles pour chaque page. Nous pouvons donc nous référer à des éléments comme {{nom}} dans n'importe quelle page pour obtenir le nom du site.

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

Notre premier plugin Appel Metalsmith-Publish, qui supprime tout fichier dont la valeur de publication de préface est définie sur la date, privée ou future:

<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 est un plugin personnalisé inclus dans lib / metalsmith-setdate.js. Il garantit que chaque fichier a un ensemble de valeur "Date", et même si aucune valeur n'est définie dans la question précédente, elle peut être réalisée en retombant autant que possible à la date de version ou à la création de fichiers:

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

Metalsmith-Collections est l'un des plugins les plus importants car il attribue chaque page à une catégorie ou à une taxonomie en fonction de son emplacement ou d'autres facteurs dans le répertoire source. Il peut réorganiser les fichiers à l'aide de préfaces telles que les dates ou les priorités et vous permet de définir des métadonnées personnalisées pour la collection. Définition du code:

• La collection de démarrage de chaque fichier dans le répertoire SRC / HTML / START. Il les trie par des valeurs prioritaires définies dans la question précédente dans le fichier.
• La collection d'articles de chaque fichier dans le répertoire SRC / HTML / Article. Il les trie dans l'ordre anti-chronologique
• La collection de pages de chaque page par défaut nommée index. *. Il les trie par des valeurs prioritaires définies dans la question précédente dans le fichier.

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

Le suivant est la conversion Markdown to HTML, suivi du plugin Metalsmith-Permalinks, qui définit la structure du répertoire pour la construction. Veuillez noter que MoreMeta définit: Maincollection pour chaque fichier ci-dessous:

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

Metalsmith-Word-Count calcule le nombre de mots dans un article et calcule combien de temps il faut pour le lire. Paramètre {brut: true} Sortie uniquement Nombres:

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

MoreMeta est un autre plugin personnalisé inclus dans Lib / Metalsmith-Moremeta.js. Il attache d'autres métadonnées à chaque fichier:

• Root: le chemin de fichier relatif absolu ou calculé vers le répertoire racine
• isPage: défini sur true pour la page partielle par défaut nommée index. *
MainCollection: le nom principal de la collection, c'est-à-dire démarrer ou article
Disposition: Si ce n'est pas réglé, le modèle de mise en page peut être déterminé à partir des métadonnées de la collection principale
navmain: tableau d'objets de navigation de niveau supérieur
NAVSUB: tableau d'objets de navigation secondaire

Le code du plugin est plus compliqué car il gère la navigation. Si vous avez besoin d'une hiérarchie plus simple, il existe des options plus simples.

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

Les plugins MetalSmith-in-place et Metalsmith-Layouts contrôlent respectivement la mise en page et la disposition du modèle. Passez le même objet TemplateConfig que défini ci-dessus:

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

Si htmlmin est défini (dans la construction de production), nous pouvons compresser 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>

Debug est le plugin personnalisé final inclus dans lib / metalsmith-debug.js. Il est similaire à la fonction de débogage décrite ci-dessus:

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

Démarrez le serveur de test BrowSersync afin que nous puissions tester la version de développement. Si vous ne l'avez pas utilisé auparavant, cela ressemble à de la magie: chaque fois que vous apportez un changement, votre site Web actualisera comme par magie, et lorsque vous faites défiler ou parcourez le site Web, les vues en deux ou plusieurs navigateurs se synchroniseront:

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

Enfin, nous pouvons utiliser:

Metalsmith MAPSISIT Génération du site XML
Metalsmith-Feed Générez un flux RSS pour les pages de la collection d'articles
Metalsmith-Assets Copie les fichiers et les répertoires en SRC / Assets à construire sans modification.

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

Le reste est la dernière étape .build () pour créer le site 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>

Lorsque vous avez terminé, vous pouvez exécuter à nouveau le nœud ./build.js pour créer votre site Web statique.

à quoi faire attention

J'ai beaucoup appris lors de la création d'un simple site Web Metalsmith, mais soyez conscient des problèmes suivants:

plug-ins incompatibles

Les plugins peuvent entrer en conflit avec d'autres plugins. Par exemple, le calcul du métalsmith-rootpathe du chemin racine relatif n'est pas très compatible avec Metalsmith-permalinks qui créent des structures de répertoire de construction personnalisées. J'ai résolu ce problème en écrivant un code de calcul de chemin racine personnalisé dans le plugin Lib / Metalsmith-Moremeta.js.

L'ordre du plugin est crucial

Si les plugins sont placés dans le mauvais ordre, les plugins peuvent dépendre ou se confronter. Par exemple, le plugin de feed Metalsmith qui génère RSS doit être appelé après Metalsmith-Layouts pour s'assurer que RSS XML n'est pas généré dans le modèle de page.

Browsersync Rebuild Issue

Lorsque BrowSersync s'exécute et modifie le fichier, la collection est reparsée, mais les anciennes données semblent toujours exister. Cela peut être un problème avec le plugin personnalisé Lib / Metalsmith-MoreMeta.js, mais le menu et les liens avant et arrière peuvent être désactivés. Pour le réparer, arrêtez la construction et redémarrez la construction en utilisant Ctrl / CMD C.

avez-vous encore besoin de Gulp?

Les personnes utilisant des gestionnaires de tâches telles que Gulp remarqueront que Metalsmith fournit un processus de construction familier. Il existe des plug-ins pour le prétraitement CSS, la compression d'image, la connexion de fichiers, la diffusion et plus encore avec SASS. Pour un processus plus simple, cela pourrait être suffisant.

Cependant, Gulp a une gamme plus large de plugins et permet des activités de construction complexes telles que le peluche, le déploiement et le traitement PostCSS à l'aide de préfixer automatique. Il y a des plugins d'intégration Gulp / Metalsmith, bien que j'ai des problèmes et qu'ils ne devraient pas être nécessaires car les tâches Gulp peuvent exécuter Metalsmith directement, par exemple

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

Ce processus empêche le problème de reconstruction de BrowSersync mentionné ci-dessus. N'oubliez pas d'utiliser .Clean (false) pour vous assurer que Metalsmith n'efface jamais le dossier de construction lorsque d'autres tâches sont actives.

Metalsmith vous convient-il?

Metalsmith est idéal si vous avez des besoins de site Web simples ou hautement personnalisés. Essayez peut-être d'utiliser un projet de document et ajoutez une fonctionnalité à la fois. Metalsmith n'est pas aussi entièrement fonctionnel que des alternatives comme Jekyll, mais elle n'est pas conçue pour en être ainsi. Vous devrez peut-être rédiger votre propre plugin, mais il est facile de le faire, ce qui est un énorme avantage pour les développeurs JavaScript.

La création d'un système de construction MetalSmith prend du temps, et nous n'avons pas considéré la quantité de travail impliquée dans les modèles HTML et le déploiement. Cependant, une fois que vous avez un processus disponible, l'ajout, l'édition et la suppression des fichiers de démarrage deviennent très simples. Cela peut être plus facile que d'utiliser CMS, et vous avez tous les avantages d'un site Web statique.

FAQ sur la création de sites Web statiques avec Metalsmith

Qu'est-ce que Metalsmith et pourquoi devrais-je l'utiliser pour créer des sites Web statiques?

Metalsmith est un générateur de site Web statique simple et facile à utiliser. Il est basé sur Node.js et utilise une structure modulaire qui vous permet d'ajouter des fonctionnalités au besoin via des plugins. Cela le rend incroyable de flexibilité et de personnalisation. Vous devez utiliser Metalsmith pour créer un site Web statique car il vous permet de créer votre site Web exactement comme vous le souhaitez sans être limité par les CM traditionnelles. De plus, les sites Web statiques sont plus rapides, plus sûrs et plus faciles à maintenir que les sites Web dynamiques.

Comment installer Metalsmith?

Pour installer Metalsmith, vous devez installer Node.js et NPM sur votre ordinateur. Après les installer, vous pouvez installer Metalsmith en exécutant la commande NPM Installez Metalsmith dans le terminal. Cela installera Metalsmith et toutes ses dépendances.

Comment créer un nouveau projet Metalsmith?

Pour créer un nouveau projet Metalsmith, naviguez d'abord dans le terminal vers le répertoire où vous souhaitez créer le projet. Ensuite, exécutez la commande metalsmith pour créer un nouveau projet. Cela créera un nouveau répertoire avec le nom de votre projet, et dans ce répertoire, il créera une structure de base pour votre site Web statique.

Comment ajouter des plugins à mon projet Metalsmith?

Pour ajouter des plugins à votre projet Metalsmith, vous devez les installer via NPM, puis les référer dans votre fichier de configuration Metalsmith. Par exemple, pour ajouter le plugin Markdown, vous devez d'abord exécuter NPM Installer Metalsmith-Markdown, puis dans votre fichier de configuration, vous devez ajouter var markdown = require (MetalSmith-Markdown '); )) Accédez à votre chaîne de construction Metalsmith.

Comment construire mon site Web Metalsmith?

Pour construire votre site Web Metalsmith, vous devez exécuter la construction de Metalsmith de commande dans le terminal. Cela compile tous les fichiers et les diffuse dans le répertoire de build, que vous pouvez ensuite déployer sur votre serveur.

Comment personnaliser la disposition de mon site Web Metalsmith?

Pour personnaliser la disposition de votre site Web Metalsmith, vous pouvez utiliser des moteurs de modèle tels que le guidon ou le jade. Ceux-ci vous permettent de créer des modèles réutilisables pour différentes parties de votre site Web, tels que les en-têtes, les pieds de page et les pages individuelles.

Comment ajouter du contenu à mon site Web Metalsmith?

Pour ajouter du contenu à votre site Web Metalsmith, vous pouvez créer un fichier Markdown dans le répertoire source. Lors de la création d'un site Web, ces fichiers sont convertis en HTML. Vous pouvez également utiliser CMS tels que Netlify CMS pour gérer votre contenu.

Comment déployer mon site Web Metalsmith?

Pour déployer votre site Web Metalsmith, vous pouvez utiliser des services tels que NetLify ou GitHub Pages. Ces services hébergeront votre site Web statique et déploieront automatiquement des modifications lorsque vous passerez au référentiel.

Comment mettre à jour mon site Web Metalsmith?

Pour mettre à jour votre site Web Metalsmith, vous modifiez simplement le fichier source et reconstruisez votre site Web. Les modifications seront reflétées dans le répertoire de build, que vous pouvez ensuite déployer sur votre serveur.

Puis-je utiliser Metalsmith pour des sites Web importants et complexes?

Oui, Metalsmith est très évolutif et peut être utilisé pour les sites Web grands et complexes. Sa structure modulaire vous permet d'ajouter des fonctionnalités selon les besoins, et son utilisation de fichiers statiques signifie qu'il peut gérer beaucoup de contenu sans ralentir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!