Skonfiguruj open source Gatsby z WordPress, aby zapewnić większą wrażenia użytkownika i ogólną wydajność. Dowiedzmy się, jak korzystać z tego statycznego generatora witryn.

Gatsby WordPress

Przegląd

GatsByJS to bezpłatny i oparty na opachowym reakcie generator statycznych witryn zasilanych GraphQL. Wykorzystuje potężną wstępną konfigurację do budowy strony internetowej, która używa tylko plików statycznych do niewiarygodnie szybkich obciążeń stron. WordPress to świetna platforma blogowa typu open source. W rezultacie jest wiele osób, które wiedzą, jak dowiedzieć się, czy witryna jest witryną WordPress, aby mogli ją zhakować i ukraść informacje. Używanie Gatsby WordPress razem zapewni tę samą moc zarządzania treścią WordPress i szybkość Gatsby. W tym artykule przyjrzymy się, czym jest Gatsby i dlaczego musisz go używać z oprogramowaniem CMS. Następnie szczegółowo omówimy, jak korzystać ze WordPress i Gatsby razem, aby zbudować niesamowitą stronę internetową. Zaczynajmy!

Co to jest Gatsby

Gatsby jest statycznym generatorem witryn. Oznacza to, że Gatsby generuje statyczne pliki HTML, które są przesyłane na serwer Twojej witryny. Gdy odwiedzający wyląduje na Twojej stronie, te pliki statyczne są podawane do przeglądarki, zamiast dynamicznej treści WordPress ogólnie służy. Jest to framework bezpłatny i open source oparty na React, który pomaga programistom budować płonące witryny i aplikacje.

Plusy i wady korzystania z WordPress i Gatsby

Zgodnie z oficjalnym dokumentami opracowali tabelę, dla której połączenie Gatsby WordPress jest świetne i dla których nie jest. Ze względu na łatwość wymieniam je tutaj. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress i Gatsby są świetne {{LINE_27}} {{LINE_28}} {{LINE_29}} Zespoły treści, które czują się komfortowo z doświadczeniem edycji treści WordPress {{LINE_31}} {{LINE_32}} Zespoły programistów, które cenią za pomocą popularnych technologii typu open source {{LINE_34}} {{LINE_35}} Przeprojektowania witryn z treścią już przechowywaną w WordPress {{LINE_37}} {{LINE_38}} Zespoły, które chcą mieć swoje dane i stos techniczny {{LINE_40}} {{LINE_41}} Złożone przepływy pracy kontroli dostępu lub ograniczenia modelowania treści {{LINE_43}} {{LINE_44}} Projekty, w których bezpieczeństwo jest ważne {{LINE_46}} {{LINE_47}} Projekty o wysokim popycie, w których wydajność jest najważniejsza {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress i Gatsby nie są świetne {{LINE_55}} {{LINE_56}} {{LINE_57}} Zespoły wymagające użycia motywów interfejsu WordPress {{LINE_59}} {{LINE_60}} Ci, którzy szukają w pełni zarządzanych Cmm {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Oprócz tych oficjalnych punktów chciałbym wymienić kilka zalet i wady korzystania z Gatsby WordPress {{LINE_67}} {{LINE_68}} {{LINE_69}} Profesjonaliści {{LINE_71}} {{LINE_72}} {{LINE_73}} Szybsze prędkości obciążenia - statyczne strony internetowe ładują się szybciej niż dynamiczne. W rezultacie wpływa to na ładowanie prędkości strony i ranking SEO. {{LINE_75}} {{LINE_76}} Mniejsze koszty serwera - ponieważ pliki statyczne nie wymagają specjalnych oprogramowania, dlatego statyczne strony HTML mogą być również obsługiwane z tańszych serwerów. {{LINE_78}} {{LINE_79}} Bardziej bezpieczne - dla stron statycznych nie ma ruchomych elementów części, dlatego hakerzy nie ma szans na wykorzystanie oprogramowania. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Cons {{LINE_89}} {{LINE_90}} {{LINE_91}} Krzywa uczenia się - wymaga dodatkowych umiejętności dla programistów. Jak nauka reactjs i grafql {{LINE_93}} {{LINE_94}} Tylko treść statyczna - jeśli chcesz obsługiwać dowolną dynamiczną zawartość. Wtedy Gatsby nie jest dla ciebie. Może serwować tylko pliki statyczne. Dlatego nie możesz mieć żadnego systemu komentowania, który pobiera dane z bazy danych. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

Jak używać Gatsby z WordPress

Przed zainstalowaniem Gatsby musisz zainstalować Nodejs i NPM w środowisku witryny.

Krok 1 - Zainstaluj Gatsby

npm install -g gatsby-cli

To polecenie uruchamia instalator automatycznie. Pobiera i instaluje wszystkie zależności przed zainstalowaniem Gatsby. Po zakończeniu możesz zacząć tworzyć swoją pierwszą stronę internetową Gatsby.

gatsby new gatsby-site

To pobranie szablonu startowego Gatsby i umieszcza go w katalogu/Gatsby-Wordpress. Po zakończeniu instalacji możesz otworzyć wersję programistyczną witryny

gatsby develop

Teraz w przeglądarce internetowej wpisz http: // localhost: 8000 i domyślny szablon powinien otworzyć.

Szablon startera Gatsby

Krok 2 - Podłącz Gatsby do WordPress

W tej sekcji przewodnika Gatsby WordPress połączymy ten statyczny generator strony z WordPress. Masz podstawową statyczną stronę internetową, ale musisz zintegrować ją z WordPress. To wskazuje twoją stronę Gatsby na adres bloga WordPress, umożliwiając jej pobieranie najnowszych danych podczas uruchamiania serwera programistycznego. Po podłączeniu Gatsby zbuduje statyczną stronę internetową opartą na bieżącym szablonie. Zainstaluj wtyczkę WordPress Gatsby Source z repozytorium NPM.

npm install gatsby-source-wordpress

Krok 3 - Skonfiguruj Gatsby

Umieść następujący kod w swoim pliku gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `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 wskazać swoją 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 zbudować szablony stron.

Krok 4 - Wybuduj szablony strony

Budowanie szablonów strony umożliwiają ten generator witryny generowanie postu dla każdej strony na Twojej stronie WordPress. Wtyczka źródłowa wyciągnie potrzebne dane z WordPress dla tych stron, ale musisz utworzyć szablon projektowy. 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 Gatsby wygeneruje stronę dla każdego postu. Korzystając z polecenia programu, możesz przejść do każdej nowej strony za pomocą wygenerowanego adresu URL.

Wniosek

W tym samouczku Gatsby WordPress omówiliśmy, jak wygenerować stronę internetową Gatsby z WordPress. Dowiedzieliśmy się, jakie są zalety i wady tych dwóch oprogramowania typu open source. Omówiliśmy również sposób instalowania i rozpoczęcia od środowiska programistycznego Gatsby. Wreszcie Containerize.com pisze artykuły na temat dalszych produktów typu open source. Dlatego prosimy o kontakt z kategorią platformy open source blogowanie w celu regularnych wiadomości i aktualizacji.