Der Anfängerleitfaden für statische Site-Generatoren

Blog

Der Anfängerleitfaden für statische Site-Generatoren

Der Anfängerleitfaden für statische Site-Generatoren

In diesem Artikel werde ich fünf beliebte statische Site-Generatoren und ihre Hauptfunktionen auflisten, damit Sie sich eine bessere Vorstellung davon machen können, welcher davon für Ihr Projekt geeignet ist.



Nehmen wir an, Ihr nächstes Projekt wird ein einfaches HTML-Website für einen Lebenslauf, die Vermarktung eines Produkts oder einer Dienstleistung, die Dokumentation Ihrer Software oder ähnliches. Eine großartige Option für Sie ist die Erstellung Ihrer **Website **mit statische Site-Generatoren (SSG) .

Es gibt Tonnen von statischen Site-Generatoren in einer Reihe von Programmiersprachen , wie zum Beispiel JavaScript, Ruby, Go - Die Liste geht weiter.



Ich behaupte nicht, dass ich die endgültige Liste der **SSGs ** bereitgestellt habe oder dass ich persönlich eine der Software, die ich in meine Liste einfüge, gegenüber jeder anderen, die auf dem Markt erhältlich ist, bevorzuge. Alle Produkte in der Liste sind jedoch beliebt, leistungsstark, gut dokumentiert und gut unterstützt.

Eisen-Titan-Kryptopreis

Was sind statische Site-Generatoren?

Ein gängiges **CMS **( Content-Management-System ), wie zum Beispiel WordPress, erstellt die Webseite dynamisch wie es vom Kunden angefordert wird: es sammelt alle **Daten **aus dem Datenbank , und **verarbeitet **den **Inhalt **über eine Vorlagen-Engine.



Auf der anderen Seite a statischer Site-Generator :

verfolgt einen anderen Ansatz und generiert alle Seiten der Website einmal, wenn tatsächlich Änderungen an der Website vorgenommen werden. Das bedeutet, dass die bereitgestellte Website keine beweglichen Teile enthält. Das Caching wird viel einfacher, die Leistung steigt und statische Sites sind viel sicherer. – StaticGen .
Wenn Sie neugierig sind und mehr erfahren möchten, ist dies großartig Artikel von Brian Rinaldi schaut sich das Innenleben von . genau an statische Site-Generatoren .

Lassen Sie uns nun einige Optionen durchgehen.

1. Hugo

Hugo ist sehr beliebt statischer Site-Generator mit über 32.000 Sternen auf **GitHub **jetzt. Es ist geschrieben in gehen , und bewirbt sich als das schnellste Framework für Webseiten erstellen . Tatsächlich kommt **Hugo ** mit einem schnellen Build-Prozess, der statische Websites erstellen ein Kinderspiel und eignet sich hervorragend für **Blogs ** mit vielen Posts.

Die Dokumentation ist großartig und die Hugo-Website bietet eine fantastische Schnellstartanleitung Damit sind Sie im Handumdrehen mit der Software einsatzbereit.

brainhubeu/react-karussell

Hier sind einige von Hugos beste Eigenschaften :

  • Auf Geschwindigkeit ausgelegt und optimiert: Als Faustregel gilt, dass jeder Inhalt in etwa 1 Millisekunde gerendert wird
  • Es müssen keine zusätzlichen Plugins für Dinge wie Paginierung, Umleitung, mehrere Inhaltstypen und mehr installiert werden
  • Reichhaltiges Themensystem
  • Shortcodes verfügbar als Alternative zur Verwendung von Markdown
  • Hugo bietet seit Juli 2018 eine leistungsstarke Asset-Pipeline, Hugo Pfeifen .

2. Next.js

Nächste ist ein vielseitiges Framework für die Erstellung von Server-gerenderten oder statisch exportierten JavaScript-Apps . Es baut auf **React ** auf und wird erstellt von Zeit .

Installieren Nächste , führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install --save next react react-dom

Dann füge dieses Skript zu deinem |_+_| . hinzu Datei:

package.json

Damit ist jeder |_+_| Datei wird zu einer Route, die automatisch verarbeitet und gerendert wird.

Next.js verfügt über großartige Dokumente, in denen Sie mehr über das Erstellen und Anpassen Ihrer Next-basierten Apps erfahren.

Hier sind ein paar Dinge, in denen Next sehr gut ist:

  • Next rendert standardmäßig auf dem Server, was für die Leistung großartig ist. Eine Diskussion über die Vor- und Nachteile des serverseitigen Renderings finden Sie unter Dieser Beitrag von Alex Grigoryan auf Medium
  • Kein Setup notwendig: automatisches Code-Splitting, Routing und Hot Reload aus der Box
  • Erweiterbarkeit: Fühlen Sie sich frei, Ihr Setup anzupassen, indem Sie die Kontrolle über Webpack und Babel, Routing und Plugins übernehmen
  • Groß Dokumente , Tutorials, Quiz und Beispiele um Sie vom Anfänger bis zum fortgeschrittenen Benutzer zum Laufen zu bringen
  • Offizielle und Community-Plugins verfügbar
  • Tonnen von Beispiel-Apps um Ihnen den Einstieg zu erleichtern.

3. Gatsby

Gatsby Funktioniert hervorragend für Dokumentationen und Blogs, es ist in **React** integriert und nutzt GraphQL zum Manipulieren von Daten. Wenn Sie neugierig sind und tiefer eintauchen möchten, schauen Sie vorbei So erstellen Sie Ihre statische Site mit Gatsby und der Dokumente auf der Gatsby website .

Hier sind einige der Stärken von Gatsby:

  • Mit Gatsby arbeiten Sie mit den neuesten Webtechnologien . Reagieren , Webpack , modernes JS, CSS, usw. alles bereit für Sie, um einfach mit der Codierung Ihrer Site zu beginnen
  • Das reichhaltige Plugin-Ökosystem von Gatsby ermöglicht es Ihnen, jede Art von Daten, die Sie bevorzugen, aus einer oder mehreren Quellen zu verwenden
  • Einfache Bereitstellung und Skalierbarkeit, was hauptsächlich darauf zurückzuführen ist, dass Gatsby statische Seiten erstellt, die keine komplizierten Setups erfordern
  • Gatsby ist ein Progressive Web-Apps (PWA) Generator. Sie erhalten Code- und Datensplitting out-of-the-box. Gatsby lädt nur die kritischen HTML , CSS , Daten , und **JavaScript **, damit Ihre Website so schnell wie möglich geladen wird. Nach dem Laden ruft Gatsby Ressourcen für andere Seiten vorab ab, sodass sich das Klicken auf der Website unglaublich schnell anfühlt. ( Gatsby website )
  • Es stehen Ihnen viele Starter-Sites zur Verfügung, die Sie frei abrufen und anpassen können.

Schauen Sie sich unser Tutorial an, das Ihnen zeigt So erstellen Sie Ihre erste statische Website mit Gatsby .

4. Nuxt.js

Nuxt.js ist ein übergeordnetes Framework, das mit Vue.js Damit können Sie produktionsreife Web-Apps erstellen. Mit Nuxt Sie können wählen zwischen:

Pascal Coin Wallet Adresse
  • Serverseitiges Rendering für Ihre Website, auch genannt Universal- oder isomorph Modus. Nuxt verwendet einen Node-Server, um zu liefern HTML-basiert An Komponentenansicht
  • Statische Site-Generierung. Mit Nuxt können Sie statische Websites basierend auf Ihrer Vue-Anwendung erstellen
  • Single Page Apps (SPAs .) ). Nuxt bietet Ihnen die Konfiguration und das Framework zum Aufbau Ihres Vue-basierten SPA.

Das Erstellen von Nuxt-basierten Websites kann sehr schnell erfolgen. Hier ist die Hallo Welt Beispiel auf der Nuxt-Website. Sie können es auf Ihren Computer herunterladen oder auf Codesandbox damit spielen, um loszulegen.

Hier sind einige der Funktionen von Nuxt.js:

  • Großartige Leistung: Nuxt-basierte Apps sind out-of-the-box optimiert
  • Modular: Nuxt ist mit einer leistungsstarken modularen Struktur aufgebaut. Es gibt mehr als 50 Module, aus denen Sie wählen können, um Ihre Entwicklungserfahrung zu beschleunigen
  • Relativ einfache Lernkurve. Nuxt basiert auf Vue, einem Framework, das einen schnellen und schmerzlosen Einstieg ermöglicht
  • Integriertes Zustandsmanagement mit Vuex
  • Automatische Code-Aufteilung
  • ES6/ES7-Transpilation
  • Bündelung und Minimierung von JS & CSS
  • |_+_| . verwalten Element (|_+_|, |_+_| usw.)
  • Vorprozessor: Sass, Less, Stylus usw.

5. VuePress

VuePress ist ein Vue-betriebener statischer Site-Generator . Das Standardthema ist für das Schreiben technischer Dokumente optimiert, daher funktioniert es für diese Art von Site sofort nach dem Auspacken hervorragend.

Eine **VuePress**-Site funktioniert als Einzelseiten-App (SPA) das nutzt die Kraft von Gesehen , Router-Ansicht und Webpack .

Um VuePress global zu installieren, führen Sie einfach diesen Befehl in Ihrem Terminal aus:

{ 'scripts': { 'dev': 'next', 'build': 'next build', 'start': 'next start' } }

Führen Sie dann Folgendes aus, um eine Markdown-Datei zu erstellen:

von Coinbase zu Paypal abheben
.js

Um mit dem Schreiben zu beginnen, führen Sie Folgendes aus:

Führen Sie zum Erstellen Ihrer Website Folgendes aus:

Hier sind einige großartige Funktionen, die VuePress zu bieten hat:

  • Das Einrichten Ihrer VuePress-basierten Website ist schnell und Sie können Ihre Inhalte mit Markdown . schreiben
  • VuePress basiert auf Vue, was bedeutet, dass Sie das Web-Erlebnis von Vue, Webpack, die Möglichkeit, Vue-Komponenten in Markdown-Dateien zu verwenden und mit Vue benutzerdefinierte Designs zu entwickeln, genießen können
  • Schnelles Ladeerlebnis: Statische VuePress-Sites bestehen aus vorgerendertem statischem HTML und werden als SPA ausgeführt, sobald sie in den Browser geladen wurden
  • Mehrsprachige Unterstützung standardmäßig mit i18n. Das Einrichten anderer Sprachen ist ebenfalls recht einfach, indem Sie ein |_+_| . hinzufügen widersprechen dem |_+_| Objekt in den |_+_| . Ihres VuePress-basierten Projekts Datei.

Nuxt.js oder VuePress?

Beide Nuxt.js und **VuePress ** bauen auf Vue.js auf und ermöglichen das Erstellen statischer Websites. Also, welches ist dem anderen vorzuziehen?

Nehmen wir an, Nuxt.js kann alles, was VuePress tut. Im Wesentlichen eignet sich Nuxt jedoch am besten für Bauanwendungen. VuePress hingegen ist ideal zum Erstellen statischer Dokumentationswebsites, die in Markdown geschriebene Inhalte anzeigen. Eine Diskussion über das GitHub-Repo des Projekts wird im Hinblick auf Dadurch ist VuePress auch für funktionsreiche Blogging-Sites geeignet . Um mehr darüber zu erfahren, wie Sie mit VuePress einen einfachen Blog einrichten können, gehen Sie zu Erstellen eines Blogs mit VuePress von Adam Collier.

eckiger Upload mehrerer Dateien

Kurz gesagt, wenn Sie nur eine Dokumentationsseite oder einen sehr einfachen Blog in Vue.js benötigen, ziehen Sie in Betracht, nach VuePress zu greifen – Nuxt wäre übertrieben.

So wählen Sie einen statischen Site-Generator aus

Bei all den verfügbaren Optionen ist es leicht, sich wie gelähmt zu fühlen, wenn es darum geht, einen statischen Site-Generator auszuwählen, der zu seiner Rechnung passt. Es gibt einige Überlegungen, die Ihnen helfen könnten, das Angebot zu durchsuchen.

Die Anforderungen Ihres Projekts sollten ein wenig Licht auf die Funktionen werfen, nach denen Sie in Ihrem SSG suchen sollten.

Wenn Ihr Projekt viele sofort einsatzbereite dynamische Funktionen benötigt, könnten Hugo und Gatsby eine gute Wahl sein. Was die Build- und Bereitstellungszeit angeht, schneiden alle oben aufgeführten SSGs sehr gut ab, obwohl Hugo der Favorit zu sein scheint, insbesondere wenn Ihre Website viel Inhalt hat.

Ist Ihr Projekt ein Blog oder eine persönliche Website? In diesem Fall könnten Hugo und Gatsby eine ausgezeichnete Wahl sein, während VuePress für eine einfache Dokumentationswebsite eine gute Wahl wäre. Wenn Sie eine E-Commerce-Website planen, sollten Sie sich überlegen, welche SSG gut zu einem Headless-CMS für die Filialverwaltung passt. In diesem Fall könnten Gatsby und Nuxt ziemlich gut funktionieren.

Eine weitere Sache, die Sie berücksichtigen sollten, ist Ihre Vertrautheit mit jeder der SSG-Sprachen. Wenn Sie in Go programmieren, ist Hugo höchstwahrscheinlich Ihre bevorzugte Wahl. Die verbleibenden Optionen basieren entweder auf React (Next und Gatsby) oder Vue (Nuxt und VuePress).

In Bezug auf Dinge wie großartige Dokumentation, starke Community und Unterstützung zählen alle von mir aufgeführten statischen Site-Generatoren zu den beliebtesten oder gewinnen schnell an Popularität wie VuePress.

Haben Sie statische Site-Generatoren für ein Projekt verwendet? Welcher? Wie hat Ihnen die Erfahrung gefallen?

# Webentwicklung # vue-js # nuxt-js