Hogyan készítsünk egy JAMstack blogot a Gatsby.JS, a Lumen és a Netlify segítségével

Néhány óra alatt nulla a gyártáshoz.

Gatsby.JS + Lumen + Netlify

Bevezetés

Ebben a cikkben megmutatom, hogyan hozhat létre személyes blogoldalt a Gatsby.JS segítségével, majd elindulunk a csodálatos Lumen Gatsby kezdőkészlettel, és végül a Netlify segítségével tároljuk ... a folyamat során remélhetőleg többet megtudunk a Gatsby-ről, miért különleges, hogy a JAMStack alkalmazások hogyan különböznek a többi alkalmazás-architektúrától, és tapasztalatokat szerezzünk a Netlify platformon.

Kinek szól ez a cikk?

Ez a cikk minden szintű fejlesztő számára készült, ha kezdő vagy, ez egy nagyszerű lehetőség arra, hogy megtanuljon egy alapvető webhely felépítését, amely mindent tartalmaz, amire szüksége van a működéshez, egy erőteljes keretet fog használni, amely rendkívül bővíthető és megközelíthető. Folytathatja az építést, amint megtanulja, semmi sem pazarolható. Ez egy jó módszer a webfejlesztés megismerésére.

Közép- vagy haladó fejlesztőként megtanulja, milyen egyszerű a Gatsby webhely felállítása és működtetése, és megismerheti a JAMStack architektúra filozófiáját is. Beszélni fogok arról, hogy mi a Gatsby.JS, és részletesebben ismertetjük néhány esetleges szinkronizációt / getchasát.

Ha van háttere a React.JS-ben, akkor Gatsby ismerős lesz. A tartalom bejutása a Gatsby webhelyre ugyanolyan egyszerű, mint a jelölés írása, de a keret rendkívül erőteljes, hatalmas ökoszisztéma működik együtt, és nem korlátozódik a kis projektekre.

Windows platformon fejlesztem, a Microsoft WSL 2 előnézeti verziójával, tapasztaltam némi gubancot annak felépítésével és futtatásával kapcsolatban, tehát mellékeltem néhány bónuszjegyet a Windows felhasználók számára ... ha egyszer elkészíted, akkor működik nagy. Ha Mac vagy Linux disztrót használ, valószínűleg nem tapasztalja meg ezeket a problémákat / kihagyhatja ezeket a szakaszokat.

A Gatsby közösség nagyon hasznos, reagálnak a kérdésekre, viszályt mutatnak és erőteljesen jelen vannak a Stack Overflow-ban.

A Gatsby tapasztalata nélkül indítottam ezt a projektet, és ez volt az első alkalom, hogy Netlify-t használtam, a célom egy webhely felépítése volt, és <1 nap alatt írta ezt a cikket. Kellemesen meglepett a tapasztalat, elkészítettem - bár néhány idegesítő Windows-hoz kapcsolódó dudorral az úton. Örülök, hogy megoszthattam ezeknek a problémáknak a javításait.

Miért indítson el személyes blogot 2020-ban?

Meg akartam tanulni Gatsby-t és még többet a statikus webhely-generátorokról, de ebben az évben valójában szükségem volt egy jó webhelyre a munkám bemutatására ...

Több mint 20 éve dolgozom webes alkalmazásokon, a 90-es években volt egy zenei blogom, de ez az első alkalom, hogy a saját munkámra összpontosító profi blogot készítek.

Soha nem volt fontosabb az online munkahelyi jelenlét megállapítása; Olyan sok munkánk van, amely már online, jó, ha megosztjuk tapasztalatait másokkal, és egy személyes blog egy nagyszerű módszer a kapcsolatok naprakészen tartására. Megmutatja, mit csináltál és mit csináltál.

Lehet, hogy azt kérdezi, miért nem használna egy meglévő szolgáltatást, például a Wix, a SquareSpace vagy a Wordpress? Ez mind remek szolgáltatás, és nagyon ajánlom használni, ha nincs szüksége a belső ellenőrzésre. Használjon felügyelt szolgáltatást, ha nem akarja megismerni a fejlesztést.

Fejlesztő vagyok, tehát azt akarom, hogy ellenőrizhessem, mit hozok létre, azt akarom, hogy kibővítsem azt, ahogy én látom. Pontosabban, a zene megosztásával kapcsolatos funkciókat kívánok hozzáadni, ez egy másik szenvedélyem, de ezeknek a jövőbeli funkcióknak speciális testreszabást igényelnek.

Szükségem van valamire, amely méretezhető, de könnyen karbantartható is. Képesnek kell lennem arra, hogy gyorsan frissítsem; Szükségem van rá, hogy megtaláljuk a keresőmotorokban, és lehetőleg el akarom kerülni a drága szerverek fölösleges terhelését. A JAMStack architektúra jó jelölés az ilyen alkalmazásokhoz.

A Wokandapix fényképe a Pixabay-ből

Mi a JAMStack?

A JAM a Javascript, API és Markup kifejezéseket jelenti. Hogy őszinte legyek, amikor 2016-ban először hallottam a „JAMStack” kifejezést, lehunyta a szemét ... még egy veremre gondoltam. A technológiai iparág nagyon fontos a régi koncepciók újracsomagolásához és marketingjéhez, hogy egyes magánszemélyek és vállalatok érdekei érvényesüljenek.

… Tehát kezdetben szkeptikus voltam, kezdetben nem igazán értettem meg… gondoltam, hogy nem ezek csak statikus helyek? Most megértem, mi a különbség, és miért fontos. A JAM megértése érdekében hasznos a halmok történetéről beszélni, ez kissé meghaladja a cikk hatókörét, de megpróbálok adni egy alapvetõ alapot:

A kezdeti időkben csak statikus webhelyek voltak HTML-ből, később a szerverek képesek voltak olyan nyelveken írt kódot végrehajtani, mint a Perl, ezeket Common Gateway Interface (CGI) alkalmazásoknak nevezték el. Ezek a szerver alkalmazások vezetnének az utat a „LAMP” veremhez, amely a Linux, az Apache, a MySQL és a PHP számára állt.

A kiszolgálószoftvereknek ez a kombinációja nagyon hatalmasnak és hihetetlenül népszerűnek bizonyult, kiszolgálóoldali alkalmazások új generációjához vezetett, statikus HTML-t generált és kiszolgálóoldalról kiszolgált. Megjegyzés: ott voltak WAMP és MAMP verem, amelyeket Windows, illetve Macintosh használtak.

Később a divat MEAN stack-ekké (MongoDB, Express.js, AngularJS és Node.js) és ezek ekvivalenseiké válna. Az AJAX dinamikus jellegű webhelyeket vezetett be, több logika költözött az ügyfélbe, többnyire a JavaScriptet használva az alkalmazásprogramozási felületekhez (API-khoz) való kapcsolódáshoz. Az ügyfelet elválasztották a szervertől, de még mindig voltak olyan kiszolgálók, amelyekkel kellett szembenézniük.

A JAM-verem a felhő és a kiszolgáló nélküli alkalmazások megjelenésével érkezik.

… A JAM különlegessé teszi, hogy nincs szüksége kiszolgálókra, vagy pontosabban kiszolgáló nélküli architektúrára támaszkodik…. bejuthatunk a „kiszolgáló nélküli” szemantikájába, mert technikailag a szerverről van szó ... de a különbség az, hogy a szerver része már nem a te felelőssége, nem kell beállítania a kiszolgálókat a méretezéshez, és az API-k felhasználhatják a felügyelt szolgáltatások, például az AWS AppSync használatával rendelkezhet olyan API-val, amely a Lambda kiszolgálólogikát használja, és az adatbázis-munkát, például a Dynamo szolgáltatásokat átruházza. Vannak hasonló szolgáltatások, például a Microsoft Azure vagy a Netlify funkciók.

A JAMStack webhelyek teljes egészében Gitben élnek, könnyen klónozhatók, és ha olyan webhelyen tárolódnak, mint például a Netlify, akkor azokat közvetlenül egy CDN-ből lehet kiszolgálni. Az „él” közelében élő alkalmazások jobb felhasználói élményt nyújtanak, könnyen méretezhetők, így nem kell aggódnia a kiépítés miatt.

A hosszú történet rövidítéséhez korai napok vannak, de a JAM jobb teljesítményt, nagyobb biztonságot, olcsóbb / könnyebb méretezést és jobb fejlesztői élményt ígér.

Mi a Gatsby.JS?

A Gatsby.JS 2017. júliusában jelent meg. Ez egy statikus webhelygenerátor, pontosabban progresszív webes alkalmazásokat (PWA-k) generál. A React.JS-en alapszik, amely a legnépszerűbb reaktív keret (3,5 millió felhasználó), és a GraphQL-t is erősen használja egy belső adatréteg felépítéséhez.

A Gatsby használatához nem kell tudnia a Reaktust vagy a GraphQL-t. A Gatsby segítségével webhelyeket generálhat Markdown, JSON fájlokból vagy más tartalmi API-kból. A Gatsby belső motoros letapogatása megvizsgálja az Ön tartalmát, és a GraphQL segítségével létrehoz egy helyi adatréteget, amikor megérinti az építést, statikus tartalmat hoz létre, amely nagy teljesítményű, könnyen kezelhető és indexelhető a keresőmotorok által. A bővítményeket webhelytérképek készítésére használják olyan keresőmotorokhoz, mint a Google.

Valami igazán különleges a Gatsby-nál a pluginok, témák és indítókészletek ökoszisztémája. Hatalmas számú könnyen megközelíthető kiterjesztés van.

Ebben az oktatóanyagban webhelyünket egyszerű jelölési fájlokból állítjuk elő, amelyeket közvetlenül a szövegszerkesztőben vagy a Netlify CMS által biztosított WYSIWYG felülettel szerkeszthetünk.

Mi a Markdown?

A Markdown egy könnyű jelölőnyelv egyszerű szöveges formázási szintaxissal. A Markdown azon filozófiája, hogy a szöveges dokumentumoknak olvashatónak kell lenniük, különösképpen megkönnyítve az internetes írást, mivel könnyen konvertálódnak HTML-formátumba.

A Markdown viszonylag könnyen írható, és sok alkalmazás használja, nevezetesen a Közepes, a Stack Overflow, a Skype, a Slack és a Wikipedia. A Markdown szintaxisáról itt olvashat.

Mi az a Lumen Starter Kit és miért kellene azt használni?

Az egyik legmenőbb dolog Gatsby-nál, hogy hatalmas ökoszisztémája van. A Lumen az egyik legnépszerűbb blogindító készlet, a „kezdőkészlet” egy előre meghatározott dolgot ad neked, amire szüksége van az induláshoz… felhasználhatja fejlesztési erőfeszítéseinek indítására… gyakran a Gatsby kezdőkészletek mindent megadnak, amire szüksége van, minimálisan szükséges módosítás… általában csak egy konfigurációs fájllal és jelölő fájlokkal dolgozik.

A Lumen a következő funkciókat kínálja a dobozból:

  • Lost Grid - A Lost Grid egy PostCSS-be beépített nagy teljesítményű rácsrendszer, amely bármilyen előfeldolgozóval és akár vanília CSS-vel együtt működik.
  • Modern betűtípus verem.
  • Gyönyörű tipográfia a matejlatin / Gutenberg ihlette.
  • Szintaxis kiemelés a kódblokkokban a PrismJS használatával.
  • Mobil első megközelítés a fejlesztésben.
  • Archívum címkék és kategóriák szerint rendezve.
  • Lapok támogatása.
  • Netlify CMS támogatás.
  • A Google Analytics.
  • Disqus megjegyzések.
  • Áramlás statikus típusának ellenőrzése.

Mi a Netlify?

A Netlify egy sokoldalú platform a modern webprojektek automatizálásához. Különféle szolgáltatásokat nyújtanak, beleértve a tárhelyet és a szerver nélküli funkciókat is. Projektünk a Netlify-t használja a hostoláshoz és a DNS-hez, a Netlify CMS-t is a jelölő tartalom szerkesztéséhez használjuk, de valójában nem kell ezt használni. Csak szerkesztheti a jelölést közvetlenül, és megnyomhatja az ágára.

A Netlify egy nagyon egyszerű összeállítási szolgáltatást nyújt, amely közvetlenül a Git repo-jából vonulhat fel, és kiválthatja a build + telepítést a Netlify tárhelyszolgáltatásokhoz. Ez egy egyszerű eljárás a webhely közzétételére és a megfelelő egyéni domain használatával történő megjelenítésére.

A Netlify csomagokat kínál kezdőknek, profiknak és vállalkozásoknak. A kezdő réteget fogjuk használni, ami nem fog semmit sem fizetni ... azzal az ingyenes résszel továbbra is megkaphatja a Git-integrációt, a folyamatos telepítést és az egyedi tartományokat.

Netlify CMS

A Netlify CMS egy nyílt forráskódú, egyoldalas alkalmazás, amely a React nyelven íródott, és lehetővé teszi a Git-lerakat tartalmi és adatfájljainak szerkesztését. A nyers tartalomnak a statikus webhely-tárolóban való tárolása ideális módszer, amely lehetővé teszi mind a kód, mind a tartalom együttes verzióját, de ehhez a nem műszaki szerkesztőknek szüksége van egy olyan szolgáltatásra, mint a GitHub. A Netlify CMS-t kifejezetten e hiányosság áthidalására hozták létre, biztosítva egy szilárd felületet, amely jól működik mind a technikai, mind a nem technikai felhasználók számára, és az API-n keresztül kölcsönhatásba lép a statikus webhely-tárolóval, így minden változtatás kötelezettséget eredményez.
A Netlify CMS elsődleges célja, hogy jól működjön együtt a modern webhelygenerátorokkal, mint például a Gatsby. A telepítés általában csak index.html fájlt és YAML konfigurációs fájlt igényel, de a Netlify CMS Gatsby pluginját kihasználva automatikusan telepítheti és összeállíthatja a CMS-t egy statikus webhely mellett.

Előfeltételek

Rendben, tehát mi kell az induláshoz!

Javaslom az Ubuntu LTS használatát, de technikailag ezeknek az utasításoknak Windows-hoz kell működniük a WSL, a legtöbb Linux disztró vagy a Mac esetén. Telepíteni fogom a Windows Subsystem for Linux 2. verzióját.

Gatsby azt ajánlja, hogy telepítse a Node LTS-t, amely az írás idején 12. verzió volt. A Node telepítésének különféle módjai vannak, a hivatalos utasításokat itt találja.

Szüksége lesz NPM-re és fonalra, a telepítési útmutatót mellékeljük. A fonalak hivatalos telepítési útmutatója itt található.

Szüksége lesz egy Github fiókra és Git-re.

(opcionális) Előfordulhat, hogy vásárol egyéni domaineket, olcsó domainhez ajánlom a GoDaddy alkalmazást. Használhatja azonban a mellékelt ingyenes indító Netlify URL-t.

Windows Gotchas

Probléma van a Gatsby és a Windows útvonalakkal, ha WSL-t használ, a Windows megkísérelheti az útnevek kényszerítését, mivel a Windows nem érzékeny a kis- és nagybetűkre, ha követi az utasításokat, akkor rendben lesz, de általában a megfelelőbetűt kell beírnia. Linux alatt. A kérdésről a Gatsby hivatalos oldalán olvashat.

Kerülje a / mnt / meghajtók használatát, ha WSL 2-t használ, most a Linux lemezek virtuális merevlemezek, és bármi, ami a Linux rendszeren kívül van, gyenge teljesítményű, nemcsak hogy a forró modul újratöltése (HMR) nem fog működni. A repo-t létre kell hoznia a Linux rendszerben, ezt beillesztettem a telepítési megjegyzésekbe.

A WSL 2-sel kapcsolatos tapasztalataimról itt olvashatsz.

Telepítési megjegyzések

Telepítem az Ubuntu LTS 18.04-tel a WSL 2-en.

Az Ubuntu telepítése tiszta, tehát nincs még csomópontom sem. A Node.js legújabb verziójának telepítése előtt hozzá kell adnia annak PPA-ját ... futtatnia kell az alábbi parancsokat a szükséges függőségek telepítéséhez.

  1. Lehetővé teszi a 12. csomópont telepítését. Az "apt-get nodejs" nem egyszerűen elvégezhető, mert a csomagokat frissíteni kell:
sudo apt frissítés

Megjegyzés: az apt-get frissítés valójában nem telepíti a szoftver új verzióit. Ehelyett frissíti a frissítést igénylő csomagok frissítési csomaglistáit, valamint az éppen a lerakatba érkező új csomagokat.

apt frissítés

Ezután írja be ezt a parancsot (megadhatja az 'Y' -t, amikor a rendszer kéri, és választhatja) a szolgáltatások újraindítása kérdezés nélkül):

sudo apt install build-Essent apt-transport-https lsb-release ca-Certificates curl
apt install build-essential

Most megcsinálhatjuk a 12. csomópontot a következő parancsokkal:

sudo apt-get install curl curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

Végül beírhatjuk a install nodejs parancsot:

sudo apt-get install -y nodejs
göndör csomópont

Most ellenőrizze a csomópont + npm verziókat, ellenőrizze, hogy helyesek:

csomópont -v npm -v
csomópont -v és npm -v

2. Telepítse a fonalat hasonló módon, az elővigyázatossággal fogjuk eltávolítani a régi verziót, ha az eltérő viselkedésű, ha van, és adjuk meg a következő parancsokat:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stabil main" | sudo tee /etc/apt/sources.list.d/yarn.list

Lehetővé teszi a cmdtest eltávolítását, hogy megbizonyosodjunk arról, hogy a fonal megfelelő verziója van-e telepítve:

sudo apt remove cmdtest

Akkor végül:

sudo apt frissítés && sudo apt install fonalak

3. Konfigurálja a Git alkalmazást, ha még nem tette a következő parancsokat:

git config --global user.email "[email protected]" git config --global user.name "Your Name"

4. Ezután a Gatsby CLI-t globálisan telepítjük:

npm install -g gatsby-cli
gatsby cli telepítve

5. Ezután át kell állítanunk az otthoni könyvtárat, ahol behúzzuk az indító repót, és vegye figyelembe, ha Windows WSL-t használ, ez különösen fontos, mivel az / mnt / mappák tárolása problematikus (lásd: Windows gotchas, Windows mount) kívül helyezkednek el a Linux fájlrendszeren, és a Gatsby CLI nem veszi át a fájlváltoztatásokat a modul forró újratöltése érdekében), cserélje ki a_linux_username nevét a linux felhasználónevére:

cd / home / your_linux_username

6. Most elindíthatjuk a Gatsby-t a Lumen kezdőkészlettel, a következő parancsokkal (megjegyzés: jó ötlet a Fonalfrissítést elvégezni, amint azt a fejlesztés előtt írtuk, különben megkérjük, hogy tegye meg következőként):

gatsby new myblog https://github.com/alxshelepenok/gatsby-starter-lumen
CD myblog
fonal frissítés
gatsby fejleszteni

Webhelyed jelenleg a http: // localhost: 8000 címen fut

Lát egy második linket is: http: // localhost: 8000 / ___ graphql. Ez egy olyan eszköz, amellyel kísérletezhet az adatok lekérdezésével. További információ az eszköz használatáról a Gatsby útmutatóban.

Nyissa meg a blog könyvtárat a választott kódszerkesztőben, és szerkessze az src / templates / index-template.js fájlt. Mentse el a módosításokat, és a böngészőnek valós időben frissülnie kell.

localhost: 8000

7. Ezután közzétesszük a Git repo-t, erre szükségünk lesz a Netlify-hoz, a Github for Windows rendszert használom, de használhat ekvivalens parancsokat (cserélje ki a felhasználói_nevet és a saját projektet:

git távoli hozzáadás eredetéhez https://github.com/your_username/myproject.git
git push származási mester
Helyi repót adok hozzáaz Ubuntu otthoni mappájának kiválasztása

Megjegyzés: itt a WSL 2-et használom, és ez valójában egy Windows 10 hálózati meghajtójában található. A Windows fájlrendszer használata hibákat és a teljesítmény romlását eredményezheti.

Nyújtsa be repóját

8. Következő lépés: feliratkozunk a Netlify-ra, majd bejelentkezünk:

9. Következő lépés egy webhely felvétele a Git-ből, egy felbukkanó ablak jelenik meg az engedélyezéshez, kattintson az 'Új webhely Gitről' gombra:

Ne feledje, hogy ha nem látja a lerakatot, akkor kattintson a 'Netlify alkalmazás konfigurálása a GitHub-ra' linkre.

Ezután kattintson a "Telepítés a webhelyre" elemre:

Példa a telepítésre folyamatban

Ha minden jól megy, akkor a webhely telepítésre kerül, és innen beállíthat egyéni tartományt és HTTPS-t (kövesse a képernyőn megjelenő utasításokat):

Megjegyzés: Most rákattinthat a webhely linkre a felső panelen, a webhelyének élőnek kell lennie !:

Lumen + Gatsby fut a Netlify-on

10. Rendben, tehát hogyan kezdje el frissíteni a webhelyet? ... van egy config.js fájl az alkalmazás gyökérkönyvtárában, amelyen különféle lehetőségek találhatók kapcsolattartókra, életrajzra, címre stb. A másik fontos mappa a tartalom / oldalak, itt megtalálja a weboldal létrehozásához használt különféle jelölőfájlokat, ha a 'gatsby develo' fut, akkor egyszerűen frissítenie kell a jelölést, és a helyi alkalmazásnak automatikusan újratöltenie kell, akkor egyszerűen csak a változtatások git-re való visszaszorítását kell elvégeznie. .

Megjegyzés: a config.js frissítése nem automatikusan újratöltődik, mint a jelölő fájlok.

a tartalom + config.js helye a VS kódban

11. A Netlify CMS segítségével frissítheti a webhelyet a gyártásban egy felhasználóbarát WYSIWYG szerkesztő segítségével, de először engedélyeznie kell a Netlify Identity és a Git Gateway szolgáltatást a Netlify Identity beállításokban:

Identitás engedélyezéseA Git Gateway engedélyezése

Most már hozzáférhet a / admin mappához a webhelyén, és kattintson a „Bejelentkezés Netlify Identityval” elemre.

Válassza ki a szerkeszteni kívánt tartalmat, vagy adjon hozzá új oldalakatSzerkessze az oldalait.

Közvetlenül az alkalmazásból közzéteheti a változtatásokat, és a Netlify megkezdi az újonnan létrehozott összeállítás telepítését.

et voilà! -A saját JAMstack személyes blogod, amelyet a Netlify üzemeltetett.

Következő lépések

VS kód használata esetén telepítenie kell a Flow gépelés kiterjesztését:

Flow Language támogatás

Ha van egy egyedi domain, akkor regisztrálja a webhelyét a Google-on. Ehhez TXT-rekordot kell hozzáadnia a DNS-kiszolgálóhoz a webhely azonosságának ellenőrzése céljából.

A config.js mező rendelkezik az AnalyticsID-vel, jó ötlet, ha regisztrál a Google Analytics-hez, és megszerezheti saját azonosítóját, hogy nyomon tudja követni a felhasználást és a linket, aki összekapcsolja webhelyét.

A Gatsby / Lumen kezdőkészülék szintén automatikusan létrehoz egy webhelytérképet, regisztrálhatja webhelyét a Google Search Console-on.

Következtetés

Remélem tetszett ez a cikk. Rengeteg felfedezésre vár a Gatsby. Azt hiszem, ez egy nagyszerű projekt, győződjön meg róla, hogy megnézte a plugin könyvtárat. A JAMStack nagyon izgalmas. Ez csak a kezdet.

… Amint említettem, éppen ma építettem fel saját személyes blogomat;) itt olvashatod el. Az összes forráskód elérhetővé vált a Githubon. Nagyon köszönöm a Gatsby csapatot és a Lumen & Netlify munkatársait.

Sok szerencsét a projekthez!