Configure Gatsby de código aberto com seu WordPress para trazer maior experiência do usuário e desempenho geral. Vamos aprender a usar este gerador de site estático.

Gatsby WordPress

Visão geral

O Gatsbyjs é um gerador de sites estático alimentado por ReacT de código aberto e de código aberto. Ele usa poderoso pré-configuração poderoso para criar um site que usa apenas arquivos estáticos para cargas de página incrivelmente rápidas. O WordPress é uma ótima plataforma de blog de código aberto. Como resultado, muitas pessoas sabem como descobrir se um site é um site do WordPress para que eles possam invadir e roubar informações. O uso de Gatsby WordPress juntos fornecerá o mesmo poder do gerenciamento de conteúdo do WordPress e da velocidade do Gatsby. Neste artigo, veremos o que é Gatsby e por que você precisa usá -lo com o software CMS. Em seguida, entraremos em detalhes sobre como usar o WordPress e o Gatsby juntos para criar uma incrível experiência no site. Vamos começar!

O que é Gatsby

Gatsby é um gerador de sites estáticos. Isso significa que Gatsby gera os arquivos HTML estáticos que são carregados no servidor do seu site. Quando um visitante pousa no seu site, esses arquivos estáticos são servidos ao navegador, em vez do conteúdo dinâmico que o WordPress geralmente serve. É uma estrutura gratuita e de código aberto com base no React, que ajuda os desenvolvedores a criar sites e aplicativos em chamas.

Prós e contras de usar o WordPress e Gatsby

De acordo com os [documentos] oficiais de Gatsby 5, eles compilaram uma mesa, para quem a combinação de Gatsby WordPress é ótima e para quem não é. Por uma questão de facilidade, estou listando -os aqui. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress e Gatsby são ótimos para {{LINE_27}} {{LINE_28}} {{LINE_29}} Equipes de conteúdo que se sentem confortáveis ​​com a experiência de edição de conteúdo do WordPress {{LINE_31}} {{LINE_32}} Equipes de desenvolvimento que valorizam usando tecnologias populares de fonte aberta {{LINE_34}} {{LINE_35}} Redeseações de sites com conteúdo já armazenado no WordPress {{LINE_37}} {{LINE_38}} Equipes que desejam possuir seus dados e pilha de tecnologia {{LINE_40}} {{LINE_41}} Fluxos de trabalho de controle de acesso complexos ou restrições de modelagem de conteúdo {{LINE_43}} {{LINE_44}} Projetos onde a segurança é importante {{LINE_46}} {{LINE_47}} Projetos de alta demanda onde o desempenho é fundamental {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress e Gatsby não são ótimos para {{LINE_55}} {{LINE_56}} {{LINE_57}} Equipes que exigem o uso de temas do WordPress UI {{LINE_59}} {{LINE_60}} Aqueles que procuram um CMS em nuvem totalmente gerenciado {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Além desses pontos oficiais, gostaria de listar alguns prós e contras de usar o Gatsby WordPress juntos {{LINE_67}} {{LINE_68}} {{LINE_69}} Prós {{LINE_71}} {{LINE_72}} {{LINE_73}} Velas de carga mais rápidas - os sites estáticos carregam mais rápido que a dinâmica. Como resultado, isso afeta sua página carrega velocidades e classificação de SEO. {{LINE_75}} {{LINE_76}} Menos custos do servidor - Como os arquivos estáticos não precisam de softwares especiais, portanto, as páginas HTML estáticas também podem ser servidas a partir de servidores mais baratos. {{LINE_78}} {{LINE_79}} Mais seguro - para sites estáticos, não há componentes móveis de peças, portanto, não há chance de os hackers explorarem seu software. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Contras {{LINE_89}} {{LINE_90}} {{LINE_91}} Curva de aprendizado - requer habilidades adicionais para os desenvolvedores. Como aprender reactjs e grafql {{LINE_93}} {{LINE_94}} Somente conteúdo estático - se você precisar servir a qualquer conteúdo dinâmico. Então Gatsby não é para você. Ele só pode servir arquivos estáticos. Portanto, você não pode ter nenhum sistema de comentário que busque os dados do banco de dados. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

Como usar Gatsby com WordPress

Antes de instalar o Gatsby, você precisa instalar Nodejs e npm no ambiente do seu site.

Etapa 1 - Instale Gatsby

npm install -g gatsby-cli

Este comando executa o instalador automaticamente. Ele baixa e instala todas as dependências antes de instalar o Gatsby. Uma vez concluído, você pode começar a criar seu primeiro site Gatsby.

gatsby new gatsby-site

Isso baixará o modelo de partida do Gatsby e o colocará no diretório/Gatsby-WordPress. Depois que a instalação estiver concluída, você pode abrir a versão de desenvolvimento do site

gatsby develop

Agora, no seu navegador da web, digite http: // localhost: 8000 e seu modelo padrão deve abrir.

Gatsby Starter Modelo

Etapa 2 - Conecte Gatsby ao WordPress

Nesta seção do guia Gatsby WordPress, conectaremos este gerador de site estático com o WordPress. Você tem um site estático básico, mas precisa integrá -lo ao WordPress. Isso aponta seu site Gatsby para o endereço do seu blog WordPress, permitindo que ele puxe os dados mais recentes ao executar o servidor de desenvolvimento. Uma vez conectado, o Gatsby criará um site estático com base no seu modelo atual. Instale o plug -in WordPress de origem Gatsby no repositório NPM.

npm install gatsby-source-wordpress

Etapa 3 - Configurar Gatsby

Coloque o seguinte código em seu arquivo 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
      }
    },
  ]
}

Atualize este código para apontar para o seu site WordPress. Se o seu site estiver hospedado localmente, após o BaseUrl, você poderá usar localhost: 8888/wordpress em vez do URL do seu site. Depois de salvar o arquivo, você precisará criar seus modelos de página.

Etapa 4 - modelos de página de construção

Os modelos de página de construção permitem que este gerador de site gere uma postagem para cada página no site do seu WordPress. O plug -in de origem extrairá os dados necessários do WordPress para essas páginas, mas você precisará criar o modelo de design. No seu arquivo gatsby-node.js, adicione o seguinte código

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

Depois de chamar todos os dados, Gatsby gerará uma página para cada postagem. Usando o comando desenvolver, você pode navegar para cada nova página usando o URL gerado.

Conclusão

Neste tutorial de Gatsby WordPress, abordamos como gerar um site Gatsby a partir do WordPress. Aprendemos quais são os prós e contras desses dois softwares de código aberto. Também abordamos como instalar e começar com o ambiente de desenvolvimento de Gatsby. Finalmente, contendeRize.com está escrevendo artigos sobre outros produtos de código aberto. Portanto, mantenha contato com a categoria de plataforma de código aberto blog para notícias e atualizações regulares.