Utilisation de REPOS de modèle GitHub pour relancer les projets de site statique

Tirez parti des référentiels de modèles GitHub pour rationaliser vos projets de générateurs de sites statiques et réduire considérablement le temps de configuration. Alors que la plupart des générateurs de sites statiques offrent une installation facile, la configuration du projet reste une tâche récurrente. Cette approche est particulièrement bénéfique si vous créez fréquemment des projets similaires, recréant à plusieurs reprises des structures de dossiers, copie des fichiers de configuration et code de chauffeur.

Contrairement à Forking, qui utilise le code d'un autre développeur , les référentiels de modèles vous permettent de réutiliser votre propre code , garantissant que chaque nouveau projet maintient son propre historique de GIT indépendant .

Ce guide montre la mise en place d'un flux de travail rationalisé à l'aide d'un projet Eleventy comme exemple (bien qu'adaptable à Hugo, Jekyll, Nuxt ou autres). Un exemple de référentiel terminé est disponible pour référence.

Créer votre modèle

Commencez par créer un répertoire de projet à l'aide de la ligne de commande:

 CD ~
MKDIR-SITE-TEmplate
CD-Site statique-template

Cela se rend à votre répertoire personnel, crée un nouveau répertoire et y entre.

Initialisation du projet de nœud

Eleventy nécessite Node.js, qui permet l'exécution de JavaScript en dehors d'un navigateur Web, et NPM (Node Package Manager) pour l'installation de packages. En supposant que Node.js est installé, exécutez:

 npm init

Cela génère package.json , vous incitant à fournir des métadonnées de projet.

Installation de Eleventy

Avec package.json créé, installer Eleventy comme dépendance de développement:

 NPM Install -d @ 11ty / eleventy

Cela ajoute Eleventy à package.json et l'installe dans le dossier node_modules . package.json assure une configuration de projet cohérente sur différentes machines.

Eleventy Configuration

Ce tutoriel utilise une configuration qui sépare le code source du site Web des fichiers de projet, comprend un document HTML, CSS et JavaScript. Créez la structure du répertoire nécessaire:

 MKDIR SRC SRC / CSS SRC / JS
Touch index.html css / style.css js / main.js

Pour configurer Eleventy pour utiliser le répertoire src et copier les fichiers css et js , créez .eleventy.js :

 module.exports = fonction (eleventyconfig) {
  eleventyconfig.addpassthroughcopy ("src / css");
  eleventyconfig.addpassthroughcopy ("src / js");
  retour {
    dir: {
      Entrée: "SRC"
    }
  };
};

Testez la configuration en fonctionnant:

 npx @ 11ty / eleventy

Cela génère le site Web dans le répertoire _site .

Construire un site Web de passe-partout

Créez du contenu de base du site Web: ajoutez ce qui suit à src/index.html :

 


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Modèle de site statique</title>
  <meta name="description" content="Un site Web statique">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1 id="Excellent-travail-en-faisant-le-modèle-de-votre-site-Web">Excellent travail en faisant le modèle de votre site Web!</h1>
  <script src="js/main.js"></script>

Ajouter un style de base à src/css/style.css :

 corps {
  Font-Family: Sans-Serif;
}

Et une fonction JavaScript simple à src/js/main.js :

 (fonction() {
  console.log («Invoquez le modèle de site statique javascript!»);
}) ();

Exécutez npx @11ty/eleventy --serve pour afficher le site Web localement.

Configuration du référentiel GitHub

Initialiser un référentiel GIT:

 git init

Créez un fichier .gitignore pour exclure _site et node_modules :

 <code>_site/ node_modules/</code>

Créez un référentiel GitHub (par exemple, static-site-template ). Ensuite, poussez votre référentiel local:

 git add.
git commit -m "premier engagement"
git à distance ajouter d'origine<your_github_repo_url>
git push -u origine maître</your_github_repo_url>

Activation du référentiel de modèle

Dans vos paramètres de référentiel GitHub, activez l'option "Repository de modèle". Un bouton "Utiliser ce modèle" apparaît, vous permettant de créer de nouveaux projets en fonction de votre modèle.

Extension du modèle

Lorsque vous développez de nouveaux projets à l'aide du modèle, ajoutez des composants réutilisables et des améliorations au référentiel de modèle pour une utilisation future.

Limites

Bien que bénéfiques pour des projets similaires, les référentiels de modèles peuvent ne pas convenir à des projets complexes avec des dépendances externes ou des exigences très différentes. N'oubliez pas que les modifications du modèle affectent uniquement les projets futurs, et non les projets existants.

Ce guide amélioré fournit une approche plus complète et structurée pour créer et utiliser des référentiels de modèles GitHub pour les projets de sites statiques.

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!