Jamstack: Bygg raskere, mer effektive nettsteder i dag

Sep 17, 2025
hvordan
JAMstack main
[1. 3]
(Bilde Kreditt: Fremtid / Joseph Ford)

Jamstack er en metode for å lage og betjene nettsteder med minimal belastning som kreves av serveren. Det blir navnet fra teknologiene som brukes i byggeprosessen, JavaScript, APIer og Markup. Sider er innebygd i Markup-språket på forhånd og serveres som statiske HTML-filer som en bruker ber om dem. Å bygge et nettsted og ta med disse teknologiene sammen, trenger du de riktige verktøyene. Sørg for at du sjekker ut vår Beste kode redaktører post for å hjelpe til med å bestemme det beste utviklingsmiljøet for deg.

Tradisjonelt, når en bruker klikker på en nettside, finner en rekke handlinger sted. Brukerens nettleser sender en forespørsel til nettstedets server, den går gjennom backend-koden, genererer den riktige siden, og dataene sendes tilbake til nettleseren og gjengis som en nettside. Ganske mye som kan gå galt, og selv når det går bra, er det litt tregere enn en bruker er komfortabel med i Lightning Rask digital verden vi nå bor i.

Men å bruke Jamstack betyr raskere mer effektive steder og mindre å gå galt. I denne opplæringen demonstrerer vi hvordan du konfigurerer et blogg nettsted i Jamstack for å fungere som en introduksjon til konseptene. Verktøyene som brukes vil være Hugo. Som en statisk sideregenerator, Netlify. som byggverktøyet og GitHub. som gratis hosting for filene.

For ytterligere å forbedre din nettstedopplevelse, sørg for at du velger den perfekte Web Hosting. service, og beste Nettstedbygger .

01. Last ned de nødvendige verktøyene

Last ned en kopi av Victor Hugo. - Dette er en av flere startpakker for å få ting fra bakken raskt. Pass også på at du har node installert på utviklingsmiljøet ditt. 

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

02. Lag en arbeidskatalog og installer Hugo

Opprett en katalog og navngi den Jamstack. . Det er her vi skal jobbe på vår utviklingsmaskin. Utdrag de nedlastede filene for Hugo i denne katalogen og åpne den i kommandoprompt. For å installere alle avhengigheter, åpne kommandoprompt eller en terminal i JAMSTACK-mappen og kjøre npm installasjon 

npm install

03. Start serveren

JAMstack03

(Bilde Kreditt: Joseph Ford)

Når avhengighetene er ferdige, må du starte NPM. Utviklingsserveren kjører nå en lokal kopi av Victor Hugo, som er tilgjengelig som standard på LocalHost: 3000 - Åpning som lenken skal vise velkomstskjermbildet hvis alt var vellykket. Når du har testet, trykker du på CTRL. + C. å stoppe serveren.

04. Legg til en side og et innlegg

JAMstack04

(Bilde Kreditt: Joseph Ford)

Endre katalog til mappen Site, og deretter ved hjelp av Hugo Ny kommando, legg til en side-one.md. og A. post-one.md. . Utviklere som arbeider i Windows, må laste ned HUGO.EXE-filen og legge til en bane for å få dette til å fungere, men lett å følge dokumentasjonen finnes på Hugo. Nettstedet. 

 Hugo New Page-ONE.MD
Hugo nytt innlegg / post-one.md

05. Legg til innhold på siden og legg inn

For testing må noe innhold legges til det nye innlegget og siden (fikk medie-tungt innhold? Tilbake det opp med det beste skylagring ). Åpne katalogen for prosjektet i en filbrowser og naviger til Jamstack / Site / Content. Innenfor denne mappen filen side-one.md. bør nå eksistere. Det er også en mappe som heter post som inneholder den post-one.md. Åpne begge disse filene og legg til noe innhold i Markdown under --- (eller i noen tilfeller +++) 

 # Lorem Ipsum Dolor Sit Amet
## Consectetur adipiscing * elit *
Sed do eusmod incididunt utabore
et Dolore Magna Aliqua.

06. Legg til temaet som en undermodul

JAMstack06

(Bilde Kreditt: Joseph Ford)

Teksten som er oppgitt i de forrige filene, kan ikke vises uten et tema. Som et eksempel vil ananke-temaet bli brukt. Slett innholdet i dagens Site / Layouts mappe, forlater den tom. Lag en ny katalog i mappen Site Center temaer , og deretter endre til den og kjør følgende kode for å importere temaet som en git submodule. MERK: Normal kloning er ikke kompatibel med Netlify. 

 mkdir temaer
CD-temaer
GIT Submodule ADD HTTPS: // GitHub
com / & lt; themecreator & gt; / & lt; themeName & gt;
https://github.com/budparr/gohugo-theme.
Ananke.Git Temaer / Ananke

07. Konfigurer temaet og kjør serveren

Kopier innholdet i Nettsted / temaer / gohugo-tema Ananke / ExamplessSite / config.toml til over den i Site-mappen. Øverst på siden, erstatt basisadressen med ' / ' og slett linjen themesdir = '../ ..' . Lagre konfigurasjonsfilen, åpne en terminal og løp NPM start kommando. Du kan også endre navnet på nettstedet (hvis du vil) ved å erstatte tittel verdi. 

 CD-siden
NPM Start

08. Test i en nettleser

Åpen http: // localhost: 3000 / side-one / For å se temaet som gjør markdownen på siden som en fullt utlignet side. Å åpne hjemmesiden, det første innlegget vil nå være synlig. Dette betyr at den statiske nettstedgeneratoren nå er funksjonell.

09. Konfigurer menyen

JAMstack09

(Bilde Kreditt: Joseph Ford)

Når du ser på nettsiden, er det merkbart at siden som tidligere ikke vises i navigasjonen. Tilbake til innholdet, legg til en linje i frontstoffkonfigurasjonen for å fortelle Hugo hvilken meny for å gjøre siden i. 

 Toml
+++
Meny = "Main"
+++
Yaml.
-
Meny: "Main"
---

10. Skyv filene til en Github

Neste, animere sirkelen for å svare på brukerklikk. Nå er det statiske nettstedet oppe, det må være tilgjengelig på en utviklingsserver. Det første trinnet er å skyve koden til Github. Opprett et nytt arkiv på Github, og bruk enten kommandolinjen til å skyve koden fra prosjektmappen eller GitHub-skrivebordet. 

 Git Remote Legg til opprinnelse https://github.com/t_githubusername]/JamstackTutorial.Git
git push -u opprinnelse master

11. Koble til NetLify

Netlify vil bringe alt sammen, bygge nettstedet og servere det på et midlertidig domene. Start av ved å opprette en konto på Netlify. og knytt den med en Github-konto. Når alt er satt opp, klikk Nytt nettsted fra git .

12. Koble til GitHub

For kontinuerlig distribusjon, klikk GitHub. , velg deretter repo som ble gjort tidligere i opplæringen. Netlify bør automatisk oppdage de beste byggealternativene for prosjektet. Det bør leses NPM Run Build. . Hvis alt er bra, klikk deretter Distribuere.

13. Bygg nettsted og vis på Netlify Link

JAMstack13

(Bilde Kreditt: Joseph Ford)

Når nettstedet har bygget, vises en melding som sier distribuert . NetLify har gitt nettsiden et midlertidig domenenavn som kanskje ikke er fornuftig - dette kan endres ved å klikke på nettstedinnstillinger. Endre navnet, og klikk deretter på linken for å se nettstedet lastet gjennom Jamstack.

14. Gjør en endring for å teste distribusjon

Nettstedet laster nå gjennom Jamstack. Det er lyn raskt, og det oppdateres automatisk når en forpliktelse er laget for GitHub. For å teste dette, gå tilbake til det lokale utviklingsmiljøet og kjøre Hugo New Page-three.md. fra nettstedet katalogen. Deretter åpner du den opprettede filen, legger til noe innhold, klikker på Lagre og forplikter filen til repo. Innenfor øyeblikk vil du legge merke til at oppdateringen er live på NetLify-lenken.

15. Legg til en CMS til ditt statiske nettsted

Arbeide i vanlig markup og bruk av kommandolinjen for å lage sider, vil ikke sitte godt med de fleste klienter. For å gjøre nettstedet mer vennlig, installer et innholdsstyringssystem. Skogbruk.io. er en perfekt passform for det nåværende oppsettet. Gå til nettsiden og opprett en konto ved hjelp av GitHub.

16. Konfigurer skogbruk

Klikk på Legg til nytt nettsted og velg Hugo som den statiske nettsider, GIT som leverandør og fyll inn informasjonen i følgende skjemaer. Klikk på Send, og den nye CMS vil laste, klar for innholdsendringer. Nå kan sider bare redigeres fra sidefeltet, samt innlegg og et stort utvalg av andre alternativer.

Ønsker du å lære mer om webdesign? Deretter Abonner på netto , verdens bestselgende magasin for webdesignere og utviklere.

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 hvordan du bygger bedre JavaScript på Generatejs (Bilde Kreditt: Fremtid / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

Bli med oss ​​i april 2020 med vår utvalg av JavaScript Superstars på Generatejs - konferansen som hjelper deg med å bygge bedre JavaScript. Bestill nå på. GenerateConf.com.

Les mer:

  • 8 HTML-koder du må bruke (og 5 for å unngå)
  • 25 av de beste JavaScript-APIene
  • Slik skjuler du JavaScript-koden din fra View Source

hvordan - Mest populære artikler

Kompositering i animasjon: Lær det grunnleggende

hvordan Sep 17, 2025

[1. 3] (Bilde Kreditt: Blackmagic Design) I denne artikkelen vil vi dykke inn i kunsten å kompositere for 3D. Utforsk..

Hvordan slå Wordpress til en visuell byggherre

hvordan Sep 17, 2025

[1. 3] (Bilde Kreditt: Elementor / Joseph Ford) Visuelle byggere har eksistert i lang tid for WordPress, men har allti..

Bruk pennverktøyet og teksturene til å legge til dybde i Photoshop

hvordan Sep 17, 2025

[1. 3] Over følgende korte skjermopptak videoer, Charlie Davis. , en London-basert illustratør, dekker hvordan du..

Slik lager du et app-ikon i Illustrator

hvordan Sep 17, 2025

Side 1 av 2: Slik oppretter du et app-ikon i Illustrator: Trinn 01-11 Slik oppretter du et app-ikon i Illustrator: Trinn 01-11 ..

Bygg en kompleks 3D-sci-fi-scene i blender

hvordan Sep 17, 2025

[1. 3] Skaper en apokalyptisk sci-fi city scene i 3D Art. er noe kunstnere kan være sjenert unna å gjøre på gru..

Hvordan lage deilige teksturer med blyanter

hvordan Sep 17, 2025

[1. 3] Når du lærer hvordan tegne Et fortsatt livskunstverk, det er viktig å skape interesse og engasjere betrak..

Legg til visuelle signaler til nettstedet ditt

hvordan Sep 17, 2025

[1. 3] Det er irriterende for nettstedbrukere å klikke på en kobling bare for å finne at nettsiden ikke er av interesse, og kas..

5 måter å skape flere immersive VR-opplevelser

hvordan Sep 17, 2025

[1. 3] Virtual Reality er ikke akkurat ny, men det har bare vært i de siste årene at teknologien har nådd et punkt der det kan ..

Kategorier