Konfigurieren Sie Open Source Gatsby mit Ihrem WordPress, um eine größere Benutzererfahrung und die Gesamtleistung zu erzielen. Lassen Sie uns lernen, wie Sie diesen statischen Site -Generator verwenden.

Gatsby WordPress

Überblick

Gatsbyjs ist ein kostenloser und open-Source-React-basiertes, von GraphQL betriebener statischer Site-Generator. Es verwendet leistungsstarke Vorkonfiguration, um eine Website zu erstellen, auf der nur statische Dateien für unglaublich schnelle Seite geladen werden. WordPress ist eine großartige Open -Source -Blogging -Plattform. Infolgedessen gibt es viele Leute, die wissen, wie sie herausfinden können, ob eine Website eine WordPress -Site ist, damit sie sie hacken und Informationen stehlen können. Wenn Sie Gatsby WordPress zusammen verwenden, erhalten Sie die gleiche Leistung des WordPress -Inhaltsmanagements und der Geschwindigkeit des Gatsby. In diesem Artikel werden wir uns ansehen, was Gatsby ist und warum Sie es mit CMS -Software verwenden müssen. Anschließend werden wir uns mit WordPress und Gatsby zusammen um ein erstaunliches Website -Erlebnis handeln. Lasst uns beginnen!

Was ist Gatsby

Gatsby ist ein statischer Site -Generator. Dies bedeutet, dass Gatsby die statischen HTML -Dateien generiert, die auf den Server Ihrer Website hochgeladen werden. Wenn ein Besucher auf Ihrer Website landet, werden diese statischen Dateien seinem Browser zugestellt, anstatt dass der dynamische Inhalt WordPress im Allgemeinen dient. Es handelt sich um ein kostenloses und Open-Source-Framework, das auf React basiert und Entwicklern hilft, wahlförmige Websites und Apps zu erstellen.

Vor- und Nachteile der Verwendung von WordPress und Gatsby

Laut Gatsbys offiziellem Dokumenten haben sie einen Tisch zusammengestellt, für den die Kombination von Gatsby WordPress großartig ist und für die es nicht ist. Um die Leichtigkeit zu erleichtern, liste ich diese hier auf. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress und Gatsby sind großartig für {{LINE_27}} {{LINE_28}} {{LINE_29}} Inhaltsteams, die sich mit der WordPress -Inhaltsbearbeitung wohl fühlen {{LINE_31}} {{LINE_32}} Entwicklungsteams, die mit beliebten Open-Source-Technologien schätzen, {{LINE_34}} {{LINE_35}} Redesigns von Websites mit bereits in WordPress gespeicherten Inhalten {{LINE_37}} {{LINE_38}} Teams, die ihre Daten und ihren Tech -Stack besitzen möchten {{LINE_40}} {{LINE_41}} Komplexe Zugriffskontroll -Workflows oder Inhaltsmodellierungsbeschränkungen {{LINE_43}} {{LINE_44}} Projekte, bei denen Sicherheit wichtig ist {{LINE_46}} {{LINE_47}} Hohe Nachfrageprojekte, bei denen die Leistung von größter Bedeutung ist {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress und Gatsby sind nicht großartig für {{LINE_55}} {{LINE_56}} {{LINE_57}} Teams, die die Verwendung von WordPress -UI -Themen benötigen {{LINE_59}} {{LINE_60}} Diejenigen, die nach einem vollständig verwalteten Cloud -CMS suchen {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Neben diesen offiziellen Punkten möchte ich einige Vor- und Nachteile der gemeinsamen Verwendung von Gatsby WordPress auflisten {{LINE_67}} {{LINE_68}} {{LINE_69}} Profis {{LINE_71}} {{LINE_72}} {{LINE_73}} Schnellere Lastgeschwindigkeiten - Statische Websites laden schneller als dynamisch. Infolgedessen wirkt es sich auf Ihre Seite aus, die Geschwindigkeiten und das SEO -Ranking lädt. {{LINE_75}} {{LINE_76}} Weniger Serverkosten - da statische Dateien keine speziellen Software benötigen, können statische HTML -Seiten auch von billigeren Servern serviert werden. {{LINE_78}} {{LINE_79}} Sicherer - Für statische Websites gibt es keine beweglichen Komponenten von Teilen, daher keine Chance für Hacker, Ihre Software auszunutzen. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Nachteile {{LINE_89}} {{LINE_90}} {{LINE_91}} Lernkurve - Es erfordert zusätzliche Fähigkeiten für die Entwickler. Wie Lernen Reactjs und GraphQL {{LINE_93}} {{LINE_94}} Nur statischer Inhalte - wenn Sie einen dynamischen Inhalt bedienen müssen. Dann ist Gatsby nichts für Sie. Es können nur statische Dateien server. Daher können Sie kein Kommentarsystem haben, das die Daten aus der Datenbank abruft. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

So verwenden Sie Gatsby mit WordPress

Bevor Sie Gatsby installieren können, müssen Sie NodeJS und NPM in Ihrer Website -Umgebung installieren.

Schritt 1 - Installieren Sie Gatsby

npm install -g gatsby-cli

In diesem Befehl wird das Installationsprogramm automatisch ausgeführt. Es wird alle Abhängigkeiten heruntergeladen und installiert, bevor Gatsby installiert wird. Sobald dies abgeschlossen ist, können Sie Ihre erste Gatsby -Website erstellen.

gatsby new gatsby-site

Dadurch wird die Starter-Vorlage von Gatsby heruntergeladen und in das Verzeichnis/Gatsby-Wortpress eingelegt. Sobald die Installation abgeschlossen ist, können Sie die Entwicklungsversion der Website öffnen

gatsby develop

Geben Sie nun in Ihrem Webbrowser http: // localhost: 8000 ein und Ihre Standardvorlage sollte geöffnet werden.

Gatsby Starter -Vorlage

Schritt 2 - Schließen Sie Gatsby mit WordPress an

In diesem Abschnitt des Gatsby WordPress -Handbuchs verbinden wir diesen statischen Site -Generator mit WordPress. Sie haben eine grundlegende statische Website, müssen sie jedoch in WordPress integrieren. Dadurch zeigt Ihre Gatsby -Website auf die Adresse Ihres WordPress -Blogs, sodass sie die neuesten Daten beim Ausführen des Entwicklungsservers abrufen können. Sobald Gatsby angeschlossen ist, erstellt er eine statische Website basierend auf Ihrer aktuellen Vorlage. Installieren Sie das Gatsby Source WordPress -Plugin im NPM -Repository.

npm install gatsby-source-wordpress

Schritt 3 - Gatsby konfigurieren

Geben Sie den folgenden Code in Ihre gatsby-config.js-Datei ein

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
      }
    },
  ]
}

Aktualisieren Sie diesen Code, um auf Ihre WordPress -Website zu verweisen. Wenn Ihre Website lokal gehostet wird, können Sie nach BaseUrl localHost: 8888/Wordpress anstelle der URL Ihrer Website verwenden. Nach dem Speichern der Datei müssen Sie Ihre Seitenvorlagen erstellen.

Schritt 4 - Seitenvorlagen erstellen

Erstellen Sie Seitenvorlagen mit diesem Site -Generator, einen Beitrag für jede Seite auf Ihrer WordPress -Website zu generieren. Das Quell -Plugin zieht die Daten aus, die Sie für diese Seiten von WordPress benötigen. Sie müssen jedoch die Entwurfsvorlage erstellen. Fügen Sie in Ihrer Datei gatsby-node.js den folgenden Code hinzu

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,
      },
    })
  })
}

Nach dem Aufrufen aller Daten generiert Gatsby für jeden Beitrag eine Seite. Mit dem Befehl entwickeln können Sie mit der generierten URL zu jeder neuen Seite navigieren.

Abschluss

In diesem Gatsby WordPress -Tutorial haben wir von WordPress eine Gatsby -Website generiert. Wir haben gelernt, was die Vor- und Nachteile dieser beiden Open -Source -Software sind. Wir haben auch die Installation und Start mit der Gatsby -Entwicklungsumgebung behandelt. Schließlich schreibt Containerize.com Artikel über weitere Open -Source -Produkte. Bitte bleiben Sie mit der Kategorie “Open Source]9 Plattform für regelmäßige Nachrichten und Updates in Kontakt.