Bouwen voor het web is altijd een spannend vooruitzicht. Het stelt ontwikkelaars in staat om hun pad te volgen om webapplicaties te bouwen. Ze kunnen het raamwerk, de technologie, de tools en de filosofie kiezen die ze willen gebruiken.
Een van die filosofieën is Jamstack. Het biedt een flexibele benadering voor het oplossen van het webontwikkelingsprobleem.
In dit artikel leer je hoe je je eerste Jamstack-app bouwt. Laten we beginnen.
Wat is JamStack?
Jamstack is een van de nieuwe webfilosofieën om dingen voor het web te bouwen. Technisch gezien biedt het ontwikkelaars een composable webarchitectuur. U kunt uw kaders en hulpmiddelen kiezen om hetzelfde doel te bereiken.
Als je goed kijkt,
Jam + stapel = JAMstack.
Jamstack bestaat uit drie hoofdcomponenten:
- J voor JavaScript
- A voor Application Programming Interface (API)
- M voor opmaak
Deze aanpak scheidt de bedrijfslogica van de gegevens, waardoor de webervaringslaag wordt losgekoppeld. De voordelen omvatten:
- Snellere laadtijd (bijna direct).
- Een flexibele en snelle ontwikkelingsworkflow.
- Verbeterde schaalbaarheid en onderhoudbaarheid.
Om meer te lezen over Jamstack, ga je naar Jamstack voor nieuwkomers.
Geschiedenis van Jamstack
Jamstack is relatief nieuw. In 2016 introduceerde Matt Biilmann Jamstack in de bedrijfspresentatie, waarbij hij de wereld liet zien hoe je een website bouwt zonder de traditionele route te volgen.
De oplossing scheidt de toepassingslogica van de afhankelijkheid van de backendserver. De meeste inhoud wordt dus geleverd via statische bestanden met CDN’s: dynamische functies die worden ondersteund en toegankelijk zijn via API’s. En als er dynamische acties door de server moeten worden verwerkt, wordt deze gecompileerd en naar CDN’s gepusht voordat de eindgebruiker er toegang toe heeft.
Om de geschiedenis van Jamstack beter te begrijpen, moeten we kijken naar statische en dynamische websites.
- Statische website: Een statische website wordt op de server gehost maar heeft geen dynamische aspecten. Tijdens het begintijdperk van internet waren de meeste sites statische websites met HTML, CSS en afbeeldingen die op een server waren opgeslagen. De aanpak is snel omdat de server geen tijd hoeft te besteden aan het verwerken van het verzoek van de gebruiker en de bestanden altijd gereed heeft. Geen mogelijkheid om iets te veranderen leidt echter tot geen interactiviteit.
- Dynamische website: Dynamische sites bieden interactiviteit door verzoeken van gebruikers te verwerken en de vereiste HTML te genereren om te dienen. De aanpak is traag, maar voegt de voordelen van interactiviteit toe. De meeste moderne sites zijn dynamische sites. Het beste voorbeeld zijn door WordPress aangedreven websites.
En dan hebben we Jamstack-websites. Laten we eens kijken hoe het het probleem van zowel statische als dynamische sites heeft opgelost.
Jamstack-websites: hoe werken ze?
Jamstack lost twee kernproblemen op:
- Langzame laadtijd dynamische site
- Interactiviteit van statische sites
Een Jamstack-site serveert statische bestanden, wat snel is. Maar het bevat ook JavaScript, dat kan communiceren met API’s om dynamische inhoud aan te bieden.
Achter de schermen heeft u een statische sitegenerator nodig om het zware werk te doen bij het maken van statische webpagina’s.
Deze statische website-generatoren gebruiken Markdown om statische websites te bedienen. De statische sitegenerator genereert statische bestanden uit de beschikbare HTML-, CSS- en JavaScript-bestanden. Eenmaal ontwikkeld, wordt de statische site bediend via CDN’s.
Omdat u statische bestanden aanbiedt, worden de sites vrijwel onmiddellijk geladen. Om een dynamisch aspect aan de site toe te voegen, moet u echter op JavaScript vertrouwen. De JavaScript-bestanden kunnen verbinding maken met API’s en dynamische gegevens toevoegen door te communiceren met een database.
De eerste Jamstack-website bouwen
Omdat Jamtack vrijheid biedt, kun je elk Jamstack-framework/statische sitegenerator kiezen, inclusief Hugo, Gatsby, Next.js, Hexo en anderen.
Lees ook: Beste frameworks voor JamStack
En voor implementatie kunt u het implementeren op GitHub Pages, Netlify, Azure Static Web Apps en andere.
We zullen Hugo gebruiken voor Jamstack-ontwikkeling en Netlify om onze site te hosten voor deze tutorial.
De tutorial gaat ervan uit dat je een basiskennis van het web hebt. Je moet weten hoe het internet werkt. Daarnaast moet je ook weten hoe je Git moet gebruiken.
Laten we beginnen.
#1. Vereisten installeren: Go en Git
Om Hugo te installeren heb je twee dingen nodig: Git en Go. We hebben Git nodig om onze build-workflow te stroomlijnen (je zult het later zien met Netlify). Go is vereist omdat Hugo erop is gebouwd.
We gebruiken Ubuntu op WSL 2 op Windows 11. We hebben rechtstreeks toegang tot de Ubuntu-kernel vanuit Windows.
Lees ook: Windows 11 ontmoet Linux: een diepe duik in WSL2-mogelijkheden
U kunt een besturingssysteem kiezen, Windows, Linux of Mac.
Git installeren
In Ubuntu kun je Git installeren door de volgende opdracht uit te voeren.
$ sudo apt update $ sudo apt install git
In het geval van Windows moet u de binaire installatieprogramma’s van Windows downloaden. Bekijk onze volledige Git-installatiegids.
Typ de volgende opdracht om te controleren of Git correct is geïnstalleerd.
[email protected]:~$ git --version git version 2.34.1
Gaan installeren
Nu is het tijd om Golang te installeren. Om dit te doen, moet je een paar commando’s op Linux uitvoeren. Dus laten we het in stappen doen.
Stap 1: verwijder de vorige Go-installatie en maak een lokale Go-boom.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Stap 2: omgevingsvariabele PATH aanpassen
export PATH=$PATH:/usr/local/go/bi
Stap 3: Controleer ten slotte of Golang correct is geïnstalleerd.
$ go version. #output go version go1.18.1 linux/amd64
Geweldig, nu zijn we klaar om Hugo te installeren!
Hugo installeren
Afhankelijk van of u Homebrew of Chocolately gebruikt, moet u een van de volgende opdrachten gebruiken.
Voor thuisbrouwen:
$ brew install hugo
Voor Chocolatey:
$ brew install hugo -confirm
En als u ze niet gebruikt, kunt u ze rechtstreeks vanaf de bron installeren.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Voer de volgende opdracht uit om te controleren of Hugo met succes is geïnstalleerd.
$ 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/epcdream.nl/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. Een Hugo-site maken
Hugo biedt een gemakkelijke manier om een site te maken. Voer hiervoor de volgende opdracht uit.
$ hugo new site epcdream.nl-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/epcdream.nl-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. Een Hugo-thema kiezen
Hugo biedt toegang tot tal van thema’s. Deze thema’s bieden een startpunt voor uw project. En om met Hugo een Jamstack-site te bouwen, heb je een thema nodig.
#4. Een kleine bedrijfssite maken met Jamstack
Voor de zelfstudie gaan we het Hugo Hero-thema gebruiken. Dit multifunctionele thema biedt functies zoals secties over de volledige breedte en het maken van portfolio’s via Markdown.
Om het thema te installeren, kopieert u de repo-link en kloont u deze. Voordat u verder gaat, moet u ervoor zorgen dat u zich in de hoofdmap bevindt.
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.
De standaardinhoud kopiëren
Voer de volgende opdracht uit om de standaardinhoud met de site te gebruiken.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Het kopieert de inhoud in de map exampleSite naar de hoofdmap van uw site.
Config.toml-bestand wordt bijgewerkt
Vervolgens moeten we het bestand Config.toml bewerken. Het slaat projectconfiguratie-informatie op en het is noodzakelijk om het correct in te stellen om uw Jamstack-site te laten werken.
Voor nu moet u de volgende regel ernaar bewerken.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Opmerking: u moet het bestand Config.toml blijven bijwerken naarmate uw project vordert. Aangezien u standaardinhoud gebruikte, wordt uw Config.toml ook bijgewerkt om plaats te bieden aan de voorbeeldinhoud.
Onze Jamstack-site testen
Om onze site te laten werken, moeten we de Hugo-site opnieuw genereren met de opdracht hugo.
$ hugo
Vervolgens laten we de server draaien. Voer hiervoor het commando hugo serve uit.
$ hugo serve
#output [email protected]:~/epcdream.nl$ 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/epcdream.nl/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/epcdream.nl/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
Opmerking: uw site wordt nu gehost en is beschikbaar op 127.0.0.1. Als het om wat voor reden dan ook niet opent, probeer dan het alternatieve adres te openen dat hiernaast wordt gegeven. In dit geval is dat localhost:42973
Thema’s standaardinhoud bewerken
Vanaf hier bent u vrij om de standaardinhoud te bewerken. U kunt dit doen door naar de map Inhoud te gaan. Laten we de inhoud van de indexpagina bewerken. Ga hiervoor naar Inhoud > Werk > Index.md
Zo ziet het eruit na het bewerken.
Een blogsite maken
U moet een geschikt thema kiezen als u alleen een blog wilt maken. Laten we hiervoor het Hyde-thema gebruiken.
Vergelijkbaar met hoe we onze nieuwe site hebben opgezet, moet u de volgende opdrachten uitvoeren.
$ hugo new site epcdream.nl-jamstack $ cd epcdream.nl-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Bewerk vervolgens het bestand Config.toml om de waarde theme = ‘hyde’ toe te voegen.
Maak een nieuw bericht aan
Je moet het commando hugo new uitvoeren om een nieuw bericht te maken, gevolgd door het Markdown-bestand.
$ 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$
Het bericht bewerken
Om het nieuw gemaakte bericht hellogeefklare.md te bewerken, opent u het bestand hellogeekflare.md in uw favoriete teksteditor.
Het toont u de volgende inhoud.
--- title: "Hello epcdream.nl" date: 2023-05-04T11:39:10+05:30 draft: true ---
Hier kunt u alle inhoud in Markdown toevoegen.
Laten we de volgende inhoud toevoegen aan 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*.
Nadat u de bovenstaande inhoud in het .md-bestand hebt geplaatst, zou het er als volgt uit moeten zien (afhankelijk van uw editor gebruiken we Visual Studio Code).
Het ziet er echter heel anders uit als we het serveren.
Opmerking: Zorg ervoor dat u de conceptwaarde wijzigt van “true” in “false”
Geweldig! We hebben twee Jamstack-websites gemaakt, een kleine bedrijfssite en nog een blog.
Na het bewerken van uw site kunt u de bestanden genereren door de opdracht hugo uit te voeren. Het maakt het bestand aan en plaatst het in de map /public.
$ hugo
#5. De Jamstack-site implementeren voor Netlify
Nu onze site(s) zijn gemaakt, gaan we ze inzetten. Hiervoor gaan we Netlify gebruiken.
Netlify is een door CDN ondersteunde service waarmee gebruikers zoals jij snelle sites kunnen hosten. U kunt Netlify verbinden met Github en het proces automatiseren. Het is een gratis service met enkele functies achter de betaalmuur.
Het is onze taak om de code naar Netlify te pushen en Netlify alles voor ons te laten afhandelen.
Git Repository lokaal opzetten
Het is nu tijd voor ons om de Git-repository in te richten.
Om de Git-repository te starten, voert u de volgende opdracht uit in de hoofdmap van uw project.
$ git init
Vervolgens moeten we het thema instellen als een submodule. Dit is een belangrijke stap. Technisch gezien creëert het subrepository’s binnen uw repository. (Weet je nog, je hebt een git-kloon gedaan naar het Hugo-thema?). Het geeft je meer controle over je Jamstack-site.
U kunt bijvoorbeeld updates voor uw thema downloaden. Je moet het ook doen omdat Netlify thema’s nodig heeft als submodules om ze te hosten.
Dus, om het thema als een submodule toe te voegen, voer je de volgende opdracht uit.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/epcdream.nl-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/epcdream.nl-jamstack$
Een repository maken op GitHub
Zodra de lokale installatie is voltooid, is het tijd om een nieuwe GitHub-repository te maken.
Eenmaal gemaakt, moet u de oorsprong toevoegen aan uw lokale repository.
$ git remote add origin https://github.com/logan99/epcdream.nl-jamstack-tutorial.git
Nu, trek eraan.
$ git branch -M main $ git pull origin main
Maak een nieuwe commit
Nu is het tijd om een nieuwe commit te maken. Voer de volgende opdracht uit om alle bestanden aan de hoofdtak toe te voegen.
$ git add .
Voer nu de opdracht commit uit om de wijzigingen vast te leggen.
$ git commit -m “First commit”
#Output [email protected]:~/epcdream.nl-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
Duw ten slotte de wijzigingen door naar GitHub.
$ git push --set-upstream origin main
Opmerking: u moet uw GitHub-gebruikersnaam en -wachtwoord invoeren om te werken.
#6. Werken met Netlify
Uitstekend, onze repository is nu gemaakt. Nu gaan we naar Netlify. Als je al een account hebt, log dan in of maak een nieuw account aan.
Voor nieuwere accounts voert het direct een wizard voor u uit. Anders kom je terecht op je accountdashboard. Als u op het dashboard terechtkomt, klikt u op de optie “Nieuwe site toevoegen” onder Sites.
Kies onder Nieuwe site toevoegen voor “Importeer een bestaand project”.
Het zal je dan vragen om een Git-provider te kiezen. Omdat we GitHub gebruiken, zullen we het kiezen. Je kunt ook kiezen voor Bitbucket, GitLab en Azure DevOps.
Vervolgens worden al uw projecten weergegeven. Selecteer hier de GitHub-repository die u voor dit project hebt gemaakt. Voor ons is het de “epcdream.nl-jamstack-tutorial”. Je kunt er ook voor kiezen om het andere project dat we hebben gemaakt te uploaden.
Vervolgens wordt u gevraagd om de vertakking te selecteren die moet worden geïmplementeerd en om basisinstellingen voor builds te kiezen. Voor nu kun je alles op standaard zetten.
Klik op “Site deponeren” om het te implementeren.
Nu moet je wachten tot Netlify zijn ding doet. Eenmaal geïmplementeerd, is het bericht ‘Uw site is geïmplementeerd’.
Klik nu linksboven op de site.
U zult echter merken dat de site niet correct wordt geladen. Dit komt doordat de basis-URL in het bestand Config.toml niet correct is ingesteld. Aangezien Netlify een nieuwe project-URL heeft gegenereerd, moet u deze toevoegen aan het bestand Config.toml.
In ons geval is de site op https://animated-beijinho-2baa8b.netlify.app/
Dat betekent dat we de baseURL eraan moeten toevoegen.
Ga hiervoor naar uw lokale instellingen en wijzig de waarde.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Om de wijziging door te voeren, moet u de volgende opdracht uitvoeren.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify is slim. Wanneer het een nieuwe commit detecteert, implementeert het uw site automatisch opnieuw.
Als u uw site nu laadt, wordt deze perfect geladen.
Wauw! Je hebt het gedaan. Ik weet dat er veel te leren valt. U zult het hele proces echter intuïtief vinden als u het een paar keer doet.
laatste woorden
Jamstack is verslaafd aan het nieuwe tijdperk van ontwikkelaars. Het ontgrendelt de prestaties en verbetert ook de manier waarop sites worden geïmplementeerd. Jamstack is gegroeid met uitstekende ecosysteemleden zoals Hugo en Netlify. Ongetwijfeld zal het vanaf hier alleen maar groeien.
Bekijk vervolgens hoe u de frontend-applicatie implementeert in Netlify.
