Az internetes építés mindig izgalmas lehetőség. Lehetővé teszi a fejlesztők számára a webalkalmazások készítésének útját. Kiválaszthatják a használni kívánt keretrendszert, technológiát, eszközöket és filozófiát.
Az egyik ilyen filozófia a Jamstack. Rugalmas megközelítést kínál a webfejlesztési probléma megoldására.
Ebből a cikkből megtudhatja, hogyan készítheti el első Jamstack alkalmazását. Kezdjük el.
Tartalomjegyzék
Mi az a Jamstack?
A Jamstack egyike az új webfilozófiáknak, amelyek az internetre való építkezésre szolgálnak. Technikailag komponálható webarchitektúrát kínál a fejlesztőknek. Kiválaszthatja kereteit és eszközeit ugyanazon cél eléréséhez.
Ha alaposan megnézed,
Jam + verem = JAMstack.
A Jamstack három fő összetevőből áll:
- J a JavaScripthez
- A for Application Programming Interface (API)
- M: Markup
Ez a megközelítés elválasztja az üzleti logikát az adatoktól, leválasztva a webes élményréteget. Az előnyök közé tartozik:
- Gyorsabb betöltési idő (majdnem azonnali).
- Rugalmas és gyors fejlesztési munkafolyamat.
- Továbbfejlesztett méretezhetőség és karbantarthatóság.
Ha többet szeretne megtudni a Jamstackről, nézze meg a Jamstack for Newbies oldalt.
A Jamstack története
A Jamstack viszonylag új. 2016-ban Matt Biilmann bemutatta a Jamstack-et a cég prezentációjában, bemutatva a világnak, hogyan lehet weboldalt készíteni anélkül, hogy a hagyományos úton haladnánk.
A megoldás elválasztja az alkalmazáslogikát a háttérkiszolgáló-függőségtől. Így a legtöbb tartalom CDN-ekkel ellátott statikus fájlok révén kerül kiszolgálásra – a dinamikus funkciók támogatottak és API-kon keresztül érhetők el. És ha bármilyen dinamikus műveletet fel kell dolgoznia a kiszolgálónak, akkor a rendszer lefordítja és továbbítja a CDN-ekhez, mielőtt a végfelhasználó hozzáférne.
A Jamstack történetének jobb megértéséhez meg kell vizsgálnunk a statikus és dinamikus webhelyeket.
- Statikus webhely: A statikus webhely a szerveren található, de nincsenek dinamikus vonatkozásai. Az internet kezdeti korszakában a legtöbb webhely statikus webhely volt, amely HTML-t, CSS-t és egy szerveren tárolt képeket szolgált ki. A megközelítés gyors, mivel a szervernek nem kell időt töltenie a felhasználó kérésének feldolgozásával, és a fájlok mindig készen állnak. Azonban ha nincs lehetőség bármin megváltoztatni, az nem vezet interaktivitáshoz.
- Dinamikus webhely: A dinamikus webhelyek interaktivitást kínálnak azáltal, hogy feldolgozzák a felhasználók kéréseit, és létrehozzák a megjelenítéshez szükséges HTML-kódot. A megközelítés lassú, de hozzáadja az interaktivitás előnyeit. A legtöbb modern webhely dinamikus webhely. A legjobb példa erre a WordPress-alapú webhelyek.
És akkor vannak Jamstack webhelyeink. Tanuljuk meg, hogyan oldotta meg mind a statikus, mind a dinamikus oldalak problémáját.
Jamstack webhelyek: hogyan működnek?
A Jamstack két alapvető problémát old meg:
- A dinamikus webhely lassú betöltési ideje
- Statikus oldalak interaktivitása
A Jamstack webhely statikus fájlokat szolgál ki, ami gyors. De tartalmaz JavaScriptet is, amely interakcióba léphet az API-kkal a dinamikus tartalom kiszolgálása érdekében.
A színfalak mögött statikus webhelygenerátorra lesz szüksége a statikus weboldalak létrehozásának nehéz feladatainak elvégzéséhez.
Ezek a statikus webhely-generátorok a Markdownt használják statikus webhelyek kiszolgálására. A statikus webhelygenerátor statikus fájlokat állít elő a rendelkezésre álló HTML-, CSS- és JavaScript-fájlokból. Miután kifejlesztették, a statikus webhelyet CDN-eken keresztül szolgálják ki.
A statikus fájlok kiszolgálása során a webhelyek szinte azonnal betöltődnek. Ahhoz azonban, hogy dinamikus aspektust adjon a webhelyhez, JavaScriptre kell hagyatkoznia. A JavaScript-fájlok kapcsolódhatnak API-khoz, és dinamikus adatokat adhatnak hozzá egy adatbázissal kommunikálva.
Az első Jamstack webhely készítése
Mivel a Jamtack szabadságot kínál, bármelyik Jamstack keretrendszert/statikus webhelygenerátort választhatja, beleértve a Hugo-t, a Gatsby-t, a Next.js-t, a Hexót és másokat.
Olvassa el még: A JamStack legjobb keretei
A telepítéshez pedig telepítheti a GitHub Pages, a Netlify, az Azure Static Web Apps és más alkalmazásokba.
Ebben az oktatóanyagban a Hugo-t használjuk a Jamstack fejlesztéséhez, és a Netlify-t használjuk webhelyünk tárolására.
Az oktatóanyag feltételezi, hogy rendelkezik alapvető ismeretekkel az internetről. Tudnia kell, hogyan működik a web. Ezenkívül tudnia kell a Git használatát is.
Kezdjük el.
#1. Előfeltételek telepítése: Go and Git
A Hugo telepítéséhez két dologra van szükség: Git and Go. Szükségünk van a Gitre, hogy egyszerűsítse az összeállítási munkafolyamatunkat (ezt később látni fogja a Netlify-nál). Go szükséges, mivel a Hugo erre épül.
WSL 2-n futó Ubuntut használunk Windows 11 rendszeren. Az Ubuntu kernelt közvetlenül a Windows rendszerből érjük el.
Olvassa el még: A Windows 11 találkozik a Linuxszal: A WSL2 képességeinek mélysége
Választhat operációs rendszert, Windowst, Linuxot vagy Macet.
A Git telepítése
Az Ubuntuban a következő parancs futtatásával telepítheti a Git-et.
$ sudo apt update $ sudo apt install git
Windows esetén le kell töltenie a Windows bináris telepítőit. Tekintse meg teljes Git telepítési útmutatónkat.
A Git helyes telepítésének ellenőrzéséhez írja be a következő parancsot.
[email protected]:~$ git --version git version 2.34.1
A Go telepítése
Itt az ideje a Golang telepítésének. Ehhez le kell futtatnia néhány parancsot Linuxon. Tehát tegyük lépésenként.
1. lépés: Távolítsa el az előző Go-telepítést, és hozzon létre egy helyi Go-fát.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
2. lépés: A PATH környezeti változó testreszabása
export PATH=$PATH:/usr/local/go/bi
3. lépés: Végül ellenőrizze, hogy a Golang megfelelően van-e telepítve.
$ go version. #output go version go1.18.1 linux/amd64
Szuper, most már készen állunk a Hugo telepítésére!
Hugo telepítése
Attól függően, hogy a Homebrew-t vagy a Chocolately-t használja, a következő parancsok egyikét kell használnia.
Homebrew esetében:
$ brew install hugo
Csokoládéhoz:
$ brew install hugo -confirm
És ha egyiket sem használja, akkor közvetlenül a forrásból telepítheti őket.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
A Hugo sikeres telepítésének ellenőrzéséhez futtassa a következő parancsot.
$ 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/etoppc.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. Hugo webhely létrehozása
A Hugo egy egyszerű módot kínál a webhely létrehozására. Ehhez futtassa a következő parancsot.
$ hugo new site etoppc.com-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/etoppc.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. Hugo-téma kiválasztása
A Hugo rengeteg témához kínál hozzáférést. Ezek a témák kiindulópontot adnak a projekthez. És ahhoz, hogy Hugoval Jamstack webhelyet hozzon létre, szüksége van egy témára.
#4. Kisvállalkozási webhely létrehozása Jamstack segítségével
Az oktatóanyaghoz a Hugo Hero témát fogjuk használni. Ez a többcélú téma olyan funkciókat kínál, mint a teljes szélességű szakaszok és portfóliókészítés a Markdown segítségével.
A téma telepítéséhez másolja ki a repo hivatkozását, és klónozza azt. Mielőtt folytatná, győződjön meg arról, hogy a gyökérkönyvtárban van.
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.
Az alapértelmezett tartalom másolása
Az alapértelmezett tartalom használatához a webhelyen futtassa a következő parancsot.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Az exampleSite mappa tartalmát a webhely gyökérkönyvtárába másolja.
Config.toml fájl frissítése
Ezután szerkesztenünk kell a Config.toml fájlt. Tárolja a projekt konfigurációs adatait, és ezeket megfelelően be kell állítani ahhoz, hogy a Jamstack webhely működjön.
Egyelőre szerkesztenie kell hozzá a következő sort.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Megjegyzés: A projekt előrehaladtával folyamatosan frissítenie kell a Config.toml fájlt. Továbbá, ahogy az alapértelmezett tartalmat használta, a Config.toml is frissül, hogy megfeleljen a példatartalomnak.
Jamstack webhelyünk tesztelése
Oldalunk futtatásához újra elő kell generálnunk a Hugo oldalt a hugo paranccsal.
$ hugo
Ezután felpörgetjük a szervert. Ehhez futtassa a hugo serve parancsot.
$ hugo serve
#output [email protected]:~/etoppc.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/etoppc.com/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/etoppc.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
Megjegyzés: Webhelye mostantól a 127.0.0.1 címen érhető el. Ha valamilyen okból nem nyílik meg, próbálja meg megnyitni a mellette megadott alternatív címet. Ebben az esetben a localhost:42973
Témák alapértelmezett tartalom szerkesztése
Innentől szabadon szerkesztheti az alapértelmezett tartalmat. Ezt a Tartalom mappába lépve teheti meg. Szerkesszük az indexoldal tartalmát. Ehhez lépjen a Tartalom > Munka > Index.md oldalra
Így néz ki szerkesztés után.
Blogoldal készítése
Ha csak blogot szeretne létrehozni, megfelelő témát kell választania. Erre a célra használjuk a Hyde témát.
Hasonlóan az új webhelyünk beállításához, a következő parancsokat kell futtatnia.
$ hugo new site etoppc.com-jamstack $ cd etoppc.com-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Ezután szerkessze a Config.toml fájlt a theme = ‘hyde’ érték hozzáadásához.
Hozzon létre egy új bejegyzést
Új bejegyzés létrehozásához futtassa a hugo new parancsot, majd a Markdown fájlt.
$ 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$
A bejegyzés szerkesztése
Az újonnan létrehozott hellogeefklare.md bejegyzés szerkesztéséhez nyissa meg a hellogeekflare.md fájlt a kívánt szövegszerkesztőben.
A következő tartalmat jeleníti meg.
--- title: "Hello etoppc.com" date: 2023-05-04T11:39:10+05:30 draft: true ---
Itt bármilyen tartalmat hozzáadhat a Markdownhoz.
Adjuk hozzá a következő tartalmat a Markdown-ban.
### 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*.
Miután behelyezte a fenti tartalmat az .md fájlba, annak az alábbiak szerint kell kinéznie (a szerkesztőtől függően Visual Studio Code-ot használunk).
Azonban teljesen másképp fog kinézni, amikor felszolgáljuk.
Megjegyzés: Ügyeljen arra, hogy a piszkozat értéket „true”-ról „false”-ra módosítsa.
Fantasztikus! Létrehoztunk két Jamstack webhelyet, egy kisvállalkozási webhelyet és egy másik blogot.
A webhely szerkesztése után a hugo parancs futtatásával generálhatja a fájlokat. Létrehozza a fájlt, és a /public mappába helyezi.
$ hugo
#5. A Jamstack webhely telepítése a Netlify-ba
Miután létrehoztuk a webhely(eke)t, telepítsük őket. Erre a célra a Netlify-t fogjuk használni.
A Netlify egy CDN által támogatott szolgáltatás, amely az Önhöz hasonló felhasználóknak gyors webhelyek tárolását kínálja. Csatlakoztathatja a Netlify-t a Githubhoz, és automatizálhatja a folyamatot. Ez egy ingyenes szolgáltatás, néhány funkcióval a fizetőfal mögött.
A mi feladatunk az, hogy a kódot továbbítsuk a Netlify-nak, és hagyjuk, hogy a Netlify mindent elintézzen helyettünk.
A Git Repository helyi beállítása
Itt az ideje, hogy beállítsuk a Git adattárat.
A Git-tárház elindításához futtassa a következő parancsot a projekt gyökerében.
$ git init
Ezután a témát almodulként kell beállítanunk. Ez egy fontos lépés. Technikailag allerakatokat hoz létre a lerakaton belül. (Emlékszel, csináltál egy git klónt a Hugo témához?). Így jobban irányíthatja Jamstack webhelyét.
Például letölthet frissítéseket a témához. Ezt is meg kell tennie, mert a Netlify-nak szüksége van a témákra almodulként a tárolásukhoz.
Tehát a téma almodulként való hozzáadásához futtassa a következő parancsot.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/etoppc.com-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/etoppc.com-jamstack$
Repository létrehozása a GitHubon
A helyi beállítás befejezése után ideje létrehozni egy új GitHub-tárolót.
Miután létrehozta, hozzá kell adnia az eredetet a helyi tárolóhoz.
$ git remote add origin https://github.com/logan99/etoppc.com-jamstack-tutorial.git
Most húzd meg.
$ git branch -M main $ git pull origin main
Hozzon létre egy új commit
Most itt az ideje új commit létrehozásának. Futtassa a következő parancsot az összes fájl hozzáadásához a fő ághoz.
$ git add .
Most futtassa a commit parancsot a változtatások véglegesítéséhez.
$ git commit -m “First commit”
#Output [email protected]:~/etoppc.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
Végül helyezze át a módosításokat a GitHubba.
$ git push --set-upstream origin main
Megjegyzés: A működéshez meg kell adnia GitHub felhasználónevét és jelszavát.
#6. Munka a Netlify-val
Kiváló, a tárhelyünk elkészült. Most áttérünk a Netlify-ra. Ha már van fiókja, jelentkezzen be, vagy hozzon létre új fiókot.
Újabb fiókok esetén azonnal lefuttat egy varázslót. Ellenkező esetben a fiókja irányítópultjára kerül. Ha az irányítópultra érkezik, kattintson az „Új webhely hozzáadása” lehetőségre a Webhelyek alatt.
Az Új webhely hozzáadása alatt válassza a „Meglévő projekt importálása” lehetőséget.
Ezután megkéri, hogy válasszon Git-szolgáltatót. Mivel GitHubot használunk, azt választjuk. Választhat a Bitbucket, a GitLab és az Azure DevOps mellett is.
Ezután felsorolja az összes projektjét. Innen válassza ki a projekthez létrehozott GitHub-tárat. Számunkra ez a „etoppc.com-jamstack-oktatóanyag”. Dönthet úgy is, hogy feltölti a másik általunk létrehozott projektet.
Ezután a rendszer megkéri, hogy válassza ki a telepíteni kívánt ágat, és válassza ki az alapvető összeállítási beállításokat. Egyelőre mindent alapértelmezettre állíthat.
Kattintson a „Depoy Site” elemre a telepítéshez.
Most meg kell várnia, amíg a Netlify elvégzi a dolgát. Az üzembe helyezés után a következő üzenet jelenik meg: „A webhely telepítve van”.
Most kattintson a webhelyre a bal felső sarokban.
Azonban észre fogja venni, hogy a webhely nem töltődik be megfelelően. Ennek az az oka, hogy a Config.toml fájl alap URL-címe nincs megfelelően beállítva. Mivel a Netlify új projekt URL-t hozott létre, hozzá kell adnia a Config.toml fájlhoz.
Esetünkben az oldal a https://animated-beijinho-2baa8b.netlify.app/ címen található
Ez azt jelenti, hogy hozzá kell adnunk a baseURL-t.
Ehhez lépjen a helyi beállításhoz, és módosítsa az értéket.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
A módosítás leküldéséhez a következő parancsot kell futtatnia.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
A Netlify okos. Amikor új véglegesítést észlel, automatikusan újratelepíti a webhelyet.
Ha most betölti webhelyét, akkor az tökéletesen be fog tölteni.
Wooo! Megtetted. Tudom, hogy sokat kell tanulni. Azonban az egész folyamatot intuitívnak fogja találni, ha néhányszor megteszi.
Végső szavak
A Jamstack beindította a fejlesztők új korszakát. Felszabadítja a teljesítményt, és javítja a webhelyek telepítését is. A Jamstack olyan kiváló ökoszisztéma-tagokkal bővült, mint a Hugo és a Netlify. Kétségtelen, hogy innen csak nőni fog.
Ezután nézze meg, hogyan telepítheti az előtér-alkalmazást a Netlify-ba.