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