Vereinfachen Sie Ihren Stack mit einem maßgeschneiderten Static-Site-Generator

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ In der modernen Entwicklung gibt es so viele großartige Tools zum Entwickeln von Websites, aber oft sind sie mehr als das, was für ein bestimmtes Projekt erforderlich ist. In diesem Artikel untersuchen wir, wie man eine bescheidene HTML-Seite nimmt und ihren Inhalt in einem CMS ohne Frameworks und ohne clientseitiges JavaScript bearbeitbar macht.

Mit dem Aufkommen der Jamstack-Bewegung sind statisch bediente Seiten wieder voll im Trend. Die meisten Entwickler, die statisches HTML bereitstellen, erstellen kein natives HTML. Um eine solide Entwicklererfahrung zu haben, greifen wir oft auf Tools namens Static Site Generators (SSG) zurück.

Diese Tools verfügen über viele Funktionen, die das Erstellen umfangreicher statischer Websites angenehm machen. Ob sie einfache Hooks in APIs von Drittanbietern wie die Datenquellen von Gatsby oder eine tiefgreifende Konfiguration wie die riesige Sammlung von Template-Engines von 11ty bieten, bei der Generierung statischer Websites ist für jeden etwas dabei.

Da diese Tools für verschiedene Anwendungsfälle entwickelt wurden, müssen sie über viele Funktionen verfügen. Diese Eigenschaften machen sie mächtig. Sie machen sie auch ziemlich komplex und undurchsichtig für neue Entwickler. In diesem Artikel werden wir das SSG auf seine Grundkomponenten reduzieren und unser eigenes erstellen.

Was ist ein Static-Site-Generator?

Im Kern ist ein Static-Site-Generator ein Programm, das eine Reihe von Transformationen an einer Gruppe von Dateien durchführt, um sie in statische Assets wie HTML umzuwandeln. Welche Art von Dateien es akzeptieren kann, wie es sie umwandelt und welche Dateitypen ausgegeben werden, unterscheidet SSGs.

Jekyll, ein frühes und immer noch beliebtes SSG, verwendet Ruby, um Liquid-Vorlagen und Markdown-Inhaltsdateien in HTML zu verarbeiten.

Gatsby verwendet React und JSX, um Komponenten und Inhalte in HTML umzuwandeln. Es geht dann noch einen Schritt weiter und erstellt eine Single-Page-Anwendung, die statisch bedient werden kann.

11ty rendert HTML von Templating-Engines wie Liquid, Handlebars, Nunjucks oder JavaScript-Template-Literalen.

Jede dieser Plattformen verfügt über zusätzliche Funktionen, die uns das Leben erleichtern. Sie bieten Themen, bauen Pipelines, Plugin-Architektur und mehr. Mit jedem zusätzlichen Feature kommen mehr Komplexität, mehr Magie und mehr Abhängigkeiten. Sie sind zwar wichtige Funktionen, aber nicht jedes Projekt benötigt sie.

Zwischen diesen drei verschiedenen SSGs können wir ein weiteres gemeinsames Thema erkennen: Daten + Vorlagen = endgültige Site. Dies scheint die Kernfunktionalität statischer Generatorseiten zu sein. Dies ist die Funktionalität, auf der wir unser SSG aufbauen werden.

Im Kern ist ein Static-Site-Generator ein Programm, das eine Reihe von Transformationen an einer Gruppe von Dateien durchführt, um sie in statische Assets wie HTML umzuwandeln.

„

Der Technologie-Stack unseres neuen statischen Site-Generators: Handlebars, Sanity.io und Netlify

Um unsere SSG zu erstellen, benötigen wir eine Template-Engine, eine Datenquelle und einen Host, der unsere SSG ausführen und unsere Website erstellen kann. Viele Generatoren verwenden Markdown als Datenquelle, aber was wäre, wenn wir noch einen Schritt weiter gehen und unser SSG nativ mit einem CMS verbinden würden?

  • Datenquelle: Sanity.io
  • Datenabruf und Templating: Node und Handlebars
  • Host und Bereitstellung: Netlify.

Voraussetzungen

  • NodeJS installiert
  • Sanity.io-Konto
  • Git-Kenntnisse
  • Grundkenntnisse der Kommandozeile
  • Grundkenntnisse der Bereitstellung für Dienste wie Netlify.

Hinweis : Um mitzumachen, finden Sie den Code in diesem Repository auf GitHub.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Einrichten unserer Dokumentstruktur in HTML

Um mit unserer Dokumentstruktur zu beginnen, werden wir einfaches HTML schreiben. Keine Notwendigkeit, die Dinge noch zu verkomplizieren.

In unserer Projektstruktur müssen wir einen Ort schaffen, an dem unsere Quelldateien leben können. In diesem Fall erstellen wir ein src -Verzeichnis und legen unsere index.html darin ab.

In index.html skizzieren wir den gewünschten Inhalt. Dies wird eine relativ einfache About-Seite sein.

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title of the page!</title> </head> <body> <h1>The personal homepage of Bryan Robinson</h1> <p>Some pagraph and rich text content next</p> <h2>Bryan is on the internet</h2> <ul> <li><a href="linkURL">List of links</a></li> </ul> </body> </html>

Halten wir es einfach. Wir beginnen mit einem h1 für unsere Seite. Darauf folgen ein paar Absätze mit biografischen Informationen, und wir verankern die Seite mit einer Liste von Links, um mehr zu sehen.

Konvertieren Sie unser HTML in eine Vorlage, die Daten akzeptiert

Nachdem wir unsere Grundstruktur haben, müssen wir einen Prozess einrichten, um dies mit einer gewissen Datenmenge zu kombinieren. Dazu verwenden wir die Handlebars-Vorlagen-Engine.

Im Kern nimmt Handlebars einen HTML-ähnlichen String, fügt Daten über Regeln ein, die im Dokument definiert sind, und gibt dann einen kompilierten HTML-String aus.

Um Handlebars zu verwenden, müssen wir eine package.json initialisieren und das Paket installieren.

Führen Sie npm init -y aus, um die Struktur einer package.json-Datei mit einigen Standardinhalten zu erstellen. Sobald wir dies haben, können wir Lenker installieren.

 npm install handlebars

Unser Build-Skript wird ein Node-Skript sein. Dies ist das Skript, das wir lokal zum Erstellen verwenden, aber auch das, was unser Bereitstellungsanbieter und Host verwenden wird, um unseren HTML-Code für die Live-Site zu erstellen.

Um unser Skript zu starten, erstellen wir eine index.js -Datei und benötigen oben zwei Pakete. Das erste ist Handlebars und das zweite ist ein Standardmodul in Node für den Zugriff auf das aktuelle Dateisystem.

 const fs = require('fs'); const Handlebars = require('handlebars');

Wir verwenden das fs -Modul, um auf unsere Quelldatei zuzugreifen und in eine Distributionsdatei zu schreiben. Um unseren Build zu starten, erstellen wir eine main für unsere Datei, die beim Aufruf ausgeführt wird, und eine buildHTML Funktion, um unsere Daten und Markups zu kombinieren.

 function buildHTML(filename, data) { const source = fs.readFileSync(filename,'utf8').toString(); const template = Handlebars.compile(source); const output = template(data); return output } async function main(src, dist) { const html = buildHTML(src, { "variableData": "This is variable data"}); fs.writeFile(destination, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); } main('./src/index.html', './dist/index.html');

Die Funktion main() akzeptiert zwei Argumente: den Pfad zu unserer HTML-Vorlage und den Pfad, in dem unsere erstellte Datei leben soll. In unserer Hauptfunktion führen wir buildHTML auf dem Quellpfad der Vorlage mit einer gewissen Datenmenge aus.

Die Build-Funktion konvertiert das Quelldokument in einen String und übergibt diesen String an Handlebars. Handlebars kompiliert eine Vorlage mit dieser Zeichenfolge. Wir übergeben dann unsere Daten an die kompilierte Vorlage, und Handlebars rendert einen neuen HTML-String, der alle Variablen oder Vorlagenlogik durch die Datenausgabe ersetzt.

Wir geben diese Zeichenfolge in unsere main zurück und verwenden die vom Dateisystemmodul von Node bereitgestellte Methode writeFile , um die neue Datei an unserem angegebenen Speicherort zu schreiben, wenn das Verzeichnis existiert.

Um einen Fehler zu vermeiden, fügen Sie Ihrem Projekt ein dist -Verzeichnis mit einer darin enthaltenen .gitkeep -Datei hinzu. Wir möchten unsere erstellten Dateien nicht festschreiben (unser Erstellungsprozess erledigt dies), aber wir möchten sicherstellen, dass dieses Verzeichnis für unser Skript vorhanden ist.

Bevor wir ein CMS erstellen, um diese Seite zu verwalten, lassen Sie uns bestätigen, dass es funktioniert. Zum Testen ändern wir unser HTML-Dokument so, dass es die gerade übergebenen Daten verwendet. Wir verwenden die Handlebars-Variablensyntax, um den variableData Inhalt einzuschließen.

 <h1>{{ variableData }}</h1>

Jetzt, da unser HTML eine Variable hat, können wir unser Knotenskript ausführen.

 node index.js

Sobald das Skript beendet ist, sollten wir eine Datei unter /dist/index.html haben. Wenn wir dies in einem Browser öffnen, sehen wir unser Markup gerendert, aber auch unseren „This is variable data“-String.

Verbinden mit einem CMS

Wir haben eine Möglichkeit, Daten mit einer Vorlage zusammenzustellen, jetzt brauchen wir eine Quelle für unsere Daten. Diese Methode funktioniert mit jeder Datenquelle, die über eine API verfügt. Für diese Demo verwenden wir Sanity.io.

Sanity ist eine API-First-Datenquelle, die Inhalte als strukturierte Daten behandelt. Sie verfügen über ein Open-Source-Content-Management-System, um das Verwalten und Hinzufügen von Daten sowohl für Redakteure als auch für Entwickler bequemer zu machen. Das CMS wird oft als „Headless“ CMS bezeichnet. Anstelle eines herkömmlichen Verwaltungssystems, bei dem Ihre Daten eng mit Ihrer Präsentation verknüpft sind, erstellt ein Headless-CMS eine Datenschicht, die von jedem Frontend oder Dienst (und möglicherweise vielen gleichzeitig) genutzt werden kann.

Sanity ist ein kostenpflichtiger Dienst, aber sie haben einen „Standard“-Plan, der kostenlos ist und alle Funktionen enthält, die wir für eine Website wie diese benötigen.

Vernunft einrichten

Der schnellste Weg, ein neues Sanity-Projekt zum Laufen zu bringen, ist die Verwendung der Sanity-CLI. Wir beginnen damit, das global zu installieren.

 npm install -g @sanity/cli

Die CLI gibt uns Zugriff auf eine Gruppe von Helfern zum Verwalten, Bereitstellen und Erstellen. Um die Dinge in Gang zu bringen, führen wir sanity init aus. Dadurch werden wir einen Fragebogen durchlaufen, der uns dabei hilft, unser Studio (wie Sanity sein Open-Source-CMS nennt) zu booten.

 Select a Project to Use: Create new project HTML CMS Use the default dataset configuration? Y // this creates a "Production" dataset Project output path: studio // or whatever directory you'd like this to live in Select project template Clean project with no predefined schemas

Dieser Schritt erstellt ein neues Projekt und einen neuen Datensatz in Ihrem Sanity-Konto, erstellt eine lokale Version von Studio und verknüpft die Daten und das CMS für Sie. Standardmäßig wird das studio -Verzeichnis im Stammverzeichnis unseres Projekts erstellt. In größeren Projekten möchten Sie dies möglicherweise als separates Repository einrichten. Für dieses Projekt ist es in Ordnung, dies zusammenzuhalten.

Um unser Studio lokal auszuführen, ändern wir das Verzeichnis in das studio und führen sanity start aus. Dadurch wird Studio unter localhost:3333 ausgeführt. Wenn Sie sich anmelden, wird Ihnen ein Bildschirm angezeigt, der Sie darüber informiert, dass Sie ein „leeres Schema“ haben. Damit ist es an der Zeit, unser Schema hinzuzufügen, mit dem unsere Daten strukturiert und bearbeitet werden.

Sanity-Schema erstellen

Die Art und Weise, wie Sie Dokumente und Felder in Sanity Studio erstellen, besteht darin, Schemas in der Datei schemas/schema.js zu erstellen.

Für unsere Website erstellen wir einen Schematyp mit dem Namen „About Details“. Unser Schema wird aus unserem HTML fließen. Im Allgemeinen könnten wir den größten Teil unserer Webseite zu einem einzigen Rich-Text-Feld machen, aber es ist eine bewährte Methode, unsere Inhalte entkoppelt zu strukturieren. Dies bietet mehr Flexibilität bei der zukünftigen Verwendung dieser Daten.

Für unsere Webseite benötigen wir eine Reihe von Daten, die Folgendes umfassen:

  • Titel
  • Vollständiger Name
  • Biografie (mit Rich-Text-Bearbeitung)
  • Eine Liste von Websites mit einem Namen und einer URL.

Um dies in unserem Schema zu definieren, erstellen wir ein Objekt für unser Dokument und definieren seine Felder. Eine kommentierte Liste unserer Inhalte mit ihrem type :

  • Titel — Zeichenkette
  • Vollständiger Name — Zeichenfolge
  • Biografie – Reihe von „Blöcken“
  • Website-Liste – Array von Objekten mit Namens- und URL-String-Feldern.
 types: schemaTypes.concat([ /* Your types here! */ { title: "About Details", name: "about", type: "document", fields: [ { name: 'title', type: 'string' }, { name: 'fullName', title: 'Full Name', type: 'string' }, { name: 'bio', title: 'Biography', name: 'content', type: 'array', of: [ { type: 'block' } ] }, { name: 'externalLinks', title: 'Social media and external links', type: 'array', of: [ { type: 'object', fields: [ { name: 'text', title: 'Link text', type: 'string' }, { name: 'href', title: 'Link url', type: 'string' } ] } ] } ] } ])

Fügen Sie dies zu Ihren Schematypen hinzu, speichern Sie und Ihr Studio wird es neu kompilieren und Ihnen Ihre ersten Dokumente präsentieren. Von hier aus fügen wir unsere Inhalte in das CMS ein, indem wir ein neues Dokument erstellen und die Informationen ausfüllen.

Strukturieren Sie Ihre Inhalte auf wiederverwendbare Weise

An dieser Stelle fragen Sie sich vielleicht, warum wir einen „vollständigen Namen“ und einen „Titel“ haben. Das liegt daran, dass wir möchten, dass unsere Inhalte das Potenzial haben, vielseitig einsetzbar zu sein. Indem wir ein Namensfeld einfügen, anstatt den Namen nur in den Titel aufzunehmen, geben wir diesen Daten mehr Nutzen. Wir können dann Informationen in diesem CMS verwenden, um auch eine Lebenslaufseite oder ein PDF zu erstellen. Das Biografiefeld könnte programmatisch in anderen Systemen oder Websites verwendet werden. Dies ermöglicht uns, für einen Großteil dieser Inhalte eine einzige Quelle der Wahrheit zu haben, anstatt vom direkten Anwendungsfall dieser bestimmten Website diktiert zu werden.

Ziehen unserer Daten in unser Projekt

Nachdem wir unsere Daten nun über eine API verfügbar gemacht haben, ziehen wir sie in unser Projekt.

Installieren und konfigurieren Sie den Sanity-JavaScript-Client

Als erstes benötigen wir Zugriff auf die Daten in Node. Wir können den Sanity-JavaScript-Client verwenden, um diese Verbindung herzustellen.

 npm install @sanity/client

Dadurch wird das JavaScript-SDK abgerufen und installiert. Von hier aus müssen wir es konfigurieren, um Daten aus dem zuvor eingerichteten Projekt abzurufen. Dazu richten wir ein Hilfsskript in /utils/SanityClient.js ein. Wir stellen dem SDK unsere Projekt-ID und den Datensatznamen bereit und können es in unserem Hauptskript verwenden.

 const sanityClient = require('@sanity/client'); const client = sanityClient({ projectId: '4fs6x5jg', dataset: 'production', useCdn: true }) module.exports = client;

Abrufen unserer Daten mit GROQ

Zurück in unserer index.js -Datei erstellen wir eine neue Funktion, um unsere Daten abzurufen. Dazu verwenden wir die native Abfragesprache von Sanity, das Open-Source-GROQ.

Wir erstellen die Abfrage in einer Variablen und verwenden dann den Client, den wir konfiguriert haben, um die Daten basierend auf der Abfrage abzurufen. In diesem Fall erstellen wir ein Objekt mit einer Eigenschaft namens about . In diesem Objekt möchten wir die Daten für unser spezifisches Dokument zurückgeben. Dazu fragen wir basierend auf der Dokument _id , die automatisch generiert wird, wenn wir unser Dokument erstellen.

Um die _id des Dokuments zu finden, navigieren wir zu dem Dokument in Studio und kopieren es entweder von der URL oder wechseln in den „Untersuchen“-Modus, um alle Daten im Dokument anzuzeigen. Um Inspect aufzurufen, klicken Sie entweder auf das Menü „kabob“ oben rechts oder verwenden Sie die Tastenkombination Strg + Alt + I . Diese Ansicht listet alle Daten zu diesem Dokument auf, einschließlich unserer _id . Sanity gibt ein Array von Dokumentobjekten zurück, also geben wir der Einfachheit halber den 0th Eintrag zurück.

Wir übergeben die Abfrage dann an die fetch -Methode unseres Sanity-Clients und sie gibt ein JSON-Objekt aller Daten in unserem Dokument zurück. In dieser Demo ist die Rückgabe aller Daten keine große Sache. Bei größeren Implementierungen ermöglicht GROQ eine optionale „Projektion“, um nur die gewünschten expliziten Felder zurückzugeben.

 const client = require('./utils/SanityClient') // at the top of the file // ... async function getSanityData() { const query = `{ "about": *[_id == 'YOUR-ID-HERE'][0] }` let data = await client.fetch(query); }

Konvertieren des Rich-Text-Felds in HTML

Bevor wir die Daten zurückgeben können, müssen wir eine Transformation in unserem Rich-Text-Feld durchführen. Während viele CMS Rich-Text-Editoren verwenden, die HTML direkt zurückgeben, verwendet Sanity eine Open-Source-Spezifikation namens Portable Text. Portable Text gibt ein Array von Objekten (Stellen Sie sich Rich Text als eine Liste von Absätzen und anderen Medienblöcken vor) mit allen Daten zum Rich Text-Stil und Eigenschaften wie Links, Fußnoten und andere Anmerkungen zurück. Dadurch kann Ihr Text verschoben und in Systemen verwendet werden, die kein HTML unterstützen, wie z. B. Sprachassistenten und native Apps.

Für unseren Anwendungsfall bedeutet dies, dass wir das Objekt in HTML umwandeln müssen. Es gibt NPM-Module, die verwendet werden können, um portablen Text in verschiedene Verwendungszwecke umzuwandeln. In unserem Fall verwenden wir ein Paket namens block-content-to-html.

 npm install @sanity/block-content-to-html

Dieses Paket rendert das gesamte Standard-Markup aus dem Rich-Text-Editor. Jeder Stiltyp kann überschrieben werden, um dem Markup zu entsprechen, das Sie für Ihren Anwendungsfall benötigen. In diesem Fall lassen wir das Paket für uns arbeiten.

 const blocksToHtml = require('@sanity/block-content-to-html'); // Added to the top async function getSanityData() { const query = `{ "about": *[_type == 'about'][0] }` let data = await client.fetch(query); data.about.content = blocksToHtml({ blocks: data.about.content }) return await data }

Verwenden des Inhalts von Sanity.io in Handlebars

Da die Daten nun in einer Form vorliegen, in der wir sie verwenden können, übergeben wir dies als Datenargument an unsere buildHTML Funktion.

 async function main(src, dist) { const data = await getSanityData(); const html = buildHTML(src, data) fs.writeFile(dist, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); }

Jetzt können wir unser HTML ändern, um die neuen Daten zu verwenden. Wir verwenden mehr Variablenaufrufe in unserer Vorlage, um die meisten unserer Daten abzurufen.

Um unsere Rich-Text- content zu rendern, müssen wir unserer Variablen eine zusätzliche Ebene mit geschweiften Klammern hinzufügen. Dadurch wird Handlebars angewiesen, den HTML-Code zu rendern, anstatt den HTML-Code als Zeichenfolge anzuzeigen.

Für unser externalLinks -Array müssen wir die integrierte Schleifenfunktion von Handlebars verwenden, um alle Links anzuzeigen, die wir unserem Studio hinzugefügt haben.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ about.title }}</title> </head> <body> <h1>The personal homepage of {{ about.fullName }}</h1> {{{ about.content }}} <h2>Bryan is on the internet</h2> <ul> {{#each about.externalLinks }} <li><a href="{{ this.href }}">{{ this.text }}</a></li> {{/each}} </ul> </body> </html>

Bereitstellung einrichten

Bringen wir das live. Wir brauchen zwei Komponenten, damit das funktioniert. Zuerst wollen wir einen statischen Host, der unsere Dateien für uns erstellt. Als Nächstes müssen wir einen neuen Build unserer Website auslösen, wenn Inhalte in unserem CMS geändert werden.

Bereitstellung auf Netlify

Für das Hosting verwenden wir Netlify. Netlify ist ein statischer Site-Host. Es dient statischen Assets, verfügt aber über zusätzliche Funktionen, die dafür sorgen, dass unsere Website reibungslos funktioniert. Sie verfügen über eine integrierte Bereitstellungsinfrastruktur, die unser Knotenskript, Webhooks zum Auslösen von Builds und ein global verteiltes CDN ausführen kann, um sicherzustellen, dass unsere HTML-Seite schnell bereitgestellt wird.

Netlify kann unser Repository auf GitHub beobachten und einen Build basierend auf einem Befehl erstellen, den wir in ihrem Dashboard hinzufügen können.

Zuerst müssen wir diesen Code auf GitHub übertragen. Dann müssen wir im Dashboard von Netlify das neue Repository mit einer neuen Site in Netlify verbinden.

Sobald das angeschlossen ist, müssen wir Netlify mitteilen, wie unser Projekt erstellt werden soll. Im Dashboard gehen wir zu Einstellungen > Build & Deploy > Build-Einstellungen. In diesem Bereich müssen wir unseren „Build-Befehl“ auf „node index.js“ und unser „Publish-Verzeichnis“ auf „./dist“ ändern.

Wenn Netlify unsere Website erstellt, führt es unseren Befehl aus und überprüft dann den von uns aufgelisteten Ordner auf Inhalte und veröffentlicht die darin enthaltenen Inhalte.

Einrichten eines Webhooks

Wir müssen Netlify auch anweisen, eine neue Version zu veröffentlichen, wenn jemand Inhalte aktualisiert. Dazu richten wir einen Webhook ein, um Netlify zu benachrichtigen, dass die Website neu erstellt werden muss. Ein Webhook ist eine URL, auf die programmgesteuert von einem anderen Dienst (z. B. Sanity) zugegriffen werden kann, um eine Aktion im Ursprungsdienst (in diesem Fall Netlify) zu erstellen.

Wir können einen bestimmten „Build-Hook“ in unserem Netlify-Dashboard unter Einstellungen > Build & Deploy > Build-Hooks einrichten. Fügen Sie einen Haken hinzu, geben Sie ihm einen Namen und speichern Sie. Dadurch wird eine URL bereitgestellt, die verwendet werden kann, um einen Build in Netlify aus der Ferne auszulösen.

Als Nächstes müssen wir Sanity anweisen, eine Anfrage an diese URL zu stellen, wenn Sie Änderungen veröffentlichen.

Wir können die Sanity-CLI verwenden, um dies zu erreichen. Innerhalb unseres /studio -Verzeichnisses können wir sanity hook create ausführen, um eine Verbindung herzustellen. Der Befehl fragt nach einem Namen, einem Datensatz und einer URL. Der Name kann beliebig sein, der Datensatz sollte für unser Produkt production werden und die URL sollte die von Netlify bereitgestellte URL sein.

Wenn wir jetzt Inhalte in Studio veröffentlichen, wird unsere Website automatisch aktualisiert. Kein Rahmen notwendig.

  • Den Code finden Sie in diesem GitHub-Repository →

Nächste Schritte

Dies ist ein sehr kleines Beispiel dafür, was Sie tun können, wenn Sie Ihre eigenen Werkzeuge erstellen. Während Sie für die meisten Projekte mehr SSGs mit vollem Funktionsumfang benötigen, kann Ihnen die Erstellung Ihres eigenen Mini-SSGs helfen, besser zu verstehen, was in dem Generator Ihrer Wahl vor sich geht.

  • Diese Site veröffentlicht nur eine Seite, aber mit ein wenig mehr in unserem Build-Skript könnten wir mehr Seiten veröffentlichen. Es könnte sogar einen Blogbeitrag veröffentlichen.
  • Die „Entwicklererfahrung“ fehlt im Repository ein wenig. Wir könnten unser Node-Skript auf jeder Dateispeicherung ausführen, indem wir ein Paket wie Nodemon implementieren oder „Hot Reloading“ mit etwas wie BrowserSync hinzufügen.
  • Die Daten, die in Sanity gespeichert sind, können mehrere Websites und Dienste versorgen. Sie könnten eine Lebenslauf-Website erstellen, die dies verwendet und anstelle einer Webseite ein PDF veröffentlicht.
  • Sie könnten CSS hinzufügen und dies wie eine echte Website aussehen lassen.