Verwenden von GitHub-Vorlagen-Repos, um statische Site-Projekte zu springen

Nutzen Sie GitHub -Vorlage -Repositories, um Ihre statischen Site -Generatorprojekte zu optimieren und die Einrichtungszeit erheblich zu verkürzen. Während die meisten statischen Site -Generatoren eine einfache Installation bieten, bleibt die Projektkonfiguration eine wiederkehrende Aufgabe. Dieser Ansatz ist besonders vorteilhaft, wenn Sie häufig ähnliche Projekte erstellen, Ordnerstrukturen wiederholt erstellen, Konfigurationsdateien kopieren und Code von Boilerplate erstellen.

Im Gegensatz zu Gabing, in dem der Code eines anderen Entwicklers verwendet wird, ermöglichen Sie Vorlagen -Repositorys, Ihren eigenen Code wiederzuverwenden, um sicherzustellen, dass jedes neue Projekt seine eigene unabhängige Git -Geschichte beibehält.

Dieser Leitfaden zeigt, dass ein optimiertes Workflow mit einem elf -Projekt als Beispiel eingerichtet wird (obwohl sie an Hugo, Jekyll, Nuxt oder andere anpassbar sind). Ein abgeschlossenes Beispiel -Repository steht als Referenz zur Verfügung.

Erstellen Sie Ihre Vorlage

Erstellen Sie mit der Befehlszeile ein Projektverzeichnis:

 CD ~
MKDIR Static-Site-Template
CD statische Template

Dies navigiert zu Ihrem Heimverzeichnis, schafft ein neues Verzeichnis und tritt in diese ein.

Knotenprojektinitialisierung

ELEDENTY benötigt Node.js, das JavaScript -Ausführung außerhalb eines Webbrowsers und NPM (Node Package Manager) für die Paketinstallation ermöglicht. Angenommen, Node.js ist installiert, rennen Sie:

 npm init

Dies generiert package.json und veranlasst Sie, Projektmetadaten bereitzustellen.

ELFENGEITEN

Installieren Sie mit package.json ELEDY als Entwicklungsabhängigkeit:

 npm install -d @11ty/ely

Dies fügt package.json ELEVY hinzu und installiert es in den Ordner node_modules . package.json sorgt für eine konsistente Projekteinrichtung über verschiedene Maschinen hinweg.

Höhenkonfiguration

In diesem Tutorial wird eine Konfiguration verwendet, mit der Website -Quellcode von Projektdateien getrennt und ein HTML -Dokument, CSS und JavaScript enthält. Erstellen Sie die erforderliche Verzeichnisstruktur:

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

So konfigurieren Sie .eleventy.js , um das src -Verzeichnis zu verwenden und css und js -Dateien zu kopieren.

 module.exports = function (ELEDENTYCONfig) {
  ELEDENTYCONFIG.ADDPASSThroughCopy ("SRC/CSS");
  ELEDENTYCONFIG.ADDPASSThroughCopy ("src/js");
  zurückkehren {
    Dir: {
      Eingabe: "SRC"
    }
  };
};

Testen Sie die Konfiguration durch Ausführen:

 npx @11ty/ely

Dies generiert die Website im Verzeichnis _site .

Erstellen einer Kesselplatte -Website

Grundlegende Website -Inhalte erstellen: Fügen Sie src/index.html Folgendes hinzu:

 


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Statische Site -Vorlage</title>
  <meta name="description" content="Eine statische Website">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">


  <h1 id="Tolle-Arbeit-machen-Ihre-Website-Vorlage">Tolle Arbeit machen Ihre Website -Vorlage!</h1>
  <script src="js/main.js"></script>

Fügen Sie src/css/style.css grundlegendes Styling hinzu:

 Körper {
  Schriftfamilie: Sans-Serif;
}

Und eine einfache JavaScript -Funktion zu src/js/main.js :

 (function () {
  console.log ('auf die statische Site -Vorlage JavaScript aufrufen!');
}) ();

Führen Sie npx @11ty/eleventy --serve aus, um die Website lokal anzuzeigen.

GitHub Repository Setup

Initialisieren Sie ein Git -Repository:

 Git init

Erstellen Sie eine .gitignore -Datei, um _site und node_modules auszuschließen:

 <code>_site/ node_modules/</code>

Erstellen Sie ein GitHub-Repository (z. B. static-site-template ). Drücken Sie dann Ihr lokales Repository:

 Git Add.
Git Commit -m "Erstes Commit"
Git -Fernbedienung Herkunft hinzufügen<your_github_repo_url>
Git Push -u Ursprung Meister</your_github_repo_url>

Aktivieren von Vorlagen -Repository

Aktivieren Sie in Ihren GitHub -Repository -Einstellungen die Option "Vorlagen -Repository". Eine Schaltfläche "Diese Vorlage verwenden" wird angezeigt, sodass Sie neue Projekte basierend auf Ihrer Vorlage erstellen können.

Erweiterung der Vorlage

Fügen Sie bei der Entwicklung neuer Projekte mithilfe der Vorlage wiederverwendbare Komponenten und Verbesserungen zum Vorlagen -Repository für die zukünftige Verwendung zurück.

Einschränkungen

Während für ähnliche Projekte vorteilhaft sind, sind Vorlagen -Repositories möglicherweise nicht für komplexe Projekte mit externen Abhängigkeiten oder sehr unterschiedlichen Anforderungen geeignet. Denken Sie daran, dass Änderungen der Vorlage nur zukünftige Projekte beeinflussen, nicht vorhandenen.

Dieser verbesserte Leitfaden bietet einen umfassenderen und strukturierten Ansatz zur Erstellung und Verwendung von GitHub -Vorlagen -Repositories für statische Site -Projekte.

Das obige ist der detaillierte Inhalt vonVerwenden von GitHub-Vorlagen-Repos, um statische Site-Projekte zu springen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!