Att bygga för webben är alltid en spännande möjlighet. Det tillåter utvecklare att ha sin väg att bygga webbapplikationer. De kan välja ramverk, teknik, verktyg och filosofi de vill använda.
En sådan filosofi är Jamstack. Det erbjuder ett flexibelt tillvägagångssätt för att lösa webbutvecklingsproblemet.
I den här artikeln får du lära dig hur du bygger din första Jamstack-app. Låt oss börja.
Innehållsförteckning
Vad är Jamstack?
Jamstack är en av de nya webbfilosofierna för att bygga saker för webben. Tekniskt sett erbjuder det utvecklare en komponerbar webbarkitektur. Du kan välja dina ramar och verktyg för att uppnå samma mål.
Om man tittar noga,
Jam + stack = JAMstack.
Jamstack består av tre huvudkomponenter:
- J för JavaScript
- A för applikationsprogrammeringsgränssnitt (API)
- M för Markup
Detta tillvägagångssätt skiljer affärslogiken från data och frikopplar webbupplevelselagret. Fördelarna inkluderar:
- Snabbare laddningstid (nästan omedelbar).
- Ett flexibelt och snabbt utvecklingsarbetsflöde.
- Förbättrad skalbarhet och underhållsbarhet.
För att läsa mer om Jamstack, kolla in Jamstack for Newbies.
Jamstacks historia
Jamstack är relativt nytt. 2016 introducerade Matt Biilmann Jamstack i företagets presentation, och visade världen hur man bygger en webbplats utan att gå den traditionella vägen.
Lösningen skiljer applikationslogiken från backend-serverberoendet. Så det mesta innehållet serveras genom statiska filer med CDN:er – dynamiska funktioner som stöds och nås via API:er. Och om några dynamiska åtgärder behöver bearbetas av servern, kompileras och skickas den till CDN:er innan slutanvändaren kommer åt dem.
För att bättre förstå Jamstack-historiken måste vi titta på statiska och dynamiska webbplatser.
- Statisk webbplats: En statisk webbplats finns på servern men har inga dynamiska aspekter. Under Internets första era var de flesta webbplatser statiska webbplatser som serverade HTML, CSS och bilder lagrade på en server. Tillvägagångssättet är snabbt eftersom servern inte behöver lägga någon tid på att bearbeta användarens begäran och alltid har filerna redo. Men ingen förmåga att ändra någonting leder till ingen interaktivitet.
- Dynamisk webbplats: Dynamiska webbplatser erbjuder interaktivitet genom att bearbeta användarnas förfrågningar och generera den HTML som krävs för att visas. Tillvägagångssättet är långsamt men lägger till fördelarna med interaktivitet. De flesta moderna sajter är dynamiska sajter. Det bästa exemplet skulle vara WordPress-drivna webbplatser.
Och sedan har vi Jamstack-webbplatser. Låt oss lära oss hur det löste problemet med både statiska och dynamiska webbplatser.
Jamstack-webbplatser: Hur fungerar de?
Jamstack löser två kärnproblem:
- Dynamisk webbplatss långsamma laddningstid
- Statisk webbplatsinteraktivitet
En Jamstack-webbplats serverar statiska filer, vilket är snabbt. Men den innehåller också JavaScript, som kan interagera med API:er för att visa dynamiskt innehåll.
Bakom kulisserna behöver du en statisk webbplatsgenerator för att göra det tunga arbetet med att skapa statiska webbsidor.
Dessa statiska webbplatsgeneratorer använder Markdown för att betjäna statiska webbplatser. Den statiska webbplatsgeneratorn genererar statiska filer från tillgängliga HTML-, CSS- och JavaScript-filer. När den väl utvecklats serveras den statiska platsen genom CDN:er.
När du visar statiska filer laddas webbplatserna nästan omedelbart. Men för att lägga till en dynamisk aspekt till webbplatsen måste du lita på JavaScript. JavaScript-filerna kan ansluta till API:er och lägga till dynamisk data genom att kommunicera med en databas.
Bygger den första Jamstack-webbplatsen
Eftersom Jamtack erbjuder frihet kan du välja vilken Jamstack-ramverk/statisk webbplatsgenerator som helst, inklusive Hugo, Gatsby, Next.js, Hexo och andra.
Läs också: Bästa ramverk för JamStack
Och för distribution kan du distribuera den till GitHub Pages, Netlify, Azure Static Web Apps och andra.
Vi kommer att använda Hugo för Jamstack-utveckling och Netlify för att vara värd för vår webbplats för denna handledning.
Handledningen förutsätter att du har en grundläggande förståelse för webben. Du måste veta hur webben fungerar. Dessutom bör du också veta hur du använder Git.
Låt oss börja.
#1. Installation Förutsättningar: Go och Git
För att installera Hugo behöver du två saker: Git och Go. Vi behöver Git för att effektivisera vårt byggarbetsflöde (du kommer att se det senare med Netlify). Go krävs då Hugo är byggd på det.
Vi använder Ubuntu som körs på WSL 2 på Windows 11. Vi kommer åt Ubuntu-kärnan direkt från Windows.
Läs också: Windows 11 Meets Linux: A Deep Dive into WSL2 Capabilities
Du kan välja ett operativsystem, Windows, Linux eller Mac.
Installerar Git
I Ubuntu kan du installera Git genom att köra följande kommando.
$ sudo apt update $ sudo apt install git
När det gäller Windows måste du ladda ner binära installationsprogram för Windows. Kolla in vår kompletta Git-installationsguide.
För att verifiera om Git är korrekt installerat, skriv följande kommando.
[email protected]:~$ git --version git version 2.34.1
Installerar Go
Nu är det dags att installera Golang. För att göra det måste du köra några kommandon på Linux. Så låt oss göra det i steg.
Steg 1: Ta bort den tidigare Go-installationen och skapa ett lokalt Go-träd.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Steg 2: Anpassa PATH miljövariabel
export PATH=$PATH:/usr/local/go/bi
Steg 3: Slutligen, kontrollera om Golang är korrekt installerat.
$ go version. #output go version go1.18.1 linux/amd64
Fantastiskt, nu är vi redo att installera Hugo!
Installerar Hugo
Beroende på om du använder Homebrew eller Chocolately, måste du använda något av följande kommandon.
För hembrygd:
$ brew install hugo
För choklad:
$ brew install hugo -confirm
Och om du inte använder någon av dem kan du installera dem direkt från källan.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
För att kontrollera om Hugo har installerats framgångsrikt, kör följande 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/adminvista.com/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. Skapa en Hugo-webbplats
Hugo erbjuder ett enkelt sätt att skapa en webbplats. För att göra det, kör följande kommando.
$ hugo new site adminvista.com-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/adminvista.com-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. Att välja ett Hugo-tema
Hugo erbjuder tillgång till massor av teman. Dessa teman ger en startpunkt för ditt projekt. Och för att bygga en Jamstack-sajt med Hugo behöver du ett tema.
#4. Skapa en webbplats för småföretag med Jamstack
För handledningen kommer vi att använda Hugo Hero-temat. Detta mångsidiga tema erbjuder funktioner som sektioner i full bredd och skapande av portföljer genom Markdown.
För att installera temat, kopiera dess repo-länk och klona det. Innan du fortsätter, se till att du är 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.
Kopiera standardinnehållet
För att använda standardinnehållet med webbplatsen, kör följande kommando.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Den kopierar innehållet i mappen exampleSite till roten på din webbplats.
Uppdaterar filen Config.toml
Därefter måste vi redigera filen Config.toml. Den lagrar information om projektkonfiguration, och det är nödvändigt att ställa in det korrekt för att din Jamstack-webbplats ska fungera.
För nu måste du redigera följande rad till den.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Obs: Du måste fortsätta att uppdatera filen Config.toml allt eftersom projektet fortskrider. Eftersom du använde standardinnehåll uppdateras din Config.toml för att passa exempelinnehållet.
Testar vår Jamstack-webbplats
För att köra vår webbplats måste vi skapa Hugo-webbplatsen igen med hugo-kommandot.
$ hugo
Därefter snurrar vi upp servern. För att göra det, kör kommandot hugo serve.
$ hugo serve
#output [email protected]:~/adminvista.com$ 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/adminvista.com/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/adminvista.com/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
Obs: Din webbplats är nu värd och tillgänglig på 127.0.0.1. Om den av någon anledning inte öppnar, försök att öppna den alternativa adressen som anges bredvid. I det här fallet är det localhost:42973
Redigera teman Standardinnehåll
Härifrån är du fri att redigera standardinnehållet. Du kan göra det genom att gå till mappen Innehåll. Låt oss redigera indexsidans innehåll. För att göra det, gå till Innehåll > Arbete > Index.md
Så här ser det ut efter att ha redigerat det.
Skapa en bloggsida
Du måste välja ett lämpligt tema om du bara vill skapa en blogg. För detta ändamål, låt oss använda Hyde-temat.
I likhet med hur vi konfigurerade vår nya webbplats, måste du köra följande kommandon.
$ hugo new site adminvista.com-jamstack $ cd adminvista.com-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Redigera sedan filen Config.toml för att lägga till temat = ’hyde’-värdet.
Skapa ett nytt inlägg
Du måste köra hugo new-kommandot för att skapa ett nytt inlägg, följt 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$
Redigera inlägget
För att redigera det nyskapade hellogeefklare.md-inlägget, öppna hellogeekflare.md-filen i din föredragna textredigerare.
Det kommer att visa dig följande innehåll.
--- title: "Hello adminvista.com" date: 2023-05-04T11:39:10+05:30 draft: true ---
Här kan du lägga till valfritt innehåll i Markdown.
Låt oss lägga till följande innehåll 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 väl har lagt in ovanstående innehåll i .md-filen bör det se ut som nedan (beroende på din redigerare använder vi Visual Studio Code).
Men det kommer att se helt annorlunda ut när vi serverar det.
Obs: Se till att ändra utkastvärdet från ”true” till ”false”
Grymt bra! Vi skapade två Jamstack-webbplatser, en webbplats för småföretag och en annan blogg.
Efter att ha redigerat din webbplats kan du skapa filerna genom att köra hugo-kommandot. Det kommer att skapa filen och lägga den i mappen /public.
$ hugo
#5. Distribuera Jamstack-webbplatsen till Netlify
Med våra webbplats(er) skapade, låt oss distribuera dem. För detta ändamål kommer vi att använda Netlify.
Netlify är CDN-stödd tjänst som erbjuder användare som du att vara värd för snabba webbplatser. Du kan koppla Netlify med Github och automatisera processen. Det är en gratistjänst med vissa funktioner bakom betalväggen.
Vårt jobb är att skicka koden till Netlify och låta Netlify sköta allt åt oss.
Konfigurera Git Repository lokalt
Det är nu dags för oss att ställa in Git-förvaret.
För att initiera Git-förvaret, kör följande kommando i roten av ditt projekt.
$ git init
Därefter måste vi ställa in temat som en undermodul. Detta är ett viktigt steg. Tekniskt sett skapar det underlager inom ditt förråd. (Kom ihåg att du gjorde en git-klon till Hugo-temat?). Det ger dig mer kontroll över din Jamstack-webbplats.
Du kan till exempel ladda ner uppdateringar till ditt tema. Du måste också göra det eftersom Netlify behöver teman som undermoduler för att vara värd för dem.
Så för att lägga till temat som en undermodul, kör följande kommando.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/adminvista.com-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/adminvista.com-jamstack$
Skapa ett arkiv på GitHub
När den lokala installationen är klar är det dags att skapa ett nytt GitHub-förråd.
När du har skapat det måste du lägga till ursprunget till ditt lokala arkiv.
$ git remote add origin https://github.com/logan99/adminvista.com-jamstack-tutorial.git
Dra nu.
$ git branch -M main $ git pull origin main
Skapa en ny commit
Nu är det dags att skapa ett nytt engagemang. Kör följande kommando för att lägga till alla filer till huvudgrenen.
$ git add .
Kör nu kommandot commit för att utföra ändringarna.
$ git commit -m “First commit”
#Output [email protected]:~/adminvista.com-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
Till sist, tryck ändringarna till GitHub.
$ git push --set-upstream origin main
Obs: Du måste ange ditt GitHub-användarnamn och lösenord för att fungera.
#6. Jobbar med Netlify
Utmärkt, vårt arkiv är nu skapat. Nu flyttar vi till Netlify. Om du redan har ett konto, logga in eller skapa ett nytt konto.
För nyare konton kör den omedelbart en guide åt dig. Annars hamnar du på instrumentpanelen för ditt konto. Om du landar på instrumentpanelen klickar du på alternativet ”Lägg till ny webbplats” under Webbplatser.
Under Lägg till ny webbplats väljer du ”Importera ett befintligt projekt.”
Den kommer då att be dig välja en Git-leverantör. När vi använder GitHub kommer vi att välja det. Du kan också välja Bitbucket, GitLab och Azure DevOps.
Det kommer sedan att lista alla dina projekt. Härifrån väljer du GitHub-förrådet du skapade för det här projektet. För oss är det ”adminvista.com-jamstack-tutorial.” Du kan också välja att ladda upp det andra projektet som vi skapade.
Den kommer sedan att be dig att välja grenen att distribuera och välja grundläggande bygginställningar. För närvarande kan du ställa in allt till standard.
Klicka på ”Depoy Site” för att distribuera den.
Nu måste du vänta på att Netlify ska göra sin grej. När den har distribuerats kommer meddelandet att vara ”Din webbplats är distribuerad.”
Klicka nu på sajten uppe till vänster.
Du kommer dock att märka att webbplatsen inte laddas korrekt. Detta beror på att basadressen i filen Config.toml inte är korrekt inställd. Eftersom Netlify genererade en ny projekt-URL måste du lägga till den i filen Config.toml.
I vårt fall är sajten på https://animated-beijinho-2baa8b.netlify.app/
Det betyder att vi måste lägga till baseURL till den.
För att göra det, gå till din lokala inställning och ändra värdet.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
För att driva ändringen måste du köra följande kommando.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify är smart. När den upptäcker en ny commit, distribuerar den automatiskt din webbplats igen.
Om du laddar din webbplats nu kommer den att laddas perfekt.
Wooo! Du har gjort det. Jag vet att det finns mycket att lära. Du kommer dock att tycka att hela processen är intuitiv när du gör det några gånger.
Slutord
Jamstack har anslutit sig till den nya eran av utvecklare. Det låser upp prestanda och förbättrar även hur webbplatser distribueras. Jamstack har vuxit med utmärkta ekosystemmedlemmar som Hugo och Netlify. Utan tvekan kommer det bara att växa härifrån.
Kolla sedan in hur du distribuerar frontend-applikationen till Netlify.