Jak Stworzyłem Bloga 3 Razy Szybszego Od Wordpressa? Blog w Gatsby.js i GraphCMS

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

  1. Po stworzeniu konta logujemy się do aplikacji
  2. Tworzymy nowy pusty projekt
    Tworzenie pustego projektu w GraphCMS
  3. Wybieramy region najbliżej nas, a więc Frankfurt
    Wybór regionu w projekcie GraphCMS
  4. Następnie będziemy poproszeni o wybór planu, oczywiście klikamy darmowy
  5. 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.

  1. W nawigacji wybieramy "Schema"
    Schema w panelu GraphCMS
  2. Tworzymy nowy model, który nazywamy "Post"
    Model Postu w GraphCMS
  3. Dodajemy podstawowe pola: title, content oraz slug
    Pola modelu Post w GraphCMS

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.

Dodawanie pierwszego posta w GraphCMS

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":

Ustawienia API w panelu GraphCMS

oraz ustawiamy uprawnienia do odczytu (Read) dla naszego modelu "Post":

Dostępy do API w GraphCMS

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.

Umów się na darmową konsultację!

Zaprojektuj razem ze mną profesjonalną stronę internetową dla Twojej firmy, powiększ swoją bazę klientów i bądź o krok przed konkurencją 🚀