Verwendung von GitHub-Vorlagen-Repositories zum schnellen Starten von Static-Site-Projekten

Wenn Sie mit Static Site Generators beginnen, wussten Sie, dass Sie GitHub-Vorlagen-Repositories verwenden können, um schnell neue Projekte zu starten und Ihre Einrichtungszeit zu verkürzen?

Die meisten Static Site Generators machen die Installation einfach, aber jedes Projekt erfordert nach der Installation immer noch eine Konfiguration. Wenn Sie viele ähnliche Projekte erstellen, können Sie bei der Einrichtung Aufwand duplizieren. GitHub-Vorlagen-Repositories können Ihnen viel Zeit sparen, wenn Sie sich dabei ertappen, wie Sie

• die gleichen Ordnerstrukturen aus früheren Projekten erstellen,
• Konfigurationsdateien aus früheren Projekten kopieren und einfügen und
• Boilerplate-Code aus früheren Projekten kopieren und einfügen.

Im Gegensatz zum Forking eines Repositories, das es Ihnen ermöglicht, *den Code eines anderen* als Ausgangspunkt zu verwenden, ermöglichen Vorlagen-Repositories, *Ihren eigenen Code* als Ausgangspunkt zu verwenden, wobei jedes neue Projekt *seine eigene, unabhängige Git-Historie* erhält. Schauen Sie es sich an!

Werfen wir einen Blick darauf, wie wir einen praktischen Workflow einrichten können. Wir richten ein Boilerplate-Eleventy-Projekt ein, wandeln es in ein Git-Repository um, hosten das Repository auf GitHub und konfigurieren dieses Repository dann als Vorlage. Wenn Sie das nächste Mal ein Static-Site-Projekt haben, können Sie zum Repository zurückkehren, auf eine Schaltfläche klicken und mit einer exakten Kopie Ihrer Boilerplate beginnen.

Sind Sie bereit, es auszuprobieren? Lassen Sie uns unsere eigene Static Site mit GitHub-Vorlagen einrichten, um zu sehen, wie sehr Vorlagen ein Static-Site-Projekt optimieren können.

Ich verwende Eleventy als Beispiel für einen Static Site Generator, da es mein persönlicher Favorit ist, aber dieser Prozess funktioniert für Hugo, Jekyll, Nuxt oder jede andere Art von Static Site Generator, die Sie bevorzugen.

Wenn Sie das fertige Produkt sehen möchten, schauen Sie sich mein Static-Site-Vorlagen-Repository an.

Zuerst erstellen wir einen Vorlagenordner

Wir werden jeden dieser Befehle auf der Kommandozeile ausführen

cd ~
mkdir static-site-template
cd static-site-template

Diese drei Befehle wechseln in Ihr *Home-Verzeichnis* (~ unter Unix-basierten Systemen), *erstellen ein neues Verzeichnis* namens static-site-template und wechseln dann in das Verzeichnis static-site-template.

Als Nächstes initialisieren wir das Node-Projekt

Um mit Eleventy arbeiten zu können, müssen wir Node.js installieren, damit Ihr Computer JavaScript-Code außerhalb eines Webbrowsers ausführen kann.

Node.js wird mit dem **Node Package Manager**, oder npm, geliefert, der Node-Pakete auf Ihren Computer herunterlädt. Eleventy ist ein Node-Paket, sodass wir npm verwenden können, um es abzurufen.

Vorausgesetzt, Node.js ist installiert, kehren wir zur Kommandozeile zurück und führen aus

npm init

Dies erstellt eine Datei namens package.json im Verzeichnis. npm wird Sie auffordern, eine Reihe von Fragen zu beantworten, um die Metadaten in Ihrer package.json auszufüllen. Nach der Beantwortung der Fragen ist das Node.js-Projekt initialisiert.

Jetzt können wir Eleventy installieren

Die Initialisierung des Projekts hat uns eine package.json-Datei geliefert, die es npm ermöglicht, Pakete zu installieren, Skripte auszuführen und andere Aufgaben für uns in diesem Projekt zu erledigen. npm verwendet package.json als Einstiegspunkt im Projekt, um genau zu verstehen, wie und was es tun soll, wenn wir ihm Befehle geben.

Wir können npm anweisen, Eleventy als **Entwicklungsabhängigkeit** zu installieren, indem wir Folgendes ausführen:

npm install -D @11ty/eleventy

Dadurch wird ein devDependency-Eintrag zur package.json-Datei hinzugefügt und das Eleventy-Paket in einen node_modules-Ordner im Projekt installiert.

Das Coole an der package.json-Datei ist, dass jeder andere Computer mit Node.js und npm sie lesen und wissen kann, dass Eleventy im node_modules-Verzeichnis des Projekts installiert werden muss, ohne dass es manuell installiert werden muss. Sehen Sie, wir optimieren bereits!

Eleventy konfigurieren

Es gibt unzählige Möglichkeiten, ein Eleventy-Projekt zu konfigurieren. Flexibilität ist die Stärke von Eleventy. Für dieses Tutorial werde ich eine Konfiguration demonstrieren, die Folgendes bietet:

• Einen Ordner zur sauberen Trennung von **Website-Quellcode** von **allgemeinen Projektdateien**
• Ein HTML-Dokument für eine Single-Page-Website
• CSS zur Gestaltung des Dokuments
• JavaScript zur Hinzufügung von Funktionalität zum Dokument

Gehen Sie zurück zur Kommandozeile. Führen Sie innerhalb des Ordners static-site-template die folgenden Befehle nacheinander aus (ohne die Kommentare nach jedem #-Symbol):

mkdir src           # creates a directory for your website source code
mkdir src/css       # creates a directory for the website styles
mkdir src/js        # creates a directory for the website JavaScript
touch index.html    # creates the website HTML document
touch css/style.css # creates the website styles
touch js/main.js    # creates the website JavaScript

Dies erstellt die grundlegende Dateistruktur, die den Eleventy-Build informiert. Wenn wir Eleventy jetzt ausführen, wird die gewünschte Website jedoch nicht generiert. Wir müssen Eleventy noch so konfigurieren, dass es versteht, dass es **nur Dateien im src-Ordner für den Build verwenden** soll und dass **die Ordner css und js mit Passthrough-Dateikopie verarbeitet werden sollen**.

Diese Informationen können Sie Eleventy über eine Datei namens .eleventy.js im Stammverzeichnis des Ordners static-site-template mitteilen. Sie können diese Datei erstellen, indem Sie diesen Befehl im Ordner static-site-template ausführen:

touch .eleventy.js

Bearbeiten Sie die Datei in Ihrem bevorzugten Texteditor, sodass sie Folgendes enthält:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/css");
  eleventyConfig.addPassthroughCopy("src/js");
  return {
    dir: {
      input: "src"
    }
  };
};

Zeilen 2 und 3 weisen Eleventy an, **Passthrough-Dateikopie** für CSS und JavaScript zu verwenden. Zeile 6 weist Eleventy an, nur das Verzeichnis src für den Aufbau des Outputs zu verwenden.

Eleventy liefert uns nun den erwarteten Output. Testen wir das, indem wir Folgendes in die Kommandozeile eingeben:

npx @11ty/eleventy

Der Befehl npx ermöglicht es npm, Code aus dem node_module-Verzeichnis des Projekts auszuführen, ohne die globale Umgebung zu beeinträchtigen. Sie sehen eine Ausgabe wie diese:

Writing _site/index.html from ./src/index.html.
Copied 2 items and Processed 1 file in 0.04 seconds (v0.9.0)

Der Ordner static-site-template sollte nun ein neues Verzeichnis namens _site enthalten. Wenn Sie in diesen Ordner eintauchen, finden Sie die Verzeichnisse css und js sowie die Datei index.html.

Dieser _site-Ordner ist der endgültige Output von Eleventy. Er ist die gesamte Website und kann auf jedem Static-Webhoster gehostet werden.

Ohne Inhalte, Stile oder Skripte ist die generierte Website nicht sehr interessant

Erstellen wir eine Boilerplate-Website

Als Nächstes stellen wir die Grundlage für eine super einfache Website zusammen, die wir als Ausgangspunkt für alle zukünftigen Projekte verwenden können.

Es ist erwähnenswert, dass Eleventy eine Menge Boilerplate-Dateien für verschiedene Projekttypen hat. Es ist absolut in Ordnung, eine davon zu verwenden, obwohl ich oft feststelle, dass ich meine eigene erstellen muss. Also machen wir das hier.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Static site template</title>
    <meta name="description" content="A static website">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <h1>Great job making your website template!</h1>
  <script src="js/main.js"></script>
  </body>
</html>

Wir können die Dinge ein wenig gestalten, also fügen wir Folgendes zu src/css/style.css hinzu:

body {
  font-family: sans-serif;
}

Und wir können bestätigen, dass JavaScript verbunden ist, indem wir Folgendes zu src/js/main.js hinzufügen:

(function() {
  console.log('Invoke the static site template JavaScript!');
})();

Möchten Sie sehen, was wir haben? Führen Sie npx @11ty/eleventy --serve in der Kommandozeile aus. Eleventy startet einen Server mit Browsersync und gibt die lokale URL an, die wahrscheinlich so etwas wie localhost:8080 lautet.

Verschieben wir das in ein GitHub-Repo

Git ist das am häufigsten verwendete Versionskontrollsystem in der Softwareentwicklung. Die meisten Unix-basierten Computer haben es vorinstalliert, und Sie können jedes Verzeichnis in ein Git-Repository umwandeln, indem Sie diesen Befehl ausführen:

git init

Wir sollten eine Meldung wie diese erhalten:

Initialized empty Git repository in /path/to/static-site-template/.git/

Das bedeutet, dass ein versteckter .git-Ordner im Projektverzeichnis hinzugefügt wurde, der es dem Git-Programm ermöglicht, Befehle gegen das Projekt auszuführen.

Bevor wir eine Reihe von Git-Befehlen für das Projekt ausführen, müssen wir Git mitteilen, welche Dateien es **nicht** anfassen soll.

Führen Sie im Verzeichnis static-site-template aus:

touch .gitignore

Öffnen Sie dann die Datei in Ihrem bevorzugten Texteditor. Fügen Sie diesen Inhalt zur Datei hinzu:

_site/
node_modules/

Dies weist Git an, das Verzeichnis node_modules und das Verzeichnis _site zu **ignorieren**. Das Committen jedes einzelnen Node.js-Moduls in das Repository könnte die Dinge wirklich unordentlich und schwer zu verwalten machen. All diese Informationen sind ohnehin bereits in package.json enthalten.

Ebenso ist es nicht notwendig, _site zu versionieren. Eleventy kann es aus den Dateien in src generieren, also kein Platzbedarf auf GitHub. Es ist auch möglich, dass, wenn wir

• _site versionieren,
• Dateien in src ändern oder
• vergessen, Eleventy erneut auszuführen,

dann spiegelt _site eine ältere Version der Website wider, und zukünftige Entwickler (oder eine zukünftige Version von Ihnen selbst) könnten versehentlich eine veraltete Version der Website verwenden.

Git ist eine Versionskontroll-Software, und GitHub ist ein Host für Git-Repositories. Es gibt andere Git-Host-Anbieter wie BitBucket oder GitLab, aber da wir über ein GitHub-spezifisches Feature (Vorlagen-Repositories) sprechen, werden wir unsere Arbeit auf GitHub hochladen. Wenn Sie noch kein Konto haben, treten Sie GitHub bei. Sobald Sie ein Konto haben, erstellen Sie ein GitHub-Repository und nennen Sie es **static-site-template**.

GitHub stellt beim Einrichten eines neuen Repositories einige Fragen. Eine davon ist, ob wir **ein neues Repository auf der Kommandozeile erstellen** oder **ein bestehendes Repository von der Kommandozeile aus pushen** möchten. Keine dieser Optionen ist genau das, was wir brauchen. Sie gehen davon aus, dass wir entweder gar nichts haben oder dass wir Git bereits lokal verwenden. Das Projekt static-site-template existiert bereits, hat ein initialisiertes Git-Repository, enthält aber noch keine Commits.

Daher ignorieren wir die Eingabeaufforderungen und führen stattdessen die folgenden Befehle auf der Kommandozeile aus. **Stellen Sie sicher, dass Sie die URL, die GitHub in der Zeile 3 angibt, griffbereit haben:**

git add .
git commit -m "first commit"
git remote add origin https://github.com/your-username/static-site-template.git
git push -u origin master

Dies fügt den gesamten Ordner static-site-template zum Git-Staging-Bereich hinzu. Es committet ihn mit der Nachricht "first commit", fügt ein Remote-Repository (das GitHub-Repository) hinzu und pusht dann den Master-Branch zu diesem Repository.

Lasst uns das Ding zur Vorlage machen

OK, das ist der Kern dessen, worauf wir hingearbeitet haben. GitHub-Vorlagen erlauben es uns, das gerade erstellte Repository als Grundlage für zukünftige Projekte zu verwenden – ohne all die Arbeit tun zu müssen, die wir bisher geleistet haben!

Klicken Sie auf **Einstellungen** auf der GitHub-Startseite des Repositories, um zu beginnen. Auf der Einstellungsseite aktivieren Sie die Option **Repository-Vorlage**.

Wenn wir nun zur Repository-Seite zurückkehren, sehen wir eine große grüne Schaltfläche mit der Aufschrift **Diese Vorlage verwenden**. Klicken Sie darauf und GitHub erstellt ein neues Repository, das ein Spiegelbild unserer neuen Vorlage ist. Das neue Repository beginnt mit denselben Dateien und Ordnern wie **static-site-template**. Von dort aus laden Sie dieses neue Repository herunter oder klonen es, um ein neues Projekt mit allen Basisdateien und Konfigurationen zu starten, die wir im Vorlagenprojekt eingerichtet haben.

Wir können die Vorlage für zukünftige Projekte erweitern

Nachdem wir nun eine Vorlagen-Repository haben, können wir sie für jedes neue Static-Site-Projekt verwenden, das ansteht. Möglicherweise stellen Sie jedoch fest, dass ein neues Projekt zusätzliche Anforderungen hat, die über das hinausgehen, was in der Vorlage eingerichtet wurde. Angenommen, Sie müssen beispielsweise auf die Templating-Engine von Eleventy oder auf die Datenverarbeitungsleistung zugreifen.

Bauen Sie die Vorlage bei der Arbeit an dem neuen Projekt weiter aus. Wenn Sie dieses Projekt abgeschlossen haben, identifizieren Sie Teile, die Sie für zukünftige Projekte wiederverwenden möchten. Vielleicht haben Sie einen coolen Hover-Effekt bei Schaltflächen gefunden. Oder Sie haben Ihr eigenes JavaScript-Karussell-Element erstellt. Oder vielleicht sind Sie sehr stolz auf das Design des Dokuments und die Informationshierarchie.

Wenn Sie der Meinung sind, dass etwas, das Sie in einem Projekt gemacht haben, bei einem zukünftigen Projekt wieder vorkommen könnte, entfernen Sie die projektspezifischen Details und fügen Sie die neuen Dinge zu Ihrem Vorlagenprojekt hinzu. Pushen Sie diese Änderungen auf GitHub, und wenn Sie das nächste Mal **static-site-template** verwenden, um ein Projekt zu starten, steht Ihnen Ihr wiederverwendbarer Code zur Verfügung.

Natürlich gibt es einige Einschränkungen

GitHub-Vorlagen-Repositories sind ein nützliches Werkzeug, um wiederholte Einrichtung bei neuen Webentwicklungsprojekten zu vermeiden. Ich finde dies besonders nützlich für Static-Site-Projekte. Diese Vorlagen-Repositories sind möglicherweise nicht so geeignet für komplexere Projekte, die externe Dienste wie Datenbanken mit Konfigurationen erfordern, die nicht in einem einzigen Verzeichnis versioniert werden können.

Vorlagen-Repositories ermöglichen es Ihnen, wiederverwendbaren Code, den Sie geschrieben haben, zu versenden, damit Sie ein Problem einmal lösen und diese Lösung immer wieder verwenden können. Aber während Ihre neuen Lösungen in zukünftige Projekte übernommen werden, werden sie nicht rückwirkend in alte Projekte portiert.

Dies ist ein nützlicher Prozess für Websites mit **sehr ähnlicher** Struktur, Stilen und Funktionalität. Projekte mit stark variierenden Anforderungen profitieren möglicherweise nicht von diesem Code-Sharing, und Sie könnten Ihr Projekt mit unnötigem Code aufblähen.

Zusammenfassung

Da haben Sie es! Sie haben nun alles, was Sie brauchen, um nicht nur ein Static-Site-Projekt mit Eleventy zu starten, sondern auch die Möglichkeit, es für zukünftige Projekte wiederzuverwenden. GitHub-Vorlagen sind so praktisch, um Projekte schnell zu starten, bei denen wir sonst immer wieder das Rad neu erfinden müssten. Nutzen Sie sie zu Ihrem Vorteil und genießen Sie einen Vorsprung bei Ihren zukünftigen Projekten!