Det er alltid spennende å utvikle for nettet. Det gir utviklere muligheten til å bygge nettapplikasjoner på deres egen måte. De kan fritt velge rammeverk, teknologi, verktøy og filosofi.
En slik filosofi er Jamstack. Den tilbyr en fleksibel tilnærming til utfordringene innen webutvikling.
I denne artikkelen vil du lære hvordan du bygger din første Jamstack-applikasjon. La oss starte.
Hva er Jamstack?
Jamstack er en moderne tilnærming til webutvikling. Teknisk sett gir den utviklere en sammensettbar nettarkitektur. Du kan velge dine egne rammeverk og verktøy for å oppnå ønsket resultat.
Ved nærmere ettersyn ser vi at
Jam + stakk = JAMstack.
Jamstack består av tre hovedkomponenter:
- J for JavaScript
- A for Application Programming Interface (API)
- M for Markup
Denne metoden skiller forretningslogikken fra dataene, og frigjør brukeropplevelseslaget. Fordelene inkluderer:
- Raskere innlastingstider (nesten umiddelbart).
- En smidig og effektiv utviklingsflyt.
- Forbedret skalerbarhet og vedlikehold.
For å lære mer om Jamstack, sjekk ut introduksjonsartikkelen for nybegynnere.
Historien om Jamstack
Jamstack er en relativt ny tilnærming. I 2016 presenterte Matt Biilmann Jamstack i en firmapresentasjon, og demonstrerte hvordan man kan bygge et nettsted uten å følge den tradisjonelle veien.
Løsningen skiller applikasjonslogikken fra avhengigheten til backend-serveren. Mesteparten av innholdet serveres gjennom statiske filer ved hjelp av CDN-er. Dynamiske funksjoner støttes og åpnes via API-er. Hvis noen dynamiske operasjoner krever serverbehandling, kompileres de og skyves til CDN-er før sluttbrukeren får tilgang til dem.
For å forstå Jamstack-historien bedre, må vi se på forskjellen mellom statiske og dynamiske nettsteder.
- Statisk nettsted: Et statisk nettsted er lagret på serveren, men mangler dynamiske aspekter. I den tidlige internettperioden var de fleste nettsteder statiske, med HTML, CSS og bilder lagret på en server. Denne tilnærmingen er rask, da serveren ikke trenger å bruke tid på å prosessere brukerforespørsler og alltid har filene klare. Mangelen på interaktivitet er en begrensning.
- Dynamisk nettsted: Dynamiske nettsteder tilbyr interaktivitet ved å prosessere brukernes forespørsler og generere HTML som skal vises. Denne metoden er tregere, men gir muligheten for interaksjon. De fleste moderne nettsteder er dynamiske, med WordPress-drevne sider som et godt eksempel.
Og så har vi Jamstack-nettsteder. La oss se hvordan de løser problemene med både statiske og dynamiske nettsteder.
Jamstack-nettsteder: Hvordan fungerer de?
Jamstack løser to sentrale problemer:
- Dynamiske nettsteders trege lastetider.
- Statiske nettsteders manglende interaktivitet.
Et Jamstack-nettsted serverer statiske filer, noe som gir raske lastehastigheter. Men det inneholder også JavaScript, som kan kommunisere med API-er for å levere dynamisk innhold.
I bakgrunnen trengs en statisk sidegenerator som tar seg av den tunge jobben med å opprette statiske nettsider.
Disse statiske sidegeneratorene bruker Markdown for å håndtere statiske nettsider. Den statiske sidegeneratoren produserer statiske filer fra HTML, CSS og JavaScript-filer. Når det er utviklet, blir det statiske nettstedet distribuert via CDN-er.
Når statiske filer serveres, lastes nettsidene nesten umiddelbart. For å legge til dynamiske elementer på nettstedet, må man stole på JavaScript. JavaScript-filene kan kobles til API-er og hente dynamiske data ved å kommunisere med en database.
Bygger det første Jamstack-nettstedet
Siden Jamstack gir frihet, kan du velge hvilket som helst Jamstack-rammeverk/statisk sidegenerator, inkludert Hugo, Gatsby, Next.js, Hexo og andre.
Se også: De beste rammeverkene for JamStack
For distribusjon kan du bruke GitHub Pages, Netlify, Azure Static Web Apps og flere.
I denne veiledningen vil vi bruke Hugo for Jamstack-utvikling og Netlify for å hoste nettstedet vårt.
Veiledningen forutsetter en grunnleggende forståelse av nettet. Du bør vite hvordan nettet fungerer og hvordan du bruker Git.
La oss begynne.
#1. Installasjonskrav: Go og Git
For å installere Hugo trenger du to ting: Git og Go. Vi trenger Git for å forenkle byggeprosessen (du vil se det senere med Netlify). Go er nødvendig fordi Hugo er bygget på det.
Vi bruker Ubuntu som kjører på WSL 2 på Windows 11. Vi får direkte tilgang til Ubuntu-kjernen fra Windows.
Se også: Windows 11 møter Linux: En dypdykk i WSL2-kapasiteter
Du kan velge et hvilket som helst operativsystem, enten det er Windows, Linux eller Mac.
Installerer Git
I Ubuntu kan du installere Git ved å kjøre følgende kommando:
$ sudo apt update $ sudo apt install git
For Windows må du laste ned binære Windows-installasjonsprogrammer. Sjekk ut vår komplette installasjonsveiledning for Git.
For å bekrefte at Git er riktig installert, skriv inn følgende kommando:
[email protected]:~$ git --version git version 2.34.1
Installerer Go
Nå er det på tide å installere Golang. For å gjøre det, må du kjøre noen kommandoer i Linux. La oss ta det trinn for trinn.
Trinn 1: Fjern en eventuell tidligere Go-installasjon og opprett en lokal Go-mappe.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Trinn 2: Oppdater PATH-miljøvariabelen.
eksport PATH=$PATH:/usr/local/go/bi
Trinn 3: Kontroller til slutt at Golang er riktig installert.
$ go version. #utdata go version go1.18.1 linux/amd64
Flott, nå er vi klare til å installere Hugo!
Installerer Hugo
Avhengig av om du bruker Homebrew eller Chocolately, må du bruke en av følgende kommandoer.
For Homebrew:
$ brew install hugo
For Chocolatey:
$ brew install hugo -confirm
Hvis du ikke bruker noen av disse, kan du installere Hugo direkte fra kilden:
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
For å sjekke at Hugo er installert, kjør 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/tipsbilk.net/public/
| NO
-------------------+-----
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. Opprette en Hugo-side
Hugo tilbyr en enkel måte å lage et nettsted på. For å gjøre det, kjør følgende kommando:
$ hugo new site tipsbilk.net-jamstack
Gratulerer! Ditt nye Hugo-nettsted er opprettet i /home/nitt/tipsbilk.net-jamstack. Bare noen få steg til, og du er klar: 1. Last ned et tema i den samme mappen. Velg et tema fra https://themes.gohugo.io/ eller opprett ditt eget med kommandoen "hugo new theme <THEMENAVN>". 2. Kanskje du ønsker å legge til noe innhold. Du kan legge til enkeltfiler med "hugo new <SEKSJONNAVN>/<FILNAVN>.<FORMAT>". 3. Start den innebygde serveren med "hugo server". Besøk https://gohugo.io/ for en hurtigstartguide og full dokumentasjon.
#3. Velge et Hugo-tema
Hugo gir tilgang til en rekke temaer. Disse temaene gir et utgangspunkt for prosjektet ditt. For å bygge et Jamstack-nettsted med Hugo, trenger du et tema.
#4. Opprette en liten bedriftsside med Jamstack
I denne opplæringen skal vi bruke Hugo Hero-temaet. Dette temaet er egnet for flere formål, og tilbyr funksjoner som seksjoner i full bredde og porteføljeoppretting via Markdown.
For å installere temaet, kopier repo-lenken og klon det. Sørg for at du er i rotkatalogen før du fortsetter.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#utdata Klone inn i 'themes/hugo-hero-theme'... remote: Teller objekter: 1141, ferdig. remote: Totalt 1141 (delta 0), gjenbrukt 0 (delta 0), pakket gjenbrukt 1141 Mottar objekter: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, ferdig. Løser deltaer: 100% (489/489), ferdig.
Kopierer standardinnholdet
For å bruke standardinnholdet med nettstedet ditt, kjør følgende kommando:
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Dette kopierer innholdet i `exampleSite`-mappen til roten av nettstedet ditt.
Oppdaterer `Config.toml`-filen
Deretter må vi redigere `Config.toml`-filen. Den lagrer informasjon om prosjektkonfigurasjonen. Det er nødvendig å konfigurere den riktig for at Jamstack-siden skal fungere.
Foreløpig trenger du bare å redigere følgende linje til:
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Merk: Du må fortsette å oppdatere `Config.toml`-filen etter hvert som prosjektet utvikler seg. Siden du brukte standardinnhold, blir `Config.toml` også oppdatert for å tilpasse seg eksempelinnholdet.
Tester ut vår Jamstack-side
For å kjøre siden vår må vi generere Hugo-siden på nytt med `hugo`-kommandoen.
$ hugo
Deretter starter vi serveren. For å gjøre det, kjør `hugo serve`-kommandoen.
$ hugo serve
#utdata [email protected]:~/tipsbilk.net$ hugo server port 1313 er allerede i bruk, prøver å bruke en tilgjengelig port Start bygge sider … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | NO -------------------+----- Sider | 35 Paginator-sider | 0 Ikke-side-filer | 0 Statiske filer | 23 Behandlede bilder | 0 Aliaser | 0 Sitemaps | 1 Renset | 0 Bygget på 71 ms Overvåker endringer i /home/nitt/tipsbilk.net/{archetypes,content,data,layouts,static,themes} Overvåker konfigurasjonsendringer i /home/nitt/tipsbilk.net/config.toml Miljø: "utvikling" Serverer sider fra minnet Kjører i Fast Render-modus. For full gjenoppbygging ved endring: hugo server --disableFastRender Webserver er tilgjengelig på //localhost:42229/ (bind adresse 127.0.0.1) Trykk Ctrl+C for å stoppe
Merk: Nettstedet ditt er nå hostet og tilgjengelig på 127.0.0.1. Hvis den ikke åpnes av en eller annen grunn, prøv å åpne den alternative adressen som er angitt ved siden av. I dette tilfellet er det localhost:42973
Redigere temaers standardinnhold
Herfra står du fritt til å redigere standardinnholdet. Du kan gjøre det ved å gå til innholdsmappen. La oss redigere innholdet på indekssiden. For å gjøre det, gå til Innhold > Arbeid > Index.md.
Slik ser det ut etter redigering.
Opprette en bloggside
Hvis du bare ønsker å lage en blogg, må du velge et passende tema. La oss bruke Hyde-temaet til dette formålet.
På samme måte som vi setter opp vår nye side, må du kjøre følgende kommandoer:
$ hugo new site tipsbilk.net-jamstack $ cd tipsbilk.net-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Deretter redigerer du `Config.toml`-filen for å legge til `tema = «hyde»`-verdien.
Opprett et nytt innlegg
Du må kjøre kommandoen `hugo new` for å opprette et nytt innlegg, etterfulgt av Markdown-filen.
$ hugo new hellogeekflare.md
#utdata [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Innhold "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" opprettet [email protected]:~/geefklare-jamstack$
Redigering av innlegget
For å redigere det nyopprettede innlegget `hellogeefklare.md`, åpne filen i din foretrukne tekstredigerer.
Den viser deg følgende innhold:
--- title: "Hei, tipsbilk.net" date: 2023-05-04T11:39:10+05:30 draft: true ---
Her kan du legge til alt innhold i Markdown.
La oss legge til følgende innhold i Markdown:
### Hei, verden! Dette er et nytt innlegg for å vise hvor enkelt det er å lage et **Jamstack-nettsted**. Vi bruker Hugo og Netlify til å lage vår *enkle Jamstack-side*.
Når du har lagt innholdet ovenfor i .md-filen, skal det se ut som nedenfor (avhengig av redigeringsprogrammet ditt, vi bruker Visual Studio Code).
Det vil imidlertid se helt annerledes ut når vi viser det.
Merk: Pass på å endre utkastverdien fra «true» til «false».
Flott! Vi har opprettet to Jamstack-nettsteder, en for en liten bedrift og en annen blogg.
Etter å ha redigert nettstedet, kan du generere filene ved å kjøre `hugo`-kommandoen. Det oppretter filen og legger den i `/public`-mappen.
$ hugo
#5. Distribuerer Jamstack-nettstedet til Netlify
La oss distribuere de opprettede nettstedene. Til dette formålet skal vi bruke Netlify.
Netlify er en CDN-støttet tjeneste som lar brukere som deg hoste raske nettsteder. Du kan koble Netlify med Github og automatisere prosessen. Det er en gratis tjeneste med noen funksjoner bak betalingsmuren.
Vår jobb er å sende koden til Netlify og la Netlify håndtere resten.
Sette opp Git-depot lokalt
Nå er det på tide for oss å sette opp Git-depotet.
For å starte Git-depotet, kjør følgende kommando i roten av prosjektet ditt:
$ git init
Deretter må vi sette opp temaet som en undermodul. Dette er et viktig steg. Teknisk sett opprettes underdepoter i depotet ditt (Husk at du gjorde en git-kloning for Hugo-temaet?). Dette gir deg mer kontroll over Jamstack-siden din.
Du kan for eksempel laste ned oppdateringer for temaet ditt. Du må også gjøre det fordi Netlify trenger temaer som undermoduler for å hoste dem.
For å legge til temaet som en undermodul, kjør følgende kommando:
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#utdata [email protected]:~/tipsbilk.net-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Legger til eksisterende repo i 'themes/hyde' til indeksen [email protected]:~/tipsbilk.net-jamstack$
Opprette et depot på GitHub
Når det lokale oppsettet er ferdig, er det på tide å opprette et nytt GitHub-depot.
Når det er opprettet, må du legge til opprinnelsen til det lokale depotet.
$ git remote add origin https://github.com/logan99/tipsbilk.net-jamstack-tutorial.git
Nå henter vi det.
$ git branch -M main $ git pull origin main
Opprett en ny forpliktelse
Nå er det på tide å opprette en ny forpliktelse. Kjør følgende kommando for å legge til alle filene i hovedgrenen:
$ git add .
Kjør nå `commit`-kommandoen for å utføre endringene:
$ git commit -m “Første forpliktelse”
#Utdata [email protected]:~/tipsbilk.net-jamstack$ git commit -m "Første forpliktelse" [main (rotforpliktelse) fa69ab2] Første forpliktelse 21 filer endret, 1135 innsettinger(+) opprett modus 100644 .gitmodules opprett modus 100644 .hugo_build.lock opprett modus 100644 archetypes/default.md opprett modus 100644 config.toml opprett modus 100644 content/hellogeekflare.md opprett modus 100644 public/404.html opprett modus 100644 public/apple-touch-icon-144-precomposed.png opprett modus 100644 public/categories/index.html opprett modus 100644 public/categories/index.xml opprett modus 100644 public/css/hyde.css opprett modus 100644 public/css/poole.css opprett modus 100644 public/css/print.css opprett modus 100644 public/css/syntax.css opprett modus 100644 public/favicon.png opprett modus 100644 public/hellogeekflare/index.html opprett modus 100644 public/index.html opprett modus 100644 public/index.xml opprett modus 100644 public/sitemap.xml opprett modus 100644 public/tags/index.html opprett modus 100644 public/tags/index.xml opprett modus 160000 themes/hyde
Til slutt skyver du endringene til GitHub.
$ git push --set-upstream origin main
Merk: Du må skrive inn GitHub-brukernavn og -passord for at dette skal fungere.
#6. Jobber med Netlify
Utmerket, vårt depot er nå opprettet. Nå går vi til Netlify. Hvis du allerede har en konto, logger du deg på eller oppretter en ny konto.
For nye kontoer kjører den umiddelbart en veiviser. Ellers havner du på kontoversikten. Hvis du havner på dashbordet, klikker du på «Legg til nytt nettsted»-alternativet under Nettsteder.
Under Legg til nytt nettsted velger du «Importer et eksisterende prosjekt».
Den vil da be deg om å velge en Git-leverandør. Siden vi bruker GitHub, velger vi det. Du kan også velge Bitbucket, GitLab og Azure DevOps.
Den vil da vise alle prosjektene dine. Herfra velger du GitHub-depotet du opprettet for dette prosjektet. For oss er det «tipsbilk.net-jamstack-opplæringen». Du kan også velge å laste opp det andre prosjektet vi opprettet.
Den vil da be deg om å velge grenen du vil distribuere og velge grunnleggende byggeinnstillinger. Foreløpig kan du la alt stå som standard.
Klikk på «Deploy Site» for å distribuere det.
Nå må du vente på at Netlify skal gjøre sitt. Når det er distribuert, vil meldingen vise «Nettstedet ditt er distribuert».
Klikk nå på siden øverst til venstre.
Du vil imidlertid se at nettstedet ikke lastes inn riktig. Dette er fordi basis-URL-en i `Config.toml`-filen ikke er riktig angitt. Siden Netlify genererte en ny prosjekt-URL, må du legge den til i `Config.toml`-filen.
I vårt tilfelle er nettstedet på https://animated-beij