Gatsby.js: Instalacja

2.19.12+

0:00Okej dosyć teorii przechodzimy do praktyki zaczniemy zaraz

0:04budować nasz pierwszy projekt w gatsby i zanim jednak

0:08przejdziemy do pisania kodu to chciałbym ci pokazać co właściwie będziemy robić myślę

0:12że w kursie zawsze fajnie mieć jakiś cel do którego będziemy dążyć dlatego przygotowałem

0:16stronę którą będziemy sobie wdrażać jest to strona pani architekt nazywa

0:21się Abigail Donutdough tworzy

0:25projekty ma swoją stronę jej firma nazywa się hatta i ma

0:29tutaj 4 podstrony about articles galery i contact i

0:33ma też stronę główną i myślę że to jest taki fajny początek właśnie

0:37do tego żeby nauczyć się gatsby ponieważ pokażę to nam w jaki

0:41sposób obsługiwać obrazki w jaki sposób tworzyć artykuły tak jak

0:45na blogu pokażę ci też jak stworzyć formularz kontaktowy i zobaczysz na własne oczy

0:50że gatsby to tak naprawdę taki react tylko trochę szybszy i trochę

0:54wygodniejszy bo tworzenie tutaj tego formularza kontaktowego będzie pewnie

0:58zawierać jakieś takie reaktywne elementy i zobaczysz że tutaj

1:02tak naprawdę gatsby nie jest generatorem stron statycznych tak jak

1:06definicja mówi tylko bardziej generatorem aplikacji ponieważ tam gdzie chcemy

1:11ta reaktywność będzie obecna tam gdzie nie chcemy będziemy po prostu ładować statyczny

1:15content więc jest to naprawdę bardzo uniwersalne narzędzie a teraz przyjdziemy sobie do

1:19dokumentacji gatsby bardzo często będziemy się do niej tutaj odwoływać to jest naprawdę świetnie

1:23przygotowana dokumentacja w razie zwątpienia warto wykorzystywać tutaj ten search

1:27który zawsze będzie nam podpowiadał co i jak jeśli będą jakieś

1:31problemy z pluginami można wejść sobie tutaj mamy całą bibliotekę pluginów do gatsby

1:35które możemy sobie przejrzeć zobaczyć ich dokumentację osobno więc będziemy

1:40tutaj dość często sobie zaglądać pierwsze co musimy zrobić to oczywiście stworzyć

1:45nasz projekt w gatsby i to akurat znam na pamięć nie muszę posługiwać się dokumentacją

1:49najpierw musimy zainstalować sobie gatsby cli które pomoże nam później w tworzeniu projektów

1:53więc to co musimy zrobić to w npm po prostu zainstalować sobie tę

1:58paczkę ja korzystam tutaj z node 13.1.0 to jest aktualna

2:02wersja w momencie kiedy nagrywam ten kurs ale wydaje mi się że nawet

2:06w przyszłości jeśli wyjdą nowe nie będzie żadnego problemu jakiś czas temu jeszcze używałem

2:10node 10 do gatsby do tej samej wersji z której teraz korzystam więc

2:14gatsby po prostu jest kompatybilny z tymi wersjami node nie ma się

2:18o co martwić teraz zainstalujmy sobie gatsby cli instalujemy

2:23tak npm install flaga g od global gatsby

2:28cli czekamy aż się zainstaluję po zainstalowaniu

2:32możemy wykorzystać już komendę gatsby new i tworzymy

2:37nasz projekt możemy nazwać go jak chcemy ja akurat nazwę go hatta

2:41website ponieważ tak nazywa się strona naszej

2:45architektki zauważ że jestem w

2:49folderze 02 ponieważ to jest drugi rozdział tego kursu w pierwszym rozdziale mieliśmy samą

2:53teorię ale żeby było ci łatwiej się poruszać po tym kursie zachowałem numerację

2:57tych folderów więc jesteśmy teraz w rozdziale drugim stąd folder 02

3:02wewnątrz niego tworzę folder hatta website który będzie zawierał nasz projekt

3:06teraz musimy chwilkę poczekać to zejmie parę minut aż gatsby zainstaluje wszystkie

3:10paczki i po ukończeniu instalacji mamy informację

3:14że możemy przejść do naszego folderu hatta website a następnie

3:18odpalić komendę gatsby develop żeby zacząć nasz development więc teraz przejdę sobie

3:22do hatta i

3:27słuchając się mojego cli wpiszę gatsby develop zobaczymy co teraz się stanie

3:31w momencie

3:35kiedy tworzę ten kurs w gatsbypojawił się jakiś niegroźny błąd on

3:39nic tam na szczęście nie psuje także w razie gdyby pojawił się też u ciebie nie

3:44przejmuj się nim czekamy teraz właśnie aż ludzie od gatsby albo ktoś po

3:48prostu kto ma więcej czasu i trochę commituje do open source naprawi

3:52ten błąd ale jest to tylko informacja o tym że jedna z metod która jest wykorzystana w

3:56gatsby po prostu jest deprecated czyli już jest nieużywana okej

4:01i po wykonaniu tej komendy gatsby przeleciał się przez wszystkie operacje które musiał wykonać a

4:06następnie dał nam dwa linki tutaj mamy localhost 8000 i localhost

4:108000 graphql do graphql przejdziemy sobie w dalszej części tego

4:14kursu na razie nie będziemy się nim zajmować ale przejdźmy sobie do tego localuhost zobaczymy co

4:18tutaj się znajduje i jak

4:24widzisz mamy tutaj default starter czyli po prostu taki domyślny

4:28template gatsby który posłuży nam jako szkielet naszego

4:32projektu oczywiście będziemy go modyfikować ale to jest fajne że gatsby po

4:36prostu przygotował dla nas taki pierwszy szkielecik gdzie możemy zobaczyć sobie kilka przykładów

4:40tego jak na przykład wykorzystuje się obrazki w gatsby jak wykorzystuje się linki

4:45i tego typu rzeczy ale to zrobimy już następnej lekcji