Jamstack: Gyorsabb, hatékonyabb weboldalak építése

Sep 14, 2025

kézikönyv

(Kép hitel: Future / Joseph Ford)

Jamstack egy módszer a weboldalak létrehozásának és szolgálja a kiszolgáló által igényelt minimális terheléssel. A nevét az építési folyamat, a JavaScript, az API és a Markup technológiáiból kapja meg. Az oldalak az idő előtt épülnek, és statikus HTML-fájlokként szolgálnak, mint felhasználó. Ahhoz, hogy hozzon létre egy webhelyet, és ezeket a technológiákat együtt hozza létre, szükség van a megfelelő eszközökre. Győződjön meg róla, hogy megnézed Legjobb kódszerkesztők Hozzászólás, hogy eldöntse a legjobb fejlesztési környezetet az Ön számára.

Hagyományosan, amikor egy felhasználói rákattintanak egy weboldalra, egy sor művelet történik. A felhasználó böngészője kérést küld a honlap szerver, akkor végigfut a backend kódot generálja a megfelelő oldalon, és az adatokat küldi vissza a böngésző és a kiolvasztott mint egy internetes oldalon. Nagyon sok, ami rosszul tudott menni, és még akkor is, ha jól megy, kissé lassabb, mint egy felhasználó, aki kényelmes a villámgyors digitális világban, most élünk.

De a Jamstack használata gyorsabb hatékonyabb helyszíneket jelent, és kevésbé rosszul. Ebben a bemutatóban bemutatjuk, hogyan kell létrehozni egy blog weboldalt a Jamstackban, hogy bemutassa a koncepciókat. Az alkalmazott eszközök lesznek Hugo Statikus helyfejlesztőjeként, Netlify mint az építési eszköz és Github A fájlok szabad tárhelye.

A webhely élményének további javítása érdekében győződjön meg róla, hogy kiválasztja a tökéletes web hosting szolgáltatás és a legjobb weboldal építője .

01. Töltse le a szükséges eszközöket

Töltse le a másolatot Victor Hugo - Ez az egyik az egyik induló készlet, hogy gyorsan eljusson a dolgokat. Győződjön meg róla, hogy van csomópont telepítve a fejlesztési környezetre.

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

02. Hozzon létre egy munkakönyvtárat és telepítse a Hugo-t

Hozzon létre egy könyvtárat és nevezze meg Jamstack . Itt fogunk dolgozni a fejlesztési gépünkön. Kivonja a letöltött fájlokat HUGO-hoz a könyvtárba, és nyissa meg a parancssorba. Az összes függőséget, a Jamstack mappában és a futtatásban lévő parancssor megnyitásához NPM telepítés

npm install

03. Indítsa el a kiszolgálót

Miután befejezte a függőséget, futtassa az NPM indítását. A fejlesztés kiszolgáló elindult egy helyi másolatot Victor Hugo, megközelíthető alapértelmezésben a localhost: 3000 - nyitó lapra kell mutatnia az üdvözlő képernyő, ha minden sikeres volt. Miután tesztelték, nyomjuk meg a gombot Ctrl + C a kiszolgáló leállításához.

04. Adjon hozzá egy oldalt és egy bejegyzést

Változtassa meg a könyvtárat a webhely mappába, majd a hugo új parancs, add a oldal- one.md és a post-one.md . A Windows-ban dolgozó fejlesztőknek letölteniük kell a hugo.exe fájlt, és hozzáadhat egy utat, hogy ezt a munkához, de könnyen követhető dokumentáció létezik hugo weboldal.

 Hugo New PageCone.md
hugo új post / post-one.md

05. Tartalom hozzáadása az oldalhoz és a hozzászóláshoz

Vizsgálati célokra egyes tartalmakat hozzá kell adni az új hozzászóláshoz és oldalhoz (a média-nehéz tartalmat kapja? felhő tároló ). Nyissa meg a projekt könyvtárát egy fájlböngészőben, és navigáljon a Jamstack / webhely / tartalomhoz. A fájl ezen mappában oldal- one.md most léteznie kell. Van egy mappa is posta amely tartalmazza a post-one.md. Nyissa meg mindkét fájlt, és adjon hozzá néhány tartalmat a jelölésnél az --- (vagy bizonyos esetekben +++)

 # lorem ipsum dolor ül az amet
## CONSECEPETUR Adipiscing * Elit *
Sed do eiusmod divat incididunt utas
et Dolore Magna Aliqua.

06. Adja hozzá a témát almodulként

Az előző fájlokba bevitt szöveg nem tekinthető téma nélkül. Például az Ananke témát fogják használni. Törölje az aktuális tartalmát Helyszín / elrendezések Mappa, üresen hagyva. Készítsen egy új könyvtárat a hívott webhely mappában témák , majd változtassa meg, és futtassa a következő kódot, hogy importálja a témát Git-almodulként. Megjegyzés: A normál klónozás nem kompatibilis a NetLify segítségével.

 mkdir témák
CD témák
git almodula HTTPS hozzáadása: // github
com / & lt; themecreator & gt; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme
ananke.git témák / ananke

07. Állítsa be a témát és futtassa a kiszolgálót

Másolja a tartalmát Site / Témák / Gohugo-Theme ananke / examplesite / config.toml a webhely mappájában. Az oldal tetején cserélje ki az alap URL-címet a " / " és törölje a vonalat themesdir = '../ .. . Mentse el a konfigurációs fájlt, nyissa meg a terminált és futtassa NPM indítása parancs. A webhely nevét is megváltoztathatja (ha szeretné) a cím érték.

 CD-oldal
NPM START

08. Vizsgálja meg a böngészőben

Nyisd ki http: // localhost: 3000 / Page-One / Annak érdekében, hogy az oldal védjegyét teljesen stílusú oldalként rendezze. A honlap megnyitása, az első hozzászólás most látható lesz. Ez azt jelenti, hogy a statikus helyfejlesztő most funkcionális.

09. A menü konfigurálása

A webhely megtekintésekor észrevehető, hogy a korábban készült oldal nem jelenik meg a navigációban. Visszatérve a tartalomhoz, adjon hozzá egy vonalat az első anyag konfigurációjában annak érdekében, hogy megmondja Hugo, amely menü az oldal beillesztéséhez.

 toml
+++
Menü = "Main"
+++
Yaml
---
Menü: "Main"
---

10. Nyomja meg a fájlokat egy githubba

Ezután animálja a kört, hogy válaszoljon a felhasználói kattintásokra. Most a statikus hely felfelé és fut, hozzáférhetőnek kell lennie egy fejlesztési kiszolgálón. Az első lépés az, hogy a kódot githubba tegye. Hozzon létre egy új tárolót a Github-on, majd használja a parancssorot, hogy a kódot a projekt mappából vagy a Github asztali alkalmazásból nyomja meg.

 Git Remote Add származás https://github.com/[Githubusername]/jamstackTutorial.git
git push -u származási mester

11. Csatlakozzon a NetLify-hez

A NetLyify mindent össze fog tenni, építeni a webhelyet, és szolgálja át egy ideiglenes tartományban. Indítsa el a fiók létrehozásával Netlify és kapcsolja össze egy Github fiókkal. Ha minden be van állítva kattintással Új webhely a GIT-től .

12. Csatlakozzon a githubhoz

A folyamatos telepítéshez kattintson Github , majd válassza ki azt a repót, amely korábban készült a bemutatóban. A NetLifynek automatikusan felismeri a projekt legjobb építési lehetőségeket. El kell olvasnia NPM RUN BUILD . Ha minden rendben van, akkor kattintson a Telepítés gombra.

13. Építsen webhelyet és nézze meg a Netlify Linket

Miután az oldal épült, megjelenik egy üzenet telepített . A NetLyify megadta a webhelyet, amely ideiglenes tartománynév, amelynek nincs értelme - ez egyszerűen módosítható a webhelybeállítások gombra. Módosítsa a nevet, majd kattintson a linkre a Jamstackon keresztül betöltött webhely megtekintéséhez.

14. Változtassa meg a tesztelkezést

A honlap most a Jamstackon keresztül terheli. Gyorsan villám, és automatikusan frissíti, ha egy elkötelezettség van a github-ra. Hogy tesztelje ezt, térjen vissza a helyi fejlesztési környezetbe és futtassa hugo new page-three.md A webhely könyvtárából. Ezután nyissa meg a létrehozott fájlt, adjon hozzá néhány tartalmat, kattintson a Mentés gombra, és kövesse a fájlt a repo-ra. A pillanatokon belül észre fogja venni, hogy a frissítés a NetLyfy Linken él.

15. Adjon hozzá egy CMS-t a statikus webhelyre

A sima jelölésben való munka és a parancssor használata az oldalak létrehozásához nem fog jól ülni a legtöbb ügyféllel. Ahhoz, hogy a weboldal barátságosabb legyen, telepítse a tartalomkezelő rendszert. Erdészeti tökéletes illeszkedés az aktuális beállításhoz. Menjen a webhelyre, és hozzon létre egy fiókot a Github segítségével.

16. Az erdészet konfigurálása

Kattints új helyszínen, majd válassza ki a Hugo a statikus oldal generátor, git, mint a szolgáltató és töltse ki az adatokat, a következő formákban. Kattintson a Küldés gombra, és az új CMS betöltődik, készen áll a tartalom módosításaira. Most, az oldalak egyszerűen szerkeszthetők az oldalsáv, valamint üzenetét, és egy hatalmas tömb más lehetőség.

Szeretne többet megtudni a webdesignról? Azután Feliratkozás a netre , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Ismerje meg, hogyan építsünk jobb JavaScriptet a Generatejs-en (Kép hitel: Jövő / Remy Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftaba, Unsplash)

Csatlakozz hozzánk 2020 áprilisában a JavaScript szupersztárok felállításával a Generatejs-ban - a konferencia segít abban, hogy jobb JavaScript-et építsen. Foglaljon most generateconf.com

Olvass tovább:

8 HTML címkéket kell használni (és 5, hogy elkerüljék)
A legjobb JavaScript API-k közül 25
Hogyan lehet elrejteni a JavaScript kódot a nézetforrásból

Jamstack: Gyorsabb, hatékonyabb weboldalak építése

01. Töltse le a szükséges eszközöket

02. Hozzon létre egy munkakönyvtárat és telepítse a Hugo-t

03. Indítsa el a kiszolgálót

04. Adjon hozzá egy oldalt és egy bejegyzést

05. Tartalom hozzáadása az oldalhoz és a hozzászóláshoz

06. Adja hozzá a témát almodulként

07. Állítsa be a témát és futtassa a kiszolgálót

08. Vizsgálja meg a böngészőben

09. A menü konfigurálása

10. Nyomja meg a fájlokat egy githubba

11. Csatlakozzon a NetLify-hez

12. Csatlakozzon a githubhoz

13. Építsen webhelyet és nézze meg a Netlify Linket

14. Változtassa meg a tesztelkezést

15. Adjon hozzá egy CMS-t a statikus webhelyre

16. Az erdészet konfigurálása

kézikönyv - Most Popular Articles

Hogyan írhatunk HTML kódot gyorsabban

Hogyan lehet egyszerűsíteni a keverék alakzatát Mayában

21 módja annak, hogy optimalizálja a CSS-t és gyorsítsa fel a webhelyet

Fűzetet az irreális motorban

Fájlok letöltése 3D világ 232

5 tipp a VR-alkotások javításához

Élvezze az energikus tengeri kilátást az olajokban

Hozzon létre egy erős pózot a Photoshopban

Kategóriák