Å bygge for nettet er alltid et spennende prospekt. Det lar utviklere ha sin vei til å bygge webapplikasjoner. De kan velge rammeverket, teknologien, verktøyene og filosofien de vil bruke.
En slik filosofi er Jamstack. Det tilbyr en fleksibel tilnærming til å løse webutviklingsproblemet.
I denne artikkelen lærer du hvordan du bygger din første Jamstack-app. La oss komme i gang.
Innholdsfortegnelse
Hva er Jamstack?
Jamstack er en av de nye nettfilosofiene for å bygge ting for nettet. Teknisk sett tilbyr den utviklere en komponerbar nettarkitektur. Du kan velge dine rammer og verktøy for å oppnå det samme målet.
Hvis du ser nøye etter,
Jam + stabel = JAMstack.
Jamstack består av tre hovedkomponenter:
- J for JavaScript
- A for Application Programming Interface (API)
- M for Markup
Denne tilnærmingen skiller forretningslogikken fra dataene, og kobler fra nettopplevelseslaget. Fordelene inkluderer:
- Raskere lastetid (nesten øyeblikkelig).
- En fleksibel og rask utviklingsarbeidsflyt.
- Forbedret skalerbarhet og vedlikehold.
For å lese mer om Jamstack, sjekk ut Jamstack for Newbies.
Historien om Jamstack
Jamstack er relativt ny. I 2016 introduserte Matt Biilmann Jamstack i selskapets presentasjon, og viste verden hvordan man bygger et nettsted uten å gå den tradisjonelle ruten.
Løsningen skiller applikasjonslogikken fra backend-serveravhengighet. Så det meste av innhold serveres gjennom statiske filer med CDN-er – dynamiske funksjoner som støttes og åpnes via APIer. Og hvis noen dynamiske handlinger må behandles av serveren, kompileres den og skyves til CDN-er før sluttbrukeren får tilgang til dem.
For bedre å forstå Jamstack-historien, må vi se på statiske og dynamiske nettsteder.
- Statisk nettsted: Et statisk nettsted er vert på serveren, men har ingen dynamiske aspekter. I løpet av den første epoken av Internett var de fleste nettsteder statiske nettsteder som serverte HTML, CSS og bilder lagret på en server. Tilnærmingen er rask da serveren ikke trenger å bruke tid på å behandle brukerens forespørsel og alltid har filene klare. Men ingen evne til å endre noe fører til ingen interaktivitet.
- Dynamisk nettsted: Dynamiske nettsteder tilbyr interaktivitet ved å behandle brukernes forespørsler og generere den nødvendige HTML-en som skal vises. Tilnærmingen er treg, men legger til fordelene med interaktivitet. De fleste moderne nettsteder er dynamiske nettsteder. Det beste eksemplet vil være WordPress-drevne nettsteder.
Og så har vi Jamstack-nettsteder. La oss lære hvordan det løste problemet med både statiske og dynamiske nettsteder.
Jamstack-nettsteder: Hvordan fungerer de?
Jamstack løser to kjerneproblemer:
- Dynamisk nettsteds langsomme lastingstid
- Statisk nettstedinteraktivitet
Et Jamstack-nettsted serverer statiske filer, noe som er raskt. Men den inneholder også JavaScript, som kan samhandle med APIer for å levere dynamisk innhold.
Bak kulissene trenger du en statisk nettstedsgenerator for å gjøre det tunge arbeidet med å lage statiske nettsider.
Disse statiske nettstedsgeneratorene bruker Markdown for å betjene statiske nettsteder. Den statiske nettstedsgeneratoren genererer statiske filer fra de tilgjengelige HTML-, CSS- og JavaScript-filene. Når det er utviklet, blir det statiske nettstedet deretter servert gjennom CDN-er.
Når du serverer statiske filer, lastes nettstedene nesten umiddelbart. For å legge til et dynamisk aspekt til nettstedet, må du imidlertid stole på JavaScript. JavaScript-filene kan kobles til APIer og legge til dynamiske data ved å kommunisere med en database.
Bygger det første Jamstack-nettstedet
Siden Jamtack tilbyr frihet, kan du velge hvilket som helst Jamstack-rammeverk/statisk nettstedsgenerator, inkludert Hugo, Gatsby, Next.js, Hexo og andre.
Les også: Beste rammeverk for JamStack
Og for distribusjon kan du distribuere den til GitHub Pages, Netlify, Azure Static Web Apps og andre.
Vi vil bruke Hugo for Jamstack-utvikling og Netlify som vert for nettstedet vårt for denne opplæringen.
Opplæringen forutsetter at du har en grunnleggende forståelse av nettet. Du må vite hvordan nettet fungerer. I tillegg bør du også vite hvordan du bruker Git.
La oss komme i gang.
#1. Installasjonskrav: Go og Git
For å installere Hugo trenger du to ting: Git og Go. Vi trenger Git for å effektivisere byggearbeidsflyten vår (du vil se det senere med Netlify). Go kreves da Hugo er bygget på den.
Vi bruker Ubuntu som kjører på WSL 2 på Windows 11. Vi får tilgang til Ubuntu-kjernen direkte fra Windows.
Les også: Windows 11 Meets Linux: A Deep Dive into WSL2 Capabilities
Du kan velge et operativsystem, 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
Når det gjelder Windows, må du laste ned binære Windows-installasjonsprogrammer. Sjekk ut vår komplette Git-installasjonsveiledning.
For å bekrefte om 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 på Linux. Så la oss gjøre det i trinn.
Trinn 1: Fjern den forrige Go-installasjonen og lag et lokalt Go-tre.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Trinn 2: Tilpasse PATH-miljøvariabelen
eksport PATH=$PATH:/usr/local/go/bi
Trinn 3: Til slutt, sjekk om Golang er riktig installert.
$ go version. #output go version go1.18.1 linux/amd64
Fantastisk, 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 hjemmebrygg:
$ brew install hugo
For sjokolade:
$ brew install hugo -confirm
Og hvis du ikke bruker noen av 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 å sjekke om Hugo er installert vellykket, 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/
| 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. 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
Congratulations! Your new Hugo site is created in /home/nitt/tipsbilk.net-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. Velge et Hugo-tema
Hugo tilbyr tilgang til tonnevis av temaer. Disse temaene gir et utgangspunkt for prosjektet ditt. Og for å bygge et Jamstack-nettsted med Hugo, trenger du et tema.
#4. Opprette en liten bedriftsside med Jamstack
For opplæringen skal vi bruke Hugo Hero-temaet. Dette flerbrukstemaet tilbyr funksjoner som seksjoner i full bredde og porteføljeoppretting gjennom Markdown.
For å installere temaet, kopier repo-lenken og klone den. Før du fortsetter, sørg for at du er i rotkatalogen.
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.
Kopierer standardinnholdet
For å bruke standardinnholdet med nettstedet, kjør følgende kommando.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Den kopierer innholdet i exampleSite-mappen til roten på nettstedet ditt.
Oppdaterer Config.toml-filen
Deretter må vi redigere Config.toml-filen. Den lagrer informasjon om prosjektkonfigurasjon, og det er nødvendig å sette den opp riktig for at Jamstack-siden skal fungere.
Foreløpig må du redigere følgende linje til den.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Merk: Du må fortsette å oppdatere Config.toml-filen mens prosjektet skrider frem. Ettersom du brukte standardinnhold, blir Config.toml også oppdatert for å imøtekomme eksempelinnholdet.
Tester ut vår Jamstack-side
For å kjøre siden vår, må vi generere Hugo-siden igjen med hugo-kommandoen.
$ hugo
Deretter snurrer vi opp serveren. For å gjøre det, kjør hugo serve-kommandoen.
$ hugo serve
#output [email protected]:~/tipsbilk.net$ 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/tipsbilk.net/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/tipsbilk.net/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
Merk: Nettstedet ditt er nå vert og tilgjengelig på 127.0.0.1. Hvis den av en eller annen grunn ikke åpner, prøv å åpne den alternative adressen som er oppgitt ved siden av. I dette tilfellet er det localhost:42973
Redigere temaer 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
Du må velge et passende tema hvis du bare ønsker å lage en blogg. For dette formålet, la oss bruke Hyde-temaet.
I likhet med hvordan 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 temaet = «hyde»-verdi.
Opprett et nytt innlegg
Du må kjøre hugo new-kommandoen for å opprette et nytt innlegg, etterfulgt av 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 av innlegget
For å redigere det nyopprettede hellogeefklare.md-innlegget, åpne hellogeekflare.md-filen i ditt foretrukne tekstredigeringsprogram.
Den viser deg følgende innhold.
--- title: "Hello 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.
### 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 innholdet ovenfor i .md-filen, skal det se ut som nedenfor (avhengig av redaktøren din, bruker vi Visual Studio Code).
Det vil imidlertid se helt annerledes ut når vi serverer det.
Merk: Sørg for å endre utkastverdien fra «true» til «false»
Rått! Vi opprettet to Jamstack-nettsteder, en liten bedriftsside og en annen blogg.
Etter å ha redigert nettstedet ditt, kan du generere filene ved å kjøre hugo-kommandoen. Det vil opprette filen og legge den i /public-mappen.
$ hugo
#5. Distribuerer Jamstack-nettstedet til Netlify
La oss distribuere dem med våre nettsted(er) opprettet. Til dette formålet skal vi bruke Netlify.
Netlify er CDN-støttet tjeneste som tilbyr brukere som deg å være vert for 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 alt for oss.
Sette opp Git Repository lokalt
Det er nå på tide for oss å sette opp Git-depotet.
For å starte Git-depotet, kjør følgende kommando ved roten av prosjektet ditt.
$ git init
Deretter må vi sette opp temaet som en undermodul. Dette er et viktig skritt. Teknisk sett oppretter den underdepoter i depotet ditt. (Husk at du gjorde en git-kloning til Hugo-temaet?). Det vil gi deg mer kontroll over Jamstack-siden din.
Du kan for eksempel laste ned oppdateringer til temaet ditt. Du må også gjøre det fordi Netlify trenger temaer som undermoduler for å være vert for dem.
Så 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
#output [email protected]:~/tipsbilk.net-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/tipsbilk.net-jamstack$
Opprette et depot på GitHub
Når det lokale oppsettet er ferdig, er det på tide å lage et nytt GitHub-depot.
Når den er opprettet, må du legge til opprinnelsen til ditt lokale depot.
$ git remote add origin https://github.com/logan99/tipsbilk.net-jamstack-tutorial.git
Nå, trekk den.
$ 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 til hovedgrenen.
$ git add .
Kjør nå kommandoen commit for å utføre endringene.
$ git commit -m “First commit”
#Output [email protected]:~/tipsbilk.net-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
Til slutt, trykk endringene til GitHub.
$ git push --set-upstream origin main
Merk: Du må skrive inn GitHub brukernavn og passord for å fungere.
#6. Jobber med Netlify
Utmerket, vårt depot er nå opprettet. Nå flytter vi til Netlify. Hvis du allerede har en konto, logg inn eller opprett en ny konto.
For nyere kontoer kjører den umiddelbart en veiviser for deg. Ellers havner du på kontooversikten. Hvis du lander 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 velge en Git-leverandør. Når 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 sette alt til standard.
Klikk på «Depoy Site» for å distribuere den.
Nå må du vente på at Netlify skal gjøre sitt. Når den er distribuert, vil meldingen være «Nettstedet ditt er distribuert.»
Klikk nå på siden øverst til venstre.
Du vil imidlertid legge merke til at nettstedet ikke lastes inn riktig. Dette er fordi basis-URL-en i Config.toml-filen ikke er riktig angitt. Ettersom Netlify genererte en ny prosjekt-URL, må du legge den til i Config.toml-filen.
I vårt tilfelle er nettstedet på https://animated-beijinho-2baa8b.netlify.app/
Det betyr at vi må legge til baseURL til den.
For å gjøre det, gå til ditt lokale oppsett og endre verdien.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
For å presse endringen, må du kjøre følgende kommando.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify er smart. Når den oppdager en ny forpliktelse, distribuerer den automatisk nettstedet ditt igjen.
Hvis du laster inn nettstedet ditt nå, vil det lastes perfekt.
Wooo! Du har gjort det. Jeg vet det er mye å lære. Du vil imidlertid finne hele prosessen intuitiv når du gjør det noen ganger.
Siste ord
Jamstack har hektet den nye æraen av utviklere. Det låser opp ytelsen og forbedrer også hvordan nettsteder distribueres. Jamstack har vokst med utmerkede økosystemmedlemmer som Hugo og Netlify. Det vil utvilsomt bare vokse herfra.
Deretter kan du sjekke ut hvordan du distribuerer frontend-applikasjonen til Netlify.