JamStack: Build Snellere, efficiëntere websites van vandaag

Sep 11, 2025
Procedures
JAMstack main
(Afbeelding Credit: Future / Joseph Ford)

JamStack is een methode om websites te maken en te bedienen met minimale belasting vereist door de server. Het krijgt zijn naam van de technologieën die worden gebruikt in het buildproces, JavaScript, API's en Markup. Pagina's zijn ingebouwd in Markup-taal van tevoren en diende als statische HTML-bestanden als een gebruiker die ze opvragen. Om een ​​site te bouwen en deze technologieën samen te brengen, hebt u de juiste tools nodig. Zorg ervoor dat je onze bezoekt Beste code-editors post om de beste ontwikkelingsomgeving voor u te bepalen.

Traditioneel, wanneer een gebruiker op een webpagina klikt, vindt een reeks acties plaats. De browser van de gebruikers verzendt een verzoek naar de server van de website, het wordt uitgevoerd via de backend-code, genereert de juiste pagina en de gegevens worden teruggestuurd naar de browser en weergegeven als een webpagina. Heel veel die verkeerd zou kunnen gaan, en zelfs als het goed gaat, is het iets langzamer dan een gebruiker is comfortabel met in de Lightning Fast Digital World waar we nu in leven.

Maar het gebruik van de jamstack betekent snellere efficiëntere sites en minder om fout te gaan. In deze tutorial tonen we aan hoe we een blogwebsite in de jamstack kunnen opzetten om te dienen als een inleiding tot de concepten. De gebruikte gereedschappen zullen zijn Hugo als een statische site-generator, Nevel als de bouwtool en Github als gratis hosting voor de bestanden.

Om uw site-ervaring verder te verbeteren, zorg er dan voor dat u het perfecte kiest web hosting Service en het beste website bouwer ​

01. Download de gewenste tools

Download een kopie van Victor Hugo - Dit is een van de verschillende startkits om dingen snel van de grond te krijgen. Zorg ook voor dat je het hebt knooppunt geïnstalleerd op uw ontwikkelingsomgeving. 

https://github.com/netlify-templates/victor-hugo

02. Maak een werkdirectory en installeer HUGO

Maak een map en de naam ervan Jamstack ​Dit is waar we aan onze ontwikkelingsmachine zullen werken. Extracteer de gedownloade bestanden voor HUGO in deze map en open het in de opdrachtprompt. Om alle afhankelijkheden te installeren, op de opdrachtprompt of een terminal in de map JamStack of Run NPM-installatie 

npm install

03. Start de server

JAMstack03

(Beeldkrediet: Joseph Ford)

Zodra de afhankelijkheden zijn voltooid, voert u NPM-start uit. De Development Server heeft nu een lokale kopie van Victor Hugo, standaard toegankelijk op localhost: 3000 - openen die link moet het welkomstscherm laten zien als alles succesvol was. Druk op Ctrl ​ C om de server te stoppen.

04. Voeg een pagina toe en een bericht

JAMstack04

(Beeldkrediet: Joseph Ford)

Wijzig de map naar de site-map en vervolgens met behulp van de HUGO NIEUW opdracht, voeg een toe pagina-one.md en een post-one.md ​Ontwikkelaars die in Windows werken, moeten het HUGO.exe-bestand downloaden en een pad toevoegen om dit aan het werk te krijgen, maar eenvoudig te volgen documentatie bestaat op de hugo website. 

 HUGO NIEUWE PAGINAAONE.MD
HUGO NIEUWE POST / POST-ONE.MD

05. Voeg inhoud toe aan de pagina en plaats

Voor testdoeleinden moet enkele inhoud worden toegevoegd aan de nieuwe post en de pagina (kregen media-zware inhoud? Back it up met de beste cloud opslag ​Open de map voor het project in een bestandsbrowser en navigeer naar JamStack / Site / Inhoud. In deze map het bestand pagina-one.md zou nu moeten bestaan. Er is ook een map genaamd post die de post-one.md. Open beide bestanden en voeg wat inhoud toe in Markdown onder de --- (of in sommige gevallen +++) 

 # Lorem Ipsum Dolor Sit amet
## CONSECTETUR ADIPISCHING * ELIT *
Sed do eiusmod time incididunt ut Labore
et Dolore Magna Aliqua.

06. Voeg het thema toe als een submodule

JAMstack06

(Beeldkrediet: Joseph Ford)

De tekst die is ingevoerd in de vorige bestanden kan niet zonder een thema worden bekeken. Als voorbeeld wordt het Ananke-thema gebruikt. Verwijder de inhoud van de stroom Site / lay-outs map, waardoor het leeg is. Maak een nieuwe map in de site-map genaamd thema's , verander er dan naar en voer de volgende code uit om het thema te importeren als een git-submodule. Opmerking: Normaal klonering is niet compatibel met Netlify. 

 MKDIR-thema's
CD-thema's
Git Submodule Voeg HTTPS toe: // Github
com / & lt; themecreator & gt; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme
Ananke.git Thema's / Ananke

07. Configureer het thema en voer de server uit

Kopieer de inhoud van Site / Thema's / Gohugo-Thema Ananke / VoorbeeldenE / CONFIG.TOML naar de in de map Site. Breng bovenaan de pagina de basis-URL door ' ​ en verwijder de lijn themesdir = '../ ..' ​Sla het configuratiebestand op, open een terminal en ren NPM Start opdracht. U kunt ook de naam van de website wijzigen (als u wilt) door de titel waarde. 

 CD-site
NPM Start

08. Test in een browser

Open http: // localhost: 3000 / pagina-One / Om het thema te zien weergeven de markering van de pagina als een volledig gestileerde pagina. De startpagina openen, is het eerste bericht nu zichtbaar. Dit betekent dat de statische site-generator nu functioneel is.

09. Configureer het menu

JAMstack09

(Beeldkrediet: Joseph Ford)

Bij het bekijken van de website is het merkbaar dat de eerder gemaakte pagina niet in de navigatie wordt weergegeven. Terugkeren naar de inhoud, voeg een regel toe in de configuratie voorkant om HUGO te vertellen welk menu om de pagina in te renderen. 

 toml
​
Menu = "Main"
​
Yaml
​
Menu: "Main"
---

10. Duw de bestanden naar een GitHub

Animeer vervolgens de cirkel om te reageren op gebruikersklikken. Nu is de statische site actief, het moet op een ontwikkelingsserver toegankelijk zijn. De eerste stap is om de code naar GitHub te duwen. Maak een nieuwe repository op GitHub en gebruik vervolgens de opdrachtregel om de code uit de projectmap of de GitHub-desktop-app te drukken. 

 Git Remote Add Origin https://github.com/[githubusername]/jamstacktutorial.git
Git Push -U Origin Master

11. Maak verbinding met Netlify

Netlify zal alles bij elkaar brengen, de site bouwen en serveren op een tijdelijk domein. Begin met het maken van een account bij Nevel en Link het met een GitHub-account. Zodra alles is ingesteld, klikt u Nieuwe site van git ​

12. Maak verbinding met GitHub

Klik voor continue implementatie op Github , selecteer vervolgens de repo die eerder in de tutorial is gemaakt. Netlify moet automatisch de beste bouwopties voor het project detecteren. Het moet lezen NPM RUN BOUW ​Als alles goed gaat, klikt u op Implementeren.

13. Bouw de site en weergave op Netlify-link

JAMstack13

(Beeldkrediet: Joseph Ford)

Zodra de site heeft gebouwd, verschijnt een bericht te zeggen ingezet ​Netlify heeft de website een tijdelijke domeinnaam gegeven die niet logisch is - dit kan eenvoudig worden gewijzigd door op Sites-instellingen te klikken. Wijzig de naam en klik vervolgens op de link om de site bij de jamstack te zien.

14. Maak een wijziging om de implementatie te testen

De website laadt nu via de jamstack. Het is Snel bliksem en het wordt automatisch bijgewerkt wanneer een commit wordt gemaakt naar GitHub. Om dit te testen, keer dan terug naar de lokale ontwikkelingsomgeving en rennen hugo new page-three.md van de site directory. Open vervolgens het gemaakte bestand, voeg wat inhoud toe, klik op Opslaan en verbindt het bestand naar de repo. Binnen momenten zul je opmerken dat de update live is op de netlify-link.

15. Voeg een CMS toe aan uw statische site

Werken in duidelijke markup en het gebruik van de opdrachtregel om pagina's te maken, zal niet goed zitten met de meeste klanten. Als u de website vriendelijker wilt maken, installeert u een contentbeheersysteem. Bosbouw.io is een perfecte pasvorm voor de huidige setup. Ga naar de website en maak een account aan met GitHub.

16. Configureer bosbouw

Klik op Nieuwe site toevoegen en selecteer vervolgens HUGO als de statische site-generator, GIT als de aanbieder en vul de informatie in de volgende formulieren in. Klik op Verzenden en de nieuwe CMS wordt geladen, klaar voor inhoudswijzigingen. Nu kunnen pagina's eenvoudigweg worden bewerkt van de zijbalk, evenals palen en een enorme reeks andere opties.

Wilt u meer weten over Web Design? Vervolgens Abonneer u op NET , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

Leer hoe je beter JavaScript kunt bouwen bij Generatejs (Afbeelding Credit: Future / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / To Heftiba, Unsplash)

Doe mee in april 2020 met onze line-up van JavaScript Superstars op Generatejs - de conferentie die je helpt Betaal JavaScript te bouwen. Boek nu op generateconf.com

Lees verder:

  • 8 HTML-tags die u moet gebruiken (en 5 om te voorkomen)
  • 25 van de beste JavaScript-API's
  • Hoe u uw JavaScript-code verbergen vanaf de view-bron

Procedures - Meest populaire artikelen

Maak een Manga Classic opnieuw

Procedures Sep 11, 2025

Ik ben sinds de kinderjaren een enorme manga-fan en het is onmogelijk om de invloed te verbergen die passie heeft op mijn kunst. ..

Begrijp de eenheidsmiddelenimport pijpleiding

Procedures Sep 11, 2025

Unity is een van 's werelds populairste game-engines, verantwoordelijk voor het aanzetten van honderdduizenden games over de hele..

Haal je hoofd rond reageren met deze vijf factoren

Procedures Sep 11, 2025

Leren reageren, de JavaScript-bibliotheek voor het maken van gebruikersinterfaces van Facebook en Instagram lijkt noten totdat je..

Hoe een chatbot-ervaring te ontwerpen

Procedures Sep 11, 2025

Of we het nu leuk vinden om het te toegeven of niet, Messaging Interaction-platforms dragen bij aan onze dagelijkse mobiele scher..

Hoe een digitaal beeld te geven in Zbrushcore

Procedures Sep 11, 2025

Zbrushcore ($ 149,95 voor een enkele gebruikerslicentie) is een vereenvoudigde versie van Zott dat die..

Teken een potloodportret van een hond

Procedures Sep 11, 2025

Bij het tekenen van PET-portretten, hoeft u het niet alleen te weten Hoe dieren te trekken : De taak wordt de pers..

Maak een meteoordouche in 3DS Max

Procedures Sep 11, 2025

Als u een 3D-meteoordouche voor een scène of project wilt maken, kunt u eenvoudig een fotorealistische meteoordouche weergeven i..

Inleiding tot bruikbaarheidstests

Procedures Sep 11, 2025

Een succesvol webproduct voldoet niet alleen aan de behoeften van uw organisatie, maar ook de behoeften van uw gebruikers. Bruikbaarheid testen - vroeg gedaan en vaak - is een kritieke manier..

Categorieën