Bygg din første Jamstack-app med Hugo og Netlify

Å 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.

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.

  Hvordan oppdatere VLC Media Player

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.

  Hvordan konvertere bilde til gråtonemaling

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.

  Standard portnumre du trenger å vite som systemadministrator

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.

x