Samouczek: Zbuduj swoją witrynę za pomocą WordPress i Gatsby

Tworzenie statycznej strony internetowej za pomocą WordPress jest możliwe dzięki bezgłowemu WordPress. Strony tego typu ładują się szybciej, ponieważ pliki statyczne są zapisywane na Twoim serwerze. Pytanie brzmi: jak zbudować bezgłową stronę internetową za pomocą WordPress?

W tym miejscu pojawia się statyczny generator witryn, taki jak Gatsby. Te generatory pomagają tworzyć bogate w funkcje statyczne witryny internetowe w WordPress. Jednak musisz je poprawnie zintegrować z instalacją WordPress, aby jak najlepiej je wykorzystać. Ta integracja obejmuje instalację, generowanie i konfigurowanie WordPress Gatsby.

W tym artykule przyjrzymy się, czym jest Gatsby i dlaczego warto go używać z WordPress. Następnie szczegółowo omówimy, jak używać Gatsby i czy powinieneś. Zacznijmy!

Co to jest Gatsby?

Mówiąc najprościej, Gatsby to statyczny generator witryn. Oznacza to, że Gatsby generuje statyczne pliki HTML, które są przesyłane na serwer Twojej witryny. Gdy odwiedzający trafia na Twoją witrynę, te statyczne pliki są przesyłane do jego przeglądarki, zamiast treści dynamicznych, które zwykle oferuje WordPress.

Aby wygenerować te pliki, Gatsby pobiera dane dla Twojej witryny z różnych źródeł. Obejmuje to istniejące strony internetowe, wywołania API i pliki płaskie za pośrednictwem GraphQL. Twoja statyczna strona internetowa jest następnie budowana na podstawie ustawionych konfiguracji.

W porównaniu do innych statycznych generatorów witryn, Gatsby jest stosunkowo nowy. Nie powstrzymało to jednak wielu firm przed wypróbowaniem tego rozwiązania. Jednym z największych przykładów jest blog Airbnb Engineering & Data Science, który jest obsługiwany przez Gatsby.

Dlaczego warto używać Gatsby z WordPress?

Ponieważ możliwe jest stworzenie statycznej strony internetowej za pomocą WordPress, możesz się zastanawiać, dlaczego powinieneś używać razem WordPress i Gatsby. Podczas gdy WordPress sam w sobie jest potężny, Gatsby oferuje pewne korzyści, których możesz chcieć dla swojej witryny, w tym szybsze prędkości i niższe koszty serwera. Zrozumienie zalet i wad Gatsby'ego może pomóc w podjęciu świadomej decyzji.

Plusy korzystania z Gatsby'ego

Gatsby oferuje szereg korzyści, z których może skorzystać każda strona internetowa, w tym:

• Szybsze prędkości ładowania. Statyczne witryny ładują się szybciej niż dynamiczne, co może mieć wpływ na optymalizację pod kątem wyszukiwarek (SEO). Szybkość ładowania strony jest sygnałem używanym przez wyszukiwarki i wpływa na współczynniki odrzuceń Twojej witryny.
• Obniżone koszty serwera. Dynamiczne strony internetowe wymagają kompatybilnych stosów technologicznych i serwerów. Statyczne strony internetowe tego nie robią i możesz je hostować na dowolnym serwerze. Może to obniżyć koszty serwera.
• Ulepszone zabezpieczenia. Statyczne strony internetowe zapewniają większe bezpieczeństwo. Obsługiwane statyczne pliki HTML nie oferują hakerom zbyt wiele do pracy. Jeśli te pliki zostaną utracone z jakiegokolwiek powodu, możesz je również odtworzyć za pomocą Gatsby.

Twoja strona internetowa może korzystać ze wszystkich tych zalet. Powinieneś jednak porównać je z wadami korzystania z Gatsby'ego.

Wady używania Gatsby'ego

Żaden system oprogramowania nie jest doskonały, a Gatsby ma kilka wad, o których musisz wiedzieć:

• Potrzebna wiedza techniczna. Gatsby jest zbudowany na ReactJS i używa GraphQL. Aby z niego korzystać, konieczna jest pewna znajomość JavaScript. Będziesz także potrzebować podstawowej wiedzy o GraphQL, aby zbudować stronę internetową.
• Brak treści dynamicznych. Gatsby generuje tylko statyczne strony internetowe. Jeśli potrzebujesz dynamicznych treści, takich jak formularze kontaktowe, muszą one zostać przekierowane przez zewnętrznego dostawcę.

Podczas gdy wielu programistów uważa, że ​​zalety Gatsby'ego przeważają nad wadami, ważne jest, aby zrozumieć oba z góry.

Jak używać Gatsby z WordPress?

Konfiguracja Gatsby'ego może zająć trochę czasu i trzeba wykonać pewne kroki. Musisz zainstalować Gatsby, zanim zaczniesz generować swoją witrynę i ją konfigurować. Ponadto należy wziąć pod uwagę kilka wstępnych uwag.

Krok 1: Sprawdź wymagania wstępne

Zanim będziesz mógł zainstalować Gatsby, musisz zainstalować NodeJS i npm w swoim środowisku WWW. Git jest również wymagany do zarządzania kodem. Czynności wymagane do zainstalowania wymagań wstępnych różnią się w zależności od używanego systemu operacyjnego.

Jeśli masz system Windows, możesz zainstalować NodeJS i Git za pomocą instalatora na stronie pobierania. To samo jest możliwe w przypadku komputerów Mac. Jeśli jednak używasz Linuksa, wymagany jest instalator pakietów, taki jak apt.

Krok 2: Zainstaluj Gatsby'ego

Po zainstalowaniu NodeJS i Git możesz rozpocząć instalację Gatsby. Najłatwiej to zrobić, używając następującego polecenia w terminalu oprogramowania:

 npm install -g gatsby-cli

To polecenie automatycznie uruchamia instalator. Najpierw pobierze i zainstaluje wszystkie zależności przed zainstalowaniem Gatsby. Po zakończeniu możesz rozpocząć tworzenie swojej pierwszej witryny Gatsby.

Krok 3: Utwórz witrynę Gatsby

Aby utworzyć witrynę Gatsby, musisz uruchomić następujące polecenie:

 gatsby new gatsby-site

To polecenie klonuje szablon startowy Gatsby i umieszcza go w katalogu /gatsby-wordpress . Po zakończeniu klonowania i instalacji możesz otworzyć wersję rozwojową witryny. Odbywa się to za pomocą następującego polecenia:

 gatsby develop

Gdy środowisko programistyczne jest uruchomione, możesz lokalnie odwiedzić swoją nową witrynę internetową. W przeglądarce internetowej wpisz http://localhost:8000 , a domyślny szablon powinien się otworzyć.

Jeśli widzisz tę stronę, możesz rozpocząć tworzenie swojej witryny. Oznacza to utworzenie plików statycznych w katalogu publicznym tej witryny. Następujące polecenie automatycznie uruchamia tworzenie plików statycznych tohse:

 gatsby build

To polecenie generuje również pakiety kodu JavaScript przed trasą dla Twojej witryny. Następnie możesz użyć polecenia serve, aby lokalnie wyświetlić swoją nową witrynę:

 gatsby serve

To polecenie będzie działać tylko wtedy, gdy uruchomiłeś już polecenie kompilacji.

Krok 4: Połącz Gatsby z WordPress

Masz teraz podstawową statyczną stronę internetową, ale musisz zintegrować ją z WordPress. Spowoduje to skierowanie witryny Gatsby na adres Twojego bloga WordPress, umożliwiając pobieranie najnowszych danych po uruchomieniu serwera programistycznego. Po połączeniu Gatsby zbuduje statyczną stronę internetową opartą na Twoim aktualnym szablonie WordPress.

Aby połączyć te dwa elementy, musisz zainstalować wtyczkę Gatsby dla WordPress. Zajmie się tym następujące polecenie:

 npm install gatsby-source-wordpress

Po zainstalowaniu wtyczki możesz przystąpić do konfiguracji Gatsby.

Krok 5: Skonfiguruj Gatsby'ego

Aby skonfigurować Gatsby, musisz pracować z plikiem gatsby-config.js . W tym pliku dodaj następujący kod:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Zaktualizuj ten kod, aby wskazywał na Twoją witrynę WordPress. Jeśli Twoja witryna jest hostowana lokalnie, po baseUrl możesz użyć localhost:8888/wordpress zamiast adresu URL witryny. Po zapisaniu pliku musisz utworzyć szablony stron.

Krok 6: Zbuduj szablony stron

Tworzenie szablonów stron umożliwia Gatsby generowanie postów dla każdej strony w witrynie WordPress. Wtyczka źródłowa pobierze potrzebne dane z WordPress dla tych stron, ale musisz utworzyć szablon projektu.

W pliku gatsby-node.js dodaj następujący kod:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

Po wywołaniu wszystkich danych z WordPress, Gatsby wygeneruje stronę dla każdego posta. Za pomocą polecenia Develop możesz przejść do każdej nowej strony przy użyciu wygenerowanego adresu URL.

Czy powinienem używać Gatsby dla WordPress?

Chociaż Gatsby może poprawić szybkość i bezpieczeństwo Twojej witryny, nie jest to właściwy wybór dla wszystkich. Jeśli Twoja witryna zawiera statyczne treści, które nie zmieniają się często, Gatsby może być korzystny. Jeśli jednak potrzebujesz dynamicznej treści na swojej stronie internetowej, lepszym wyborem może być tradycyjny WordPress.

Wykorzystaj w pełni swoją witrynę w WP Engine

Gatsby to skuteczny generator statycznych stron internetowych, który można łatwo zintegrować z WordPress. Istnieją kroki, które należy wykonać, aby zainstalować i skonfigurować system. Zanim zaczniesz, musisz także mieć pewną wiedzę na temat Gatsby'ego i GraphQL.

Zawartość statyczna może poprawić szybkość i bezpieczeństwo Twojej witryny, ale potrzebujesz również odpowiedniego hosta. WP Engine oferuje najlepsze zasoby dla Twojej witryny, aby zapewnić doskonałe wrażenia cyfrowe. Dzięki temu masz więcej czasu na skupienie się na rozwoju!