Jamstack: Byg hurtigere, mere effektive hjemmesider i dag

Sep 13, 2025
hvordan
JAMstack main
(Billedkredit: Fremtid / Joseph Ford)

Jamstack er en metode til oprettelse og servering af websteder med minimal belastning, der kræves af serveren. Det får sit navn fra de teknologier, der anvendes i Build-processen, JavaScript, API'er og Markup. Sider er bygget i Markup-sprog på forhånd og fungerede som statiske HTML-filer, da en bruger anmoder dem. For at opbygge et websted og bringe disse teknologier sammen, har du brug for de rigtige værktøjer. Sørg for at tjekke vores Bedste Kode Redaktioner Indlæg for at hjælpe med at bestemme det bedste udviklingsmiljø for dig.

Traditionelt, når en bruger klikker på en webside, finder en række handlinger sted. Brugers browser sender en anmodning til webstedets server, den løber gennem backend-koden, genererer den korrekte side, og dataene sendes tilbage til browseren og gengives som en webside. Helt meget, der kunne gå galt, og selv når det går godt, er det lidt langsommere end en bruger er komfortabel med i lynet hurtig digital verden, vi nu bor i.

Men ved hjælp af jamstak betyder hurtigere mere effektive steder og mindre at gå galt. I denne vejledning demonstrerer vi, hvordan vi opretter et blogwebsted i Jamstakket for at fungere som en introduktion til begreberne. De anvendte værktøjer vil være Hugo. som en statisk site generator, Netlify. som bygningsværktøjet og Github. som gratis hosting for filerne.

For yderligere at forbedre din webstedsoplevelse, skal du sørge for at vælge den perfekte Web Hosting. service, og bedst Website Builder. .

01. Download de nødvendige værktøjer

Download en kopi af Victor Hugo. - Dette er en af ​​flere startpakker for hurtigt at få tingene væk fra jorden. Også sørg for at du har node installeret på dit udviklingsmiljø. 

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

02. Opret en arbejdskatalog og installer Hugo

Opret en mappe og navngiv det Jamstack. . Det er her, vi vil arbejde på vores udviklingsmaskine. Udpak de downloadede filer til Hugo i denne mappe og åbn den i kommandoprompt. For at installere alle afhængigheder, skal du åbne kommandoprompt eller en terminal i Jamstack-mappen og køre NPM Install. 

npm install

03. Start serveren

JAMstack03

(Billedkredit: Joseph Ford)

Når afhængighederne er færdige, skal du køre NPM Start. Udviklingsserveren kører nu en lokal kopi af Victor Hugo, tilgængelig som standard på LocalHost: 3000 - Åbning af, at link skal vise velkomstskærmen, hvis alt var vellykket. Når det er testet, skal du trykke på Ctrl. + C. for at stoppe serveren.

04. Tilføj en side og et indlæg

JAMstack04

(Billedkredit: Joseph Ford)

Skift mappe til sidemappen, derefter ved hjælp af Hugo New. kommando, tilføj en side-one.md. og A. post-one.md. . Udviklere, der arbejder i Windows, skal downloade Hugo.exe-filen og tilføje en sti for at få dette til at fungere, men det er nemt at følge dokumentationen på Hugo. internet side. 

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

05. Tilføj indhold til siden og post

Til testformål skal der tilføjes noget indhold til den nye post og side (få mediehunkende indhold? Bag det op med det bedste Sky lagring ). Åbn mappen for projektet i en filbrowser og naviger til jamstak / site / indhold. Inden for denne mappe filen side-one.md. bør nu eksistere. Der er også en mappe med navnet stolpe som indeholder post-one.md. Åbn begge disse filer og tilføj noget indhold i Markdown under --- (eller i nogle tilfælde +++) 

 # LOREM IPSUM DOLOR SIT AMET
## CONSECTETUR Adipiscing * Elit *
Sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.

06. Tilføj temaet som et undermodul

JAMstack06

(Billedkredit: Joseph Ford)

Teksten indtastet i de foregående filer kan ikke ses uden et tema. Som et eksempel vil ANANKE-temaet blive brugt. Slet indholdet af strømmen Site / Layouts. mappe, efterlader det tomt. Lav en ny mappe i den mappe, der kaldes Temaer. , så skift til det og kør følgende kode for at importere temaet som en GIT submodule. Bemærk: Normal kloning er ikke kompatibel med Netlify. 

 Mkdir temaer
CD-temaer.
git submodule Tilføj https: // github
com / & lt; themeCreator & gt; / lt; themename & gt;
https://github.com/budparr/gohugo-theme.
ananke.git temaer / ananke

07. Konfigurer temaet og kør serveren

Kopier indholdet af Site / Temaer / GOHUGO-TEMA ANANKE / EXECKLESITE / CONFIG.TOML til over den i mappen Site. Øverst på siden skal du udskifte base URL med ' / ' og slet linjen themesdir = '../ ..' . Gem config-filen, åben en terminal og kør NPM Start. kommando. Du kan også ændre navnet på hjemmesiden (hvis du vil) ved at erstatte titel værdi. 

 CD-webstedet
NPM Start

08. Test i en browser

Åben http: // localhost: 3000 / side-one / For at se temaet gør markeringen af ​​siden som en fuldt indrettet side. Åbning af hjemmesiden, det første indlæg vil nu være synligt. Det betyder, at den statiske webstedgenerator nu er funktionel.

09. Konfigurer menuen

JAMstack09

(Billedkredit: Joseph Ford)

Når du ser hjemmesiden, er det mærkbart, at den tidligere, der foretages tidligere, ikke vises i navigationen. Tilbagevendende til indholdet skal du tilføje en linje i forsiden-konfigurationen for at fortælle Hugo hvilken menu for at gøre siden i. 

 Toml
+++
Menu = "Main"
+++
YAML.
---
Menu: "Main"
---

10. Tryk på filerne til en github

Dernæst animere cirklen for at reagere på brugerens klik. Nu er det statiske websted i gang, det skal være tilgængeligt på en udviklingsserver. Det første skridt er at skubbe koden til GitHub. Opret et nyt depot på Github, og brug derefter kommandolinjen til at skubbe koden fra projektmappen eller Github Desktop-appen. 

 GIT Remote Tilføj Origin https://github.com/[githubusername]/jamstacktutorial.git
git push -u oprindelse master

11. Opret forbindelse til Netlify

NetLify vil bringe alt sammen, bygge webstedet og tjene det på et midlertidigt domæne. Start af ved at oprette en konto hos Netlify. og link det med en Github-konto. Når alt er oprettet, klik på Nyt websted fra git .

12. Tilslut til GitHub

Til kontinuerlig implementering skal du klikke på Github. , og vælg derefter den repo, der blev foretaget tidligere i vejledningen. NetLify bør automatisk registrere de bedste opbygningsmuligheder for projektet. Det bør læses NPM Run Build. . Hvis alt er godt, så klik derefter på Deployment.

13. Byg site og se på Netlify Link

JAMstack13

(Billedkredit: Joseph Ford)

Når webstedet har bygget, vises en meddelelse, der siger implementeret. . NetLify har givet hjemmesiden et midlertidigt domænenavn, som måske ikke giver mening - dette kan ændres blot ved at klikke på Site Settings. Skift navnet, og klik derefter på linket for at se webstedet, der er lagt gennem JAMSTACK.

14. Gør en ændring for at teste implementering

Webstedet indlæser nu gennem jamstakken. Det er lyn hurtigt, og det opdateres automatisk, når en forpligtelse er lavet til GitHub. For at teste dette, vende tilbage til det lokale udviklingsmiljø og løbe Hugo New Page-Three.md. fra webstedet mappe. Åbn derefter den oprettede fil, tilføj noget indhold, klik på Gem og begå filen til repo. Inden for øjeblikke vil du bemærke, at opdateringen er live på netlify link.

15. Tilføj et CMS til dit statiske websted

Arbejder i almindelig markering og brug af kommandolinjen for at oprette sider vil ikke sidde godt med de fleste klienter. For at gøre hjemmesiden mere venlig, installer et content management system. Skovbrug.io er en perfekt pasform til den aktuelle opsætning. Gå til hjemmesiden og opret en konto ved hjælp af GitHub.

16. Konfigurer skovbrug

Klik på Tilføj nyt websted og vælg Hugo som den statiske webstedgenerator, git som udbyder og udfyld oplysningerne i de følgende formularer. Klik på Send, og det nye CMS vil indlæse, klar til indholdsændringer. Nu kan sider simpelthen redigeres fra sidebjælken, samt stillinger og et stort udvalg af andre muligheder.

Vil du vide mere om webdesign? Derefter Abonner på Net. , verdens bedst sælgende magasin til webdesignere og udviklere.

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

Lær at bygge bedre JavaScript på EMERDJS (Billedkredit: Fremtid / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Deltag i USA i april 2020 med vores lineup af JavaScript Superstars på Embrudejs - Konferencen hjælper dig med at opbygge bedre JavaScript. Book nu AT. generateconf.com

Læs mere:

  • 8 HTML-tags, du skal bruge (og 5 for at undgå)
  • 25 af de bedste JavaScript API'er
  • Sådan skjuler du din JavaScript-kode fra Vis kilde

hvordan - Mest populære artikler

Sådan tegner du muskler

hvordan Sep 13, 2025

At vide, hvordan man tegner muskler i bevægelse, vil tilføje fluiditet og bevægelse til et stillbillede. Denne vejledning vil ..

Opret en scene med Renderman til Maya

hvordan Sep 13, 2025

(Billedkredit: Jeremy Heintz) I denne Renderman for Maya Tutorial dækker vi en række emner, der starter fra at skab..

Opret en fleksibel karruselkomponent

hvordan Sep 13, 2025

Vue.js er kommet på spring og grænser for nylig, bliver det sjette mest forked projekt hidtil på Github. På ti..

Sådan maler du et bybillede med farveblokke

hvordan Sep 13, 2025

Storslået udsigt, fantastiske skyliner og smukke bybilleder gør gode fotografier, men kan være ret skræmmende fra kunstnerens..

5 ting, du ikke vidste, at du kunne gøre med HTML

hvordan Sep 13, 2025

Lad os se det, webudvikling kan nemt blive et rod. HTML, CSS og JavaScript. har alle udviklet sig fra ydmyge oprin..

Sådan formidles lyd i et maleri

hvordan Sep 13, 2025

Selvom det ikke er muligt at vise lyd i et konventionelt, stillbillede (multimedie interaktivitet til side), er det muligt at ant..

Sådan tegner du en våd figur

hvordan Sep 13, 2025

At male en figur, der ser troværdigt vådt, kræver, at du tager højde for en række faktorer - en nøgle, der er den type stof..

Kombiner traditionelle og digitale færdigheder til at oprette et tegneserie

hvordan Sep 13, 2025

I årevis blev jeg skræmt ved at arbejde digitalt. Noget om plastiknib på en plastoverflade følte for jarring til mig. Jeg els..

Kategorier