At bygge til nettet er altid et spændende perspektiv. Det giver udviklere mulighed for at bygge webapplikationer. De kan vælge de rammer, teknologi, værktøjer og filosofi, de vil bruge.
En sådan filosofi er Jamstack. Det tilbyder en fleksibel tilgang til løsning af webudviklingsproblemet.
I denne artikel lærer du, hvordan du bygger din første Jamstack-app. Lad os komme igang.
Indholdsfortegnelse
Hvad er Jamstack?
Jamstack er en af de nye webfilosofier til at bygge ting til nettet. Teknisk set tilbyder det udviklere en sammensat webarkitektur. Du kan vælge dine rammer og værktøjer til at opnå det samme mål.
Hvis man ser godt efter,
Jam + stak = JAMstack.
Jamstack består af tre hovedkomponenter:
- J for JavaScript
- A for Application Programming Interface (API)
- M for Markup
Denne tilgang adskiller forretningslogikken fra dataene og afkobler weboplevelseslaget. Fordelene omfatter:
- Hurtigere indlæsningstid (næsten øjeblikkelig).
- En fleksibel og hurtig udviklingsproces.
- Forbedret skalerbarhed og vedligeholdelse.
For at læse mere om Jamstack, tjek Jamstack for Newbies.
Jamstacks historie
Jamstack er relativt nyt. I 2016 introducerede Matt Biilmann Jamstack i virksomhedens præsentation, der viste verden, hvordan man bygger en hjemmeside uden at gå den traditionelle vej.
Løsningen adskiller applikationslogikken fra backend-serverafhængighed. Så det meste indhold serveres gennem statiske filer med CDN’er – dynamiske funktioner, der understøttes og tilgås via API’er. Og hvis nogen dynamiske handlinger skal behandles af serveren, kompileres den og skubbes til CDN’er, før den tilgås af slutbrugeren.
For bedre at forstå Jamstack-historien skal vi se på statiske og dynamiske websteder.
- Statisk hjemmeside: En statisk hjemmeside er hostet på serveren, men har ingen dynamiske aspekter. Under internettets indledende æra var de fleste websteder statiske websteder, der serverede HTML, CSS og billeder gemt på en server. Fremgangsmåden er hurtig, da serveren ikke skal bruge tid på at behandle brugerens anmodning og altid har filerne klar. Men ingen evne til at ændre noget fører til ingen interaktivitet.
- Dynamisk websted: Dynamiske websteder tilbyder interaktivitet ved at behandle brugernes anmodninger og generere den nødvendige HTML til at tjene. Tilgangen er langsom, men tilføjer fordelene ved interaktivitet. De fleste moderne websteder er dynamiske websteder. Det bedste eksempel ville være WordPress-drevne websteder.
Og så har vi Jamstack-websteder. Lad os lære, hvordan det løste problemet med både statiske og dynamiske websteder.
Jamstack-websteder: Hvordan fungerer de?
Jamstack løser to kerneproblemer:
- Dynamisk websteds langsomme indlæsningstid
- Statiske websteders interaktivitet
Et Jamstack-websted serverer statiske filer, hvilket er hurtigt. Men den indeholder også JavaScript, som kan interagere med API’er for at levere dynamisk indhold.
Bag kulisserne har du brug for en statisk webstedsgenerator til at gøre det tunge løft ved at skabe statiske websider.
Disse statiske webstedsgeneratorer bruger Markdown til at betjene statiske websteder. Den statiske webstedsgenerator genererer statiske filer fra de tilgængelige HTML-, CSS- og JavaScript-filer. Når først det er udviklet, betjenes det statiske websted derefter gennem CDN’er.
Når du serverer statiske filer, indlæses webstederne næsten øjeblikkeligt. Men for at tilføje et dynamisk aspekt til webstedet, skal du stole på JavaScript. JavaScript-filerne kan oprette forbindelse til API’er og tilføje dynamiske data ved at kommunikere med en database.
Opbygning af det første Jamstack-websted
Da Jamtack tilbyder frihed, kan du vælge enhver Jamstack-ramme/statisk site-generator, inklusive Hugo, Gatsby, Next.js, Hexo og andre.
Læs også: Bedste rammer til JamStack
Og til implementering kan du implementere det til GitHub Pages, Netlify, Azure Static Web Apps og andre.
Vi vil bruge Hugo til Jamstack-udvikling og Netlify til at være vært for vores side til denne tutorial.
Selvstudiet forudsætter, at du har en grundlæggende forståelse af nettet. Du skal vide, hvordan nettet fungerer. Derudover bør du også vide, hvordan du bruger Git.
Lad os komme igang.
#1. Installation Forudsætninger: Go og Git
For at installere Hugo skal du bruge to ting: Git og Go. Vi har brug for Git til at strømline vores bygge-workflow (du vil se det senere med Netlify). Go er påkrævet, da Hugo er bygget på det.
Vi bruger Ubuntu, der kører på WSL 2 på Windows 11. Vi får adgang til Ubuntu-kernen direkte fra Windows.
Læs også: Windows 11 Meets Linux: A Deep Dive into WSL2 Capabilities
Du kan vælge et operativsystem, Windows, Linux eller Mac.
Installation af Git
I Ubuntu kan du installere Git ved at køre følgende kommando.
$ sudo apt update $ sudo apt install git
I tilfælde af Windows skal du downloade binære Windows-installationsprogrammer. Tjek vores komplette Git installationsvejledning.
For at kontrollere, om Git er installeret korrekt, skriv følgende kommando.
[email protected]:~$ git --version git version 2.34.1
Installerer Go
Nu er det tid til at installere Golang. For at gøre det skal du køre et par kommandoer på Linux. Så lad os gøre det i trin.
Trin 1: Fjern den tidligere Go-installation og opret et lokalt Go-træ.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Trin 2: Tilpasning af PATH-miljøvariabel
eksport PATH=$PATH:/usr/local/go/bi
Trin 3: Tjek endelig, om Golang er installeret korrekt.
$ go version. #output go version go1.18.1 linux/amd64
Fantastisk, nu er vi klar til at installere Hugo!
Installerer Hugo
Afhængigt af om du bruger Homebrew eller Chocolately, skal du bruge en af følgende kommandoer.
Til hjemmebryg:
$ brew install hugo
Til chokolade:
$ brew install hugo -confirm
Og hvis du ikke bruger nogen af dem, kan du installere dem direkte fra kilden.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
For at kontrollere, om Hugo er installeret korrekt, skal du køre følgende kommando.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/toadmin.dk/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Oprettelse af et Hugo-websted
Hugo tilbyder en nem måde at oprette et websted på. For at gøre det skal du køre følgende kommando.
$ hugo new site toadmin.dk-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/toadmin.dk-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. At vælge et Hugo-tema
Hugo tilbyder adgang til tonsvis af temaer. Disse temaer giver et udgangspunkt for dit projekt. Og for at bygge et Jamstack-websted med Hugo har du brug for et tema.
#4. Oprettelse af en lille virksomhedsside med Jamstack
Til selvstudiet skal vi bruge Hugo Hero-temaet. Dette multifunktionstema tilbyder funktioner som sektioner i fuld bredde og porteføljeoprettelse gennem Markdown.
For at installere temaet skal du kopiere dets repo-link og klone det. Før du fortsætter, skal du sikre dig, at du er i rodmappen.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Kopiering af standardindholdet
For at bruge standardindholdet med webstedet skal du køre følgende kommando.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Den kopierer indholdet i mappen exampleSite til roden af dit websted.
Opdatering af Config.toml-fil
Dernæst skal vi redigere filen Config.toml. Det gemmer projektkonfigurationsoplysninger, og det er nødvendigt at konfigurere det korrekt for at dit Jamstack-sted kan fungere.
Indtil videre skal du redigere den følgende linje til den.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Bemærk: Du skal blive ved med at opdatere filen Config.toml, efterhånden som dit projekt skrider frem. Da du brugte standardindhold, bliver din Config.toml også opdateret for at imødekomme eksempelindholdet.
Test af vores Jamstack-side
For at køre vores websted skal vi generere Hugo-webstedet igen med hugo-kommandoen.
$ hugo
Dernæst drejer vi serveren op. For at gøre det skal du køre hugo serve-kommandoen.
$ hugo serve
#output [email protected]:~/toadmin.dk$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/toadmin.dk/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/toadmin.dk/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Bemærk: Dit websted er nu hostet og tilgængeligt på 127.0.0.1. Hvis den af en eller anden grund ikke åbner, så prøv at åbne den alternative adresse, der er angivet ved siden af. I dette tilfælde er det localhost:42973
Redigering af temaer Standardindhold
Herfra er du fri til at redigere standardindholdet. Du kan gøre det ved at gå til mappen Indhold. Lad os redigere indekssidens indhold. For at gøre det skal du gå til Indhold > Arbejde > Index.md
Sådan ser det ud efter redigering.
Oprettelse af en blogside
Du skal vælge et passende tema, hvis du kun ønsker at oprette en blog. Til dette formål, lad os bruge Hyde-temaet.
På samme måde som vi konfigurerer vores nye websted, skal du køre følgende kommandoer.
$ hugo new site toadmin.dk-jamstack $ cd toadmin.dk-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Rediger derefter filen Config.toml for at tilføje theme = ‘hyde’-værdien.
Opret et nyt indlæg
Du skal køre hugo new-kommandoen for at oprette et nyt indlæg efterfulgt af Markdown-filen.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Redigering af indlægget
For at redigere det nyoprettede hellogeefklare.md-indlæg skal du åbne filen hellogeekflare.md i din foretrukne teksteditor.
Det viser dig følgende indhold.
--- title: "Hello toadmin.dk" date: 2023-05-04T11:39:10+05:30 draft: true ---
Her kan du tilføje ethvert indhold i Markdown.
Lad os tilføje følgende indhold i Markdown.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Når du har lagt ovenstående indhold i .md-filen, skulle det se ud som nedenstående (afhængigt af din editor bruger vi Visual Studio Code).
Det vil dog se helt anderledes ud, når vi serverer det.
Bemærk: Sørg for at ændre kladdeværdien fra “sand” til “falsk”
Fantastisk! Vi oprettede to Jamstack-websteder, en lille virksomhedsside og en anden blog.
Efter at have redigeret dit websted, kan du generere filerne ved at køre hugo-kommandoen. Det vil oprette filen og lægge den i mappen /public.
$ hugo
#5. Implementering af Jamstack-webstedet til Netlify
Med vores websted(er) oprettet, lad os implementere dem. Til dette formål vil vi bruge Netlify.
Netlify er CDN-støttet tjeneste, der tilbyder brugere som dig at være vært for hurtige websteder. Du kan forbinde Netlify med Github og automatisere processen. Det er en gratis tjeneste med nogle funktioner bag betalingsvæggen.
Vores opgave er at skubbe koden til Netlify og lade Netlify klare alt for os.
Opsætning af Git Repository lokalt
Det er nu tid for os at konfigurere Git-depotet.
For at starte Git-lageret skal du køre følgende kommando i roden af dit projekt.
$ git init
Dernæst skal vi opsætte temaet som et undermodul. Dette er et vigtigt skridt. Teknisk set opretter det underdepoter i dit lager. (Husk, du lavede en git-kloning til Hugo-temaet?). Det vil give dig mere kontrol over dit Jamstack-websted.
For eksempel kan du downloade opdateringer til dit tema. Du skal også gøre det, fordi Netlify har brug for temaer som undermoduler til at være vært for dem.
Så for at tilføje temaet som et undermodul skal du køre følgende kommando.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/toadmin.dk-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/toadmin.dk-jamstack$
Oprettelse af et lager på GitHub
Når den lokale opsætning er færdig, er det tid til at oprette et nyt GitHub-lager.
Når den er oprettet, skal du tilføje oprindelsen til dit lokale depot.
$ git remote add origin https://github.com/logan99/toadmin.dk-jamstack-tutorial.git
Nu, træk den.
$ git branch -M main $ git pull origin main
Opret en ny forpligtelse
Nu er det tid til at oprette en ny commit. Kør følgende kommando for at tilføje alle filerne til hovedgrenen.
$ git add .
Kør nu kommandoen commit for at begå ændringerne.
$ git commit -m “First commit”
#Output [email protected]:~/toadmin.dk-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Skub endelig ændringerne til GitHub.
$ git push --set-upstream origin main
Bemærk: Du skal indtaste dit GitHub-brugernavn og din adgangskode for at fungere.
#6. Arbejder med Netlify
Fremragende, vores depot er nu oprettet. Nu flytter vi til Netlify. Hvis du allerede har en konto, skal du logge ind eller oprette en ny konto.
For nyere konti kører den øjeblikkeligt en guide for dig. Ellers lander du på dit kontodashboard. Hvis du lander på dashboardet, skal du klikke på indstillingen “Tilføj nyt websted” under websteder.
Under Tilføj nyt websted skal du vælge “Importer et eksisterende projekt.”
Det vil derefter bede dig om at vælge en Git-udbyder. Når vi bruger GitHub, vælger vi det. Du kan også vælge Bitbucket, GitLab og Azure DevOps.
Det vil derefter liste alle dine projekter. Herfra skal du vælge det GitHub-lager, du oprettede til dette projekt. For os er det “toadmin.dk-jamstack-tutorial.” Du kan også vælge at uploade det andet projekt, som vi har oprettet.
Det vil derefter bede dig om at vælge den filial, der skal implementeres, og vælge grundlæggende byggeindstillinger. Indtil videre kan du indstille alt til standard.
Klik på “Depoy Site” for at implementere det.
Nu skal du vente på, at Netlify gør det. Når den er implementeret, vil meddelelsen være “Dit websted er implementeret.”
Klik nu på webstedet øverst til venstre.
Du vil dog bemærke, at webstedet ikke indlæses korrekt. Dette skyldes, at basis-URL’en i filen Config.toml ikke er indstillet korrekt. Da Netlify genererede en ny projekt-URL, skal du tilføje den til filen Config.toml.
I vores tilfælde er webstedet på https://animated-beijinho-2baa8b.netlify.app/
Det betyder, at vi skal tilføje baseURL’en til den.
For at gøre det skal du gå til din lokale opsætning og ændre værdien.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
For at skubbe ændringen skal du køre følgende kommando.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify er smart. Når den registrerer en ny commit, implementerer den automatisk dit websted igen.
Hvis du indlæser dit websted nu, indlæses det perfekt.
Wooo! Du har gjort det. Jeg ved, at der er meget at lære. Du vil dog finde hele processen intuitiv, når du gør det et par gange.
Afsluttende ord
Jamstack har tilsluttet den nye æra af udviklere. Det låser op for ydeevne og forbedrer også, hvordan websteder implementeres. Jamstack er vokset med fremragende økosystemmedlemmer som Hugo og Netlify. Det vil uden tvivl kun vokse herfra.
Tjek derefter, hvordan du implementerer frontend-applikationen til Netlify.