Gatsby.js jest rewelacyjnym frameworkiem, którego głównym zadaniem jest generowanie stron statycznych. Dzięki czemu czas ładowania strony opartej na Gatsby.js jest kilkukrotnie lepsze od wielu obecnie popularnych technologii.
Po wielu latach pracy na Wordpress oraz po stworzeniu kilkudziesięciu szablonów, do utworzenia własnego bloga wybrałem Gatsby.js. Zgadza się. I co więcej? Była to rewelacyjna decyzja!
Nigdy wcześniej nie miałem do czynienia z Gatsby.js i bez wcześniejszego przygotowania w ciągu kilku dni byłem w stanie od zera stworzyć w pełni funkcjonalnego bloga.
Blog w Gatsby.js, który stworzymy będzie oparty na architekturze Jamstack, która w ostatnim czasie znacznie zyskuje na popularności.
Gatsby.js vs Wordpress
Pierwszą i chyba najważniejszą różnicą jest bez wątpienia performance strony. Strona napisana w Gatsby.js może ładować się nawet 3 razy szybciej od Wordpressa! Wszystko super, ale jak to działa?
Gatsby.js podczas budowania aplikacji pobiera wszystkie dane z bazy danych, a następnie generuje statyczne pliki HTML. W momencie, gdy Wordpress zaczyna pobierać posty, Gatsby.js ma je już gotowe.
Kolejną zaletą jest przyjemny i nowoczesny stack technologiczny. Gatsby.js oparty jest na React.js, dzięki czemu przy tworzeniu bloga nauczysz w tej chwili najbardziej popularnego frameworka JavaScript.
Ostatnią zaletą, którą nawet już wspomniałem we wstępie jest prostota. Jeśli znasz podstawy Reacta, to z małą pomocą dokumentacji Gatsby.js jesteś w stanie stworzyć bloga bez większych problemów.
Skoro wiemy już co jest grane, czas przejść do akcji.
GraphCMS - darmowy CMS z dostępem do API
Pierwszą rzeczą, jaką będziemy musieli zrobić, jest konfiguracja GraphCMS. Jest to bardzo szybki HeadlessCMS z dostępem do API, którego w prosty sposób jesteśmy w stanie połączyć z Gatsby.js.
Darmowy plan pozwoli Ci na dodanie 5 000 postów oraz obrazów. Ten limit spokojnie wystarczy na średniej wielkości bloga.
Tworzenie projektu
- Po stworzeniu konta logujemy się do aplikacji
- Tworzymy nowy pusty projekt
- Wybieramy region najbliżej nas, a więc Frankfurt
- Następnie będziemy poproszeni o wybór planu, oczywiście klikamy darmowy
- Na chwilę obecną nie ma potrzeby dodawania użytkowników, więc klikamy "Invite later"
Podstawowa konfiguracja
Skoro tworzenie projektu mamy już za sobą możemy zabrać się za konfigurację. Na początek stworzymy "Schema", czyli ustalimy jakie pola będziemy potrzebowali w naszym poście.
- W nawigacji wybieramy "Schema"
- Tworzymy nowy model, który nazywamy "Post"
- Dodajemy podstawowe pola: title, content oraz slug
To wszystko, czego potrzebujemy na tę chwilę, jeśli chodzi o konfigurację. Dodajmy nasz pierwszy post!
Pierwszy post
Przechodzimy do zakładki content i tworzymy nasz pierwszy post.
Klikamy Publish i tyle. Nasz pierwszy post jest gotowy!
Ustawienia API
Ostatnia rzecz jaką musimy zrobić, to dodanie uprawnień do naszego API.
Przechodzimy więc do ustawień projektu, a następnie do zakładki "API Access".
Następnie przy "Public Content API" klikamy "Create permission":
oraz ustawiamy uprawnienia do odczytu (Read) dla naszego modelu "Post":
Gatsby.js - kodowanie bloga
Skoro nasz CMS jest już skonfigurowany, możemy przejść do kodowania naszego bloga w Gatsby.js. Kod źródłowy możesz znaleźć w moim repozytorium na GitHub.
Instalacja i konfiguracja paczek
Zaczniemy od zainstalowania koniecznych paczek:
- React - wersja 17.0.2
- React DOM - wersja 17.0.2
- Gatsby - wersja 4.3.0
- Gatsby Source Graphql - wersja 4.3.0
Stwórz nowy folder, otwórz konsolę i wprowadź:
npm install react react-dom gatsby gatsby-source-graphql
Gdy już zainstalują się wszystkie paczki, stwórz plik gatsby-config.js
i uzupełnij go tym kodem:
module.exports = {
plugins: [
{
resolve: 'gatsby-source-graphql',
options: {
typeName: 'Blog',
fieldName: 'blog',
url: 'YOUR_API_URL'
}
}
]
};
oraz zastąp YOUR_API_URL
linkiem do Twojego API, który możesz znaleźć w GraphCMS w zakładce API Access.
Strona główna
Tworzymy nowy folder src
, w nim folder pages
, a następnie plik index.js
.
Zacznijmy od stworzenia komponentu IndexPage
:
import React from 'react';
const IndexPage = () => {
return (
<div>
Hello world
</div>
);
}
export default IndexPage;
Pobieranie postów
Aby pobrać posty znajdujące się w GraphCMS, musimy użyć useStaticQuery
oraz graphql
z biblioteki gatsby
.
import { graphql, useStaticQuery } from 'gatsby';
Oraz tworzymy nasze pierwsze query
zaraz pod deklaracją komponentu IndexPage
.
const postsQuery = graphql`
query PostsQuery {
blog {
posts {
title
slug
}
}
}
`;
Gdzie blog
to fieldName
w naszym gatsby-config.js
, a title, content, slug
to nazwy pól, które stworzyliśmy w modelu Post w GraphCMS.
Następnie wywołujemy nasze query za pomocą:
const posts = useStaticQuery( postsQuery );
Dodajemy je przed return
w IndexPage
.
Nasz dotychczasowy kod wygląda tak:
import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
const IndexPage = () => {
const posts = useStaticQuery( postsQuery );
return (
<div>
Hello world
</div>
);
}
const postsQuery = graphql`
query PostsQuery {
blog {
posts {
id
title
slug
}
}
}
`;
export default IndexPage;
Jesteśmy gotowi, aby sprawdzić jak nasza strona działa na chwilę obecną, ale zanim to zrobimy wypiszmy sobie w konsoli to, co zwraca nam nasze query
:
console.log(posts);
Teraz otwieramy nasz projekt w konsoli i wpisujemy:
gatsby develop
Co stworzy serwer na porcie 8000
.
Przechodzimy na stronę http://localhost:8000/ i powinniśmy ujrzeć "Hello world".
Gdy zajrzymy do konsoli zobaczymy, że pojawił się tam nasz post:
{
blog {
posts [
{
content: "Hello world"
slug: "my-first-post"
title: "My first post"
}
]
}
}
Jak widzisz nasz kod zwrócił bardzo zagnieżdżony obiekt. Zrestrukturyzujmy go troszeczkę, aby było nam łatwiej:
const { blog: { posts } } = useStaticQuery( postsQuery );
Teraz w konsoli wyświetla nam się już sama tablica obiektów z naszym postem.
Wyświetlanie postów
Zajmijmy się teraz wyświetleniem naszego posta, przy pomocy map
:
{posts.map( post => (
<div key={post.id}>
<h2>{post.title}</h2>
</div>
) )}
Które wpisujemy zamiast początkowego "Hello world". Naszym oczom powinien ukazać się tytuł posta.
Generowanie strony postu
Skoro pobieranie postów mamy już za sobą, możemy wygenerować stronę wpisu.
Stwórzmy plik gatsby-node.js
w głównym folderze naszego projektu:
exports.createPages = async( {graphql, actions: {createPage}} ) => {
const { data: { blog: { posts } } } = await graphql( `
query PostsQuery {
blog {
posts {
title
content {
html
}
slug
}
}
}
` );
posts.forEach( ( post ) => createPage( {
path: `/${post.slug}`,
component: require.resolve( './src/templates/PostPage.js' ),
context: {
post
}
} )
);
};
Ta funkcja pobiera nam posty w identyczny sposób, jak w naszym index.js
, dodając tylko content
. Następnie wywołuje metodę forEach
i używa funkcji createPage
z biblioteki gatsby
, aby wygenerować stronę wpisu.
Jak widzisz w createPage
podaliśmy ścieżkę do szablonu wpisu, którego jeszcze nie mamy. Zajmijmy się tym.
Stwórzmy teraz w folderze src
nowy folder templates
, a w nim PostPage.js
, który będzie szablonem naszego posta. Następnie tworzymy komponent, który w props
będzie przyjmował post.
import React from 'react';
const PostPage = ( { pageContext: { post } } ) => {
return (
<div>
<h1>{post.title}</h1>
</div>
);
}
export default PostPage;
Funkcja createPage
przekaże do naszego szablonu props, który w polu pageContext
będzie zawierał wszystkie dane posta pobranego z GraphCMS.
Zrestartujmy nasz serwer jeszcze raz używając gatsby develop
. Teraz po wejściu na stronę http://localhost:8000/my-first-post powinieneś ujrzeć tytuł naszego posta.
Gratulacje, Twój pierwszy post został wygenerowany!
Dodajmy teraz jeszcze wyświetlanie treści wpisu. Pod tytułem posta dodajmy:
<div dangerouslySetInnerHTML={ {__html: post.content.html} } />
Za pomocą dangerouslySetInnerHTML
jesteśmy w stanie przekazać treść naszego posta do Reacta.
Linkowanie do wpisu ze strony głównej
Ostatnią rzeczą będzie podlinkowanie do naszego wpisu ze strony głównej:
import React from 'react';
import { graphql, useStaticQuery, Link } from 'gatsby';
const IndexPage = () => {
const { blog: { posts } } = useStaticQuery( postsQuery );
return (
<div>
{posts.map( post => (
<div>
<h2>{post.title}</h2>
<Link to={post.slug}>Read more</Link>
</div>
) )}
</div>
);
}
const postsQuery = graphql`
query PostsQuery {
blog {
posts {
title
slug
}
}
}
`;
export default IndexPage;
Pamiętajmy o zaimportowaniu Link
z biblioteki gatsby
. To wszystko! Oczywiście stylowanie bloga zostawiam Tobie.
Prawda, że proste?
Jedyne co teraz musisz zrobić, to wpisać komendę gatsby develop
. Powinien pojawić się folder public
, którego zawartość możesz śmiało wrzucić na hosting.
Ostatnie szlify
Na koniec mały bonus. Na początku dodaliśmy klucz API do pliku gatsby-config.js
, co nie jest do końca bezpieczne.
Instalacja biblioteki dotenv
Dotenv jest biblioteką, która pozwoli Ci w bezpieczny sposób przechowywać wrażliwe dane. Zacznijmy od jej instalacji:
npm install dotenv
Stwórzmy teraz plik .env
w głównym folderze projektu. Wprowadź do niego:
GRAPHCMS_ENDPOINT=YOUR_API_URL
Oczywiście zamień YOUR_API_URL
na swój link do API.
Kolejnym krokiem jest dodanie na samym początku pliku gatsby-config.js
tego kodu:
require( 'dotenv' ).config();
Ostatnia rzecz - zamień dotychczasowy url
w konfiguracji gatsby-source-graphql
na zmienną, którą stworzyliśmy w pliku .env
:
module.exports = {
plugins: [
{
resolve: 'gatsby-source-graphql',
options: {
typeName: 'Blog',
fieldName: 'blog',
url: process.env.GRAPHCMS_ENDPOINT
}
}
]
};
Jeśli korzystasz z Git'a, pamiętaj, aby dodać plik .env
do .gitignore
, aby nie przechowywać wrażliwych danych w repozytorium. Wystarczy, że stworzysz plik .gitignore
i wkleisz do niego .env
.
Dzięki temu wrażliwe dane, czyli link do Twojego API będzie przechowywane tylko w Twoim lokalnym projekcie.
Pamiętaj, żeby dodać plik .env
na Twój serwer.
Podsumowanie
Gatsby.js jest świetnym narzędziem do tworzenia statycznych stron, które pomoże Ci w prosty i szybki sposób stworzyć własnego bloga.
Mam nadzieję, że powyższy poradnik był dla Ciebie pomocny, a jeśli chciałbyś dowiedzieć się więcej na temat takiego typu bloga i architektury Jamstack tłumaczę to tutaj: Czym jest Jamstack i dlaczego warto go znać w 2022 roku?
Chcesz lepiej poznać Gatsby.js? Sprawdź, dlaczego powinieneś nauczyć się go w 2022 roku!
Sprawdź kod źródłowy projektu w moim repozytorium na Github.