Takže před chvílí jsem psal o základech spuštění webu pomocí Jekyll. Vytvořil jsem své první osobní stránky pomocí Jekyll! Opravdu se mi líbila jednoduchost.
Ale časy se změnily. Chutě se změnily. Přestavuji své stránky a tentokrát používám Gatsby!
Stejně jako Jekyll může být Gatsby použit jako generátor statických stránek. Je to skvělé pro weby s portfoliem, blogy, osobní weby atd. A statické weby lze snadno nasadit pomocí stránek Github, Netlify, Surge atd. Ale co mě Gatsby dělá obzvlášť vzrušujícím, je jeho generátor stránek pro React .
Pokud znáte React, pokud jste použili React k vytvoření dynamické webové aplikace, již podnikáte – Gatsby používá knihovnu React.
Takže stejně jako předtím s Jekyllem, pojďme si to rychle projít, abychom mohli začít s Gatsbym.
Za předpokladu, že máte Node a Node Package Manager vše nastaveno a připraveno k použití na vašem počítači, skočte do příkazového řádku, nainstalujte Gatsbyho nástroj CLI a vygenerujte nový web.
$ npm install --global gatsby-cli
$ gatsby new my-new-site https://github.com/gatsbyjs/gatsby-starter-default
Náš první řádek zde pouze nainstaluje balíček Gatsby CLI na náš počítač. Náš druhý řádek je zajímavý kousek zde:gatsby new je náš příkaz k vytvoření nového webu. 'my-new-site' bude vygenerovaný název adresáře. A uvnitř tohoto adresáře budeme mít všechny naše nástroje, abychom mohli začít. A ta URL na konci? To je náš „startér“. Startér je v podstatě téma nebo šablona pro náš web. Zde používáme výchozí.
Zde je struktura souborů, kterou jsme dostali:
Vypadá to trochu složitější než nastavení Jekyll!
V této fázi můžeme použít celou sadu příkazů, které nám poskytuje Gatsby.
gatsby develop - Tím se nastaví místní vývojové prostředí, které se znovu načte při každé změně!
gatsby build - Tím se vygeneruje produkční sestavení, váš statický web, který bude nasazen ve vámi zvolených službách (přepětí, Netlify atd.)
gatsby serve – Tím se nastaví testovací prostředí pro váš vytvořený web.
Zaměřme se na gatsby develop - spusťte tento a budete mít server spuštěný na Localhost:8000. Můj vypadal takto!
Veškerý tento obsah nám byl poskytnut pomocí výchozího startéru Gatsby? Jak se tedy zorientovat a skutečně provést nějaké úpravy? Můžete přejít přímo do složky src a upravit součásti, stejně jako jakákoli stará aplikace React! Pro ilustraci přidám velmi základní komponent.
Pokud nejste obeznámeni s React Components, rychlé a nedbalé vysvětlení je, že jde pouze o funkci Javascriptu, která vrací HTML. Je to trochu víc, ale pro naše účely to bude stačit.
Naše výchozí rozložení tedy vypadá takto:
Vytvořím nový soubor .js v naší složce src/components, abych vytvořil tuto ukázkovou komponentu takto:
(Všimněte si, že jsem k vytvoření této komponenty importoval React! Všechno je to jen React.
Potom importujeme moji novou komponentu příkladu do mého indexu.
To bylo docela snadné! A jak naše stránky nyní vypadají?
Ok... tak to není nejhezčí - ale vidíme, jak snadné je vytvořit obsah HTML a umístit ho na naši stránku! A stejně jako React můžeme předávat rekvizity dětským komponentám, importovat knihovny, sestavovat komponenty založené na třídách nebo funkce a mnoho dalšího.
V současné době stavím nový web pro portfolio, takže zde je vrchol probíhající práce vytvořený pomocí Gatsby:
ještě nekončím! Je to nedokončená práce. Ale to bylo tak snadné udělat kvůli modulární struktuře komponent knihovny React a flexibilitě, kterou mi nabízí. Je to jednoduché paradigma, ale neuvěřitelně silné a hodí se k tolika úpravám.
Až budu připraven, spustím gatsby build která vygeneruje veřejnou složku – a tu mohu nasadit do statické služby dle mého výběru! Je to opravdu tak přímočaré.
Ponořte se do níže uvedených dokumentů Gatsby a React a začněte stavět!
Gatsby
Gatsby návod
Reagovat
React Components