JAMSTACK: Aufbau schneller, effizientere Websites heute

Sep 14, 2025
wie man
JAMstack main
(Bildkredite: Zukunft / Joseph Ford)

JAMSTACK ist ein Verfahren zum Erstellen und Servieren von Websites mit minimaler Last, der vom Server erforderlich ist. Es erhält seinen Namen von den im Build-Prozess verwendeten Technologien, JavaScript, APIs und Markup. Die Seiten sind in der Markup-Sprache vorzeitig integriert und als statische HTML-Dateien als Benutzer bedient. Um eine Website zu erstellen und diese Technologien zusammenzubringen, benötigen Sie die richtigen Werkzeuge. Stellen Sie sicher, dass Sie unsere überprüfen beste Code-Editoren. Post, um die beste Entwicklungsumgebung für Sie zu bestimmen.

Wenn ein Benutzer traditionell auf eine Webseite klickt, findet eine Reihe von Aktionen statt. Der Browser des Benutzers sendet eine Anforderung an den Server der Website, er wird über den Backend-Code ausgeführt, generiert die richtige Seite und die Daten werden an den Browser gesendet und als Webseite als Webseite gerendert. Das könnte ziemlich viel schief gehen, und selbst wenn es gut geht, ist es etwas langsamer als ein Benutzer, der sich in der blitzschnellen digitalen Welt wohl fühlt, in der wir jetzt leben.

Bei der Verwendung des JAMSTACK bedeutet jedoch schnellere Sites und weniger, um schief zu gehen. In diesem Tutorial zeigen wir, wie Sie eine Blog-Website im JAMSTACK einrichten, um als Einführung in die Konzepte zu dienen. Die verwendeten Werkzeuge werden sein Hugo. Als statischer Site-Generator, Netlify. als das Build-Tool und Github als kostenloses Hosting für die Dateien.

Um Ihre Website-Erfahrung weiter zu verbessern, stellen Sie sicher, dass Sie das perfekte auswählen Web-Hosting Service und am besten Webseitenersteller .

01. Laden Sie die erforderlichen Werkzeuge herunter

Laden Sie eine Kopie von herunter Victor Hugo - Dies ist eines von mehreren Starter-Kits, um die Dinge schnell vom Boden zu bekommen. Stellen Sie auch sicher, dass Sie haben Knoten in Ihrer Entwicklungsumgebung installiert. 

https://github.com/netlify-templates/victor-hugo

02. Erstellen Sie ein Arbeitsverzeichnis und installieren Sie HUGO

Erstellen Sie ein Verzeichnis und nennen Sie ihn Jamstack . Hier werden wir an unserer Entwicklungsmaschine arbeiten. Extrahieren Sie die heruntergeladenen Dateien für Hugo in dieses Verzeichnis und öffnen Sie ihn in der Eingabeaufforderung. Um alle Abhängigkeiten zu installieren, öffnen Sie die Eingabeaufforderung oder ein Terminal im JAMSTACK-Ordner npm install. 

npm install

03. Starten Sie den Server

JAMstack03

(Bildkredite: Joseph Ford)

Sobald die Abhängigkeiten abgeschlossen sind, führen Sie den NPM-Start aus. Der Entwicklungsserver läuft nun eine lokale Kopie von Victor Hugo, die standardmäßig in localHost: 3000 erreichbar ist: 3000 - Eröffnung dieser Link sollte den Begrüßungsbildschirm anzeigen, wenn alles erfolgreich war. Einmal getestet, drücken Sie Strg + C. um den Server zu stoppen.

04. Fügen Sie eine Seite und einen Beitrag hinzu

JAMstack04

(Bildkredite: Joseph Ford)

Ändern Sie das Verzeichnis in den Ordner Site-Ordner, dann mit der Hugo NEU. Befehl, fügen Sie A hinzu page-one.md. und ein post-ne.md. . Entwickler, die in Windows arbeiten, müssen die HUGO.EXE-Datei herunterladen und einen Pfad hinzufügen, um diese zur Arbeit zu erhalten, aber einfach zu folgen, existiert die Dokumentation auf der Hugo. Webseite. 

 Hugo New Page-one.md
Hugo New Post / Post-one.md

05. Fügen Sie der Seite und dem Beitrag Inhalte hinzu

Zu Testzwecken müssen einige Inhalte dem neuen Beitrag und der Seite "Media-Heavy-Inhalte hinzugefügt werden) hinzugefügt werden. Cloud-Speicherung. ). Öffnen Sie das Verzeichnis für das Projekt in einem Dateibrowser und navigieren Sie zu JAMSTACK / SITE / INHALT. In diesem Ordner die Datei page-one.md. sollte jetzt existieren. Es gibt auch einen Ordner namens Post das enthält das post-ne.md. Öffnen Sie beide Dateien und fügen Sie einige Inhalte in Markierung unterhalb der --- (oder in einigen Fällen +++) hinzu. 

 # Lorem ipsum dolor sitzt amet
## Konsektoradipiscing * Elit *
Sed do eiusmod tempel incididuntunt ug labore
et dolore magna aliqua.

06. Fügen Sie das Thema als Untermodul hinzu

JAMstack06

(Bildkredite: Joseph Ford)

Der in den vorherige Dateien eingegebene Text kann nicht ohne Thema angezeigt werden. Als Beispiel wird das Ananke-Thema verwendet. Löschen Sie den Inhalt des Stroms Site / Layouts. Ordner, der leer lässt. Erstellen Sie ein neues Verzeichnis im Site-Ordner angerufen Themen , dann ändern Sie sie und führen Sie den folgenden Code aus, um das Thema als GIT-Submodul zu importieren. Hinweis: Normalklonen ist nicht mit Netlify kompatibel. 

 MKDIR-Themen
CD-Themen
git Submandulierung Https hinzufügen: // Github
com / & lt; themename & gt; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme.
Ananke.git Themes / Ananke

07. Konfigurieren Sie das Thema und führen Sie den Server aus

Kopieren Sie den Inhalt von Site / Theme / Gohugo-Theme Ananke / Beispiele / config.toml auf denjenigen im Ordner Site. Ersetzen Sie oben auf der Seite die Basis-URL mit ' / ' und löschen Sie die Zeile themesdir = '../ ..' . Speichern Sie die Konfigurationsdatei, öffnen Sie ein Terminal und führen Sie ein NPM-Start. Befehl. Sie können den Namen der Website auch ändern (falls Sie möchten), indem Sie das ersetzen Titel Wert. 

 CD-Site
NPM Start

08. Test in einem Browser

Öffnen http: // localhost: 3000 / page-one / um das Thema anzuzeigen, das die Markierung der Seite als vollständig gestaltete Seite rendern. Die Eröffnung der Homepage ist jetzt der erste Beitrag sichtbar. Dies bedeutet, dass der Statische Site-Generator jetzt funktionsfähig ist.

09. Konfigurieren Sie das Menü

JAMstack09

(Bildkredite: Joseph Ford)

Bei der Anzeige der Website ist es spürbar, dass die zuvor vorgenommene Seite in der Navigation nicht angezeigt wird. Hinzu kommt in den Inhalt, fügen Sie in der Vorderseite eine Zeile hinzu, um HUGO mit dem Menü mitzuteilen, in dem Sie die Seite in rendern können. 

 TOML
+++.
Menü = "Main"
+++.
Yaml.
---
Menü: "Main"
---

10. Drücken Sie die Dateien in einen GitHub

Animieren Sie den Kreis an, um auf Benutzerklicks zu antworten. Nun ist die statische Site in Betrieb, es muss auf einem Entwicklungsserver erreichbar sein. Der erste Schritt ist, den Code in Github zu drücken. Erstellen Sie ein neues Repository auf GitHub und verwenden Sie dann entweder die Befehlszeile, um den Code aus dem Projektordner oder der Github-Desktop-App zu drücken. 

 git Remote add uprend https://github.com/[githubusername(/jamstacktutorial.git
Git Push -u Origin Master

11. Verbinden Sie sich mit Netlify

Netlify bringt alles zusammen, bauen Sie die Site und dient es in einer temporären Domäne. Beginnen Sie mit der Erstellung eines Kontos bei Netlify. und verknüpfen Sie es mit einem Github-Konto. Sobald alles eingerichtet ist, klicken Sie auf Neuer Standort von git .

12. Verbinden Sie sich mit Github

Klicken Sie auf kontinuierliche Bereitstellung auf Github und wählen Sie dann den Repo aus, der früher im Tutorial gemacht wurde. Netlify sollte automatisch die besten Build-Optionen für das Projekt erkennen. Es sollte lesen. npm run brue. . Wenn alles gut ist, klicken Sie auf Bereitstellen.

13. Baue-Site und Ansicht auf NetLify-Link

JAMstack13

(Bildkredite: Joseph Ford)

Sobald die Site gebaut hat, erscheint eine Meldung eingesetzt . Netlify hat die Website einen temporären Domänennamen gegeben, der möglicherweise nicht sinnvoll ist. Dies kann einfach durch Klicken auf Site-Einstellungen geändert werden. Ändern Sie den Namen und dann auf den Link, um die durch den JAMSTACK geladene Site anzuzeigen.

14. Machen Sie eine Änderung der Testbereitstellung

Die Website lädt jetzt durch den JAMSTACK. Es ist schnell Blitz, und es aktualisiert automatisch, wenn ein Commit an Github erfolgt. Um dies zu testen, kehren Sie in die lokale Entwicklungsumgebung zurück und laufen Sie Hugo New Page-thre.md. aus dem Site-Verzeichnis. Öffnen Sie dann die erstellte Datei, fügen Sie einige Inhalte hinzu, klicken Sie auf Speichern und begehen Sie die Datei in den Repo. Innerhalb von Momenten werden Sie bemerken, dass das Update in der Netlify-Verbindung live ist.

15. Fügen Sie Ihrer statischen Site ein CMS hinzu

Arbeiten in der einfachen Markierung und der Verwendung der Befehlszeile, um Seiten zu erstellen, sitzt nicht gut mit den meisten Kunden. Um die Website freundlicher zu gestalten, installieren Sie ein Content-Management-System. Forestry.io. ist perfekt für das aktuelle Setup. Gehen Sie zur Website und erstellen Sie ein Konto mit GitHub.

16. Forstwirtschaft konfigurieren.

Klicken Sie auf Neue Site hinzufügen und wählen Sie HUGO als Static Site Generator aus, git als Anbieter git als Anbieter und füllen Sie die Informationen in den folgenden Formularen aus. Klicken Sie auf Senden, und die neue CMS lädt, um sich für Inhaltsänderungen bereitzustellen. Nun können Seiten einfach von der Seitenleiste sowie von Beiträgen und einem großen Array anderer Optionen bearbeitet werden.

Möchten Sie mehr über Webdesign erfahren? Dann Net abonnieren Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

Erfahren Sie, wie Sie bei GenerateJs besser JavaScript aufbauen (Bildkredite: Zukunft / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / TOA Heftiba, Unklasse)

Begleiten Sie uns im April 2020 mit unserer Aufstellung von JavaScript-Superstars bei GenerateJs - der Konferenz, die Ihnen dabei hilft, besser JavaScript zu bauen. Jetzt buchen generateconf.com

Weiterlesen:

  • 8 HTML-Tags, die Sie verwenden müssen (und 5, um zu vermeiden)
  • 25 der besten Javascript-APIs
  • So verbergen Sie Ihren JavaScript-Code aus der Source-Source

wie man - Die beliebtesten Artikel

So erstellen Sie eine Comic-Seite

wie man Sep 14, 2025

Dieses Tutorial zeigt Ihnen, wie Sie eine COMIC-Seite erstellen. Obwohl wir verwenden Clip Studiofarbe Hier gibt e..

So erstellen Sie ein Logo in Photoshop

wie man Sep 14, 2025

Bevor Sie anfangen, wie man ein Logo in Photoshop herstellt, sollten wir den Elefanten im Raum ansprechen - Photoshop CC...

Erstellen Sie ein ansprechendes Layout mit CSS-Gitter

wie man Sep 14, 2025

CSS-Gitterlayout. Wächst jeden Tag in der Browserunterstützung, und wir können CSS-Gitter zur Produktion versenden..

Erstellen Sie einen realistischen Fantasie-Ritter

wie man Sep 14, 2025

In diesem Workshop zeigen wir Ihnen, wie Sie einen Ritter mit verwenden können Photoshop. sowie Malen mit traditi..

Lackgesteuerte und glatte Striche mit Sketchable

wie man Sep 14, 2025

Skizzierbar ist eine Malerei-App für Windows 10. Es ermöglicht Ihnen, große Hübe auf großen Bildern ohne Verzögerung zu malen. Bilder werden in 'Journalen' erstellt, von den..

Wie erstellt man eine vollseitige Website in Winkel

wie man Sep 14, 2025

Seite 1 von 4: Seite 1 Seite 1 Seite 2 Seite 3 ..

Beginnen Sie in Amazon Lumberyard: Einrichten von

wie man Sep 14, 2025

Amazon's New Game Engine, Holzplatz , ist frei und großartig für jedermann mit einem angehenden Interesse an der..

Wie gestaltet man ein Promo für eine imaginäre Marke

wie man Sep 14, 2025

Bei der Gestaltung einer Marke, egal ob ein etablierter Eins oder ein Start, den Sie an der kreativen Führung einnehmen, ist die Konsistenz über alle Berührungspunkte der Schlüssel. ..

Kategorien