{"id":64442,"date":"2023-12-03T09:33:05","date_gmt":"2023-12-03T12:33:05","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=64442&#038;preview=true&#038;preview_id=64442"},"modified":"2023-12-06T08:44:07","modified_gmt":"2023-12-06T11:44:07","slug":"gatsby","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/","title":{"rendered":"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby"},"content":{"rendered":"<p>Os sites est\u00e1ticos voltaram a aparecer nos \u00faltimos anos, gra\u00e7as \u00e0 sua velocidade, seguran\u00e7a e simplicidade. Uma das principais ferramentas para a cria\u00e7\u00e3o de sites est\u00e1ticos atualmente \u00e9 o Gatsby, um <a href=\"https:\/\/kinsta.com\/pt\/topicos\/geradores-sites-estaticos\/\">gerador de sites est\u00e1ticos<\/a> (SSG) extremamente r\u00e1pido.<\/p>\n<p>Se voc\u00ea \u00e9 um desenvolvedor web que deseja criar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/ideias-de-nomes-para-blogs\/\">blog pessoal<\/a>, um <a href=\"https:\/\/kinsta.com\/pt\/blog\/site-de-portfolio\/\">site de portf\u00f3lio<\/a> ou um site comercial, o Gatsby pode ajud\u00e1-lo a atingir suas metas. Este guia abrangente o conduzir\u00e1 pelo processo de cria\u00e7\u00e3o de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-um-site-statico\/\">sites est\u00e1ticos<\/a> com o Gatsby. Ele aborda de tudo, desde o b\u00e1sico at\u00e9 t\u00f3picos avan\u00e7ados.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/gatsby-demo-site.gif\" alt=\"Um site demonstrativo para ilustrar o que voc\u00ea pode criar ap\u00f3s ler este guia.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Um site demonstrativo para ilustrar o que voc\u00ea pode criar ap\u00f3s ler este guia.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Entendendo sites est\u00e1ticos<\/h2>\n<p>Sites est\u00e1ticos s\u00e3o p\u00e1ginas web que cont\u00eam arquivos <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> pr\u00e9-renderizados. Ao contr\u00e1rio dos sites din\u00e2micos, eles n\u00e3o dependem do processamento no lado do servidor para cada solicita\u00e7\u00e3o. Em vez disso, todo o conte\u00fado \u00e9 gerado antecipadamente e exibido diretamente no navegador do usu\u00e1rio. Essa abordagem oferece v\u00e1rias vantagens:<\/p>\n<ol start=\"1\">\n<li><strong>Velocidade:<\/strong> os sites est\u00e1ticos s\u00e3o carregados rapidamente, pois n\u00e3o h\u00e1 processamento no lado do servidor.<\/li>\n<li><strong>Seguran\u00e7a:<\/strong> Como n\u00e3o h\u00e1 execu\u00e7\u00e3o de c\u00f3digo no lado do servidor, sites est\u00e1ticos s\u00e3o menos vulner\u00e1veis a amea\u00e7as de seguran\u00e7a.<\/li>\n<li><strong>Escalabilidade<\/strong>: \u00c9 f\u00e1cil armazenar em cache e distribuir sites est\u00e1ticos por meio de CDNs (Content Delivery Networks, redes de distribui\u00e7\u00e3o de conte\u00fado).<\/li>\n<li><strong>Simplicidade:<\/strong> Eles s\u00e3o mais f\u00e1ceis de desenvolver, implantar e manter.<\/li>\n<\/ol>\n<p>Agora que voc\u00ea j\u00e1 sabe o que s\u00e3o sites est\u00e1ticos e seus benef\u00edcios, vamos nos aprofundar no Gatsby.<\/p>\n<h2>O que \u00e9 o Gatsby?<\/h2>\n<p>O Gatsby \u00e9 um framework de c\u00f3digo aberto baseado na biblioteca JavaScript <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>, que simplifica o processo de cria\u00e7\u00e3o de sites est\u00e1ticos. Ele combina o poder dos <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/\">componentes React<\/a> com o GraphQL para gerenciamento de dados, o que o torna uma excelente op\u00e7\u00e3o para desenvolvedores de todos os n\u00edveis. Veja por que o Gatsby se destaca:<\/p>\n<ol start=\"1\">\n<li><strong>Extremamente r\u00e1pido:<\/strong> O Gatsby otimiza a velocidade do seu site usando t\u00e9cnicas como divis\u00e3o de c\u00f3digo e lazy loading, resultando em carregamentos de p\u00e1gina quase instant\u00e2neos.<\/li>\n<li><strong>Fonte de dados flex\u00edvel:<\/strong> Pode obter dados de v\u00e1rios locais, incluindo arquivos Markdown, APIs e bancos de dados.<\/li>\n<li><strong>Rico ecossistema de plugins:<\/strong> O <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">amplo ecossistema de plugins<\/a> do Gatsby permite que voc\u00ea amplie sua funcionalidade sem esfor\u00e7o.<\/li>\n<li><strong>SEO e desempenho:<\/strong> O Gatsby gera automaticamente HTML otimizado para melhorar o SEO e o desempenho.<\/li>\n<\/ol>\n<h2>Primeiros passos com o Gatsby<\/h2>\n<p>Para acompanhar este guia, voc\u00ea deve ter:<\/p>\n<ul>\n<li>Conhecimento fundamental de HTML, CSS e JavaScript<\/li>\n<li>Conhecimento b\u00e1sico de React<\/li>\n<li>Node.js e npm <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">(Node Package Manager<\/a>) ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#39-yarn\">yarn<\/a> instalados em seu computador<\/li>\n<\/ul>\n<p>Para come\u00e7ar a usar o Gatsby e criar um projeto, voc\u00ea pode usar um dos muitos exemplos na <a href=\"https:\/\/www.gatsbyjs.com\/starters\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby Starter Library<\/a>, ou criar um projeto do zero.<\/p>\n<p>Para este guia, vamos usar o <a href=\"https:\/\/www.gatsbyjs.com\/starters\/gatsbyjs\/gatsby-starter-hello-world\/\" target=\"_blank\" rel=\"noopener noreferrer\">hello world starter oficial<\/a> para o GatsbyJS, pois ele fornece um projeto simples sem plugins ou arquivos extras.<\/p>\n<ol start=\"1\">\n<li>Primeiro, instale a CLI do Gatsby em seu computador executando o seguinte comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -g gatsby-cli<\/code><\/pre>\n<p>Execute <code>gatsby --version<\/code> para verificar se a instala\u00e7\u00e3o foi bem-sucedida.<\/p>\n<ol start=\"2\">\n<li>Em seguida, navegue at\u00e9 a pasta em que voc\u00ea deseja criar o projeto e execute o seguinte comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx gatsby new &lt;project-name&gt; https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world<\/code><\/pre>\n<p>Altere <code>&lt;project-name&gt;<\/code> acima para o nome escolhido para o seu projeto.<\/p>\n<ol start=\"3\">\n<li>Quando isso for feito com sucesso, navegue at\u00e9 a pasta do projeto e inicie o servidor de desenvolvimento:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\ngatsby develop<\/code><\/pre>\n<p>O servidor de desenvolvimento local ser\u00e1 iniciado em <a href=\"http:\/\/localhost:8000\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:8000,<\/a> onde voc\u00ea poder\u00e1 acessar o seu site do Gatsby.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/gatsby-hello-world.png\" alt=\"O tema hello world do Gatsby.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">O tema hello world do Gatsby.<\/figcaption><\/figure>\n<h3>Entendendo a estrutura de arquivos do Gatsby<\/h3>\n<p>Ao abrir seu projeto em um editor de c\u00f3digo, voc\u00ea ver\u00e1 a seguinte estrutura:<\/p>\n<pre><code class=\"language-bash\">\/\n|-- \/public\n|-- \/src\n    |-- \/pages\n        |-- index.js\n|-- \/static\n|-- gatsby-config.js<\/code><\/pre>\n<ul>\n<li><strong>\/public:<\/strong> Esse diret\u00f3rio cont\u00e9m a sa\u00edda do seu processo de build do Gatsby. \u00c9 onde residem o HTML, o CSS, o JavaScript e outros ativos gerados.<\/li>\n<li><strong>\/src:<\/strong> este \u00e9 o cora\u00e7\u00e3o do seu projeto Gatsby, no qual voc\u00ea passar\u00e1 a maior parte do tempo. Cont\u00e9m v\u00e1rios subdiret\u00f3rios e arquivos:\n<ul>\n<li><strong>\/pages:<\/strong> \u00c9 onde est\u00e3o armazenadas todas as p\u00e1ginas do seu projeto. Cada arquivo JavaScript aqui corresponde a um caminho em seu site.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> Esse diret\u00f3rio \u00e9 usado para arquivos est\u00e1ticos que voc\u00ea deseja incluir em seu site, como imagens, fontes ou arquivos para download. Esses arquivos s\u00e3o servidos como s\u00e3o e n\u00e3o ser\u00e3o processados pelo Gatsby.<\/li>\n<li><strong>gatsby-config.js:<\/strong> nesse arquivo de configura\u00e7\u00e3o voc\u00ea define v\u00e1rios ajustes para o seu site Gatsby. Voc\u00ea pode especificar plugins, metadados do site e outras configura\u00e7\u00f5es aqui.<\/li>\n<\/ul>\n<h2>Cria\u00e7\u00e3o de p\u00e1ginas e componentes<\/h2>\n<p>No Gatsby, a cria\u00e7\u00e3o de p\u00e1ginas web \u00e9 um processo simples. Qualquer arquivo JavaScript que voc\u00ea cria na pasta <strong>\/src\/pages<\/strong> se torna automaticamente uma p\u00e1gina com seu caminho correspondente, gra\u00e7as \u00e0 gera\u00e7\u00e3o autom\u00e1tica de p\u00e1ginas do Gatsby.<\/p>\n<p>Voc\u00ea pode criar quantas p\u00e1ginas forem necess\u00e1rias para o seu site adicionando mais arquivos JavaScript \u00e0 pasta <strong>\/src\/pages<\/strong>. Por exemplo, voc\u00ea pode criar um arquivo <strong>about.js<\/strong> para uma p\u00e1gina &#8220;Sobre&#8221;.<\/p>\n<p>Embora voc\u00ea possa criar arquivos JavaScript individuais para cada p\u00e1gina diretamente na pasta <strong>\/src\/pages<\/strong>, tamb\u00e9m \u00e9 poss\u00edvel organizar melhor as p\u00e1ginas. Voc\u00ea pode criar subpastas para agrupar p\u00e1ginas relacionadas. Por exemplo, crie uma pasta <strong>blog<\/strong> para organizar todas as p\u00e1ginas relacionadas ao seu blog.<\/p>\n<p>Para este projeto, veja como se parecer\u00e1 a estrutura da p\u00e1gina:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/pages\n        |-- about.js\n        |-- index.js\n        |-- \/blog\n            |-- index.js<\/code><\/pre>\n<h3>Utilizando JSX para p\u00e1ginas<\/h3>\n<p>Como o Gatsby foi desenvolvido com base no React, suas p\u00e1ginas e componentes s\u00e3o escritos em <a href=\"https:\/\/kinsta.com\/pt\/blog\/sintaxe-jsx\/\">JSX<\/a> (JavaScript XML). JSX \u00e9 uma extens\u00e3o de sintaxe para JavaScript que permite definir a estrutura e o layout de suas interfaces de usu\u00e1rio de maneira altamente leg\u00edvel e expressiva.<\/p>\n<p>Por exemplo, voc\u00ea pode criar o conte\u00fado da sua P\u00e1gina Inicial (<strong>index.js<\/strong>) desta forma:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<h3>Criando links para outras p\u00e1ginas no Gatsby<\/h3>\n<p>Para criar um link para outra p\u00e1gina, voc\u00ea pode usar o componente <code>Link<\/code> da seguinte forma:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default function Home() {\n    return (\n        &lt;&gt;\n            &lt;div&gt;\n                &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                &lt;Link&gt; to=\"\/about\"&gt;About Us&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>No exemplo acima, importamos o componente <code>Link<\/code> de <code>gatsby<\/code> e o usamos para criar links para a p\u00e1gina &#8220;About Us&#8221; e um blog. A p\u00e1gina &#8220;About Us&#8221;, por exemplo, tem o caminho <code>\/about<\/code>. Quando os usu\u00e1rios clicarem no link &#8220;About Us&#8221;, ser\u00e3o levados para a p\u00e1gina <code>\/about<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O resultado do c\u00f3digo acima pode aparecer como dois itens vinculados mesclados, mas observe que isso \u00e9 apenas para fins explicativos. Uma barra de navega\u00e7\u00e3o ser\u00e1 criada posteriormente para apresentar esses links com o estilo apropriado.<\/p>\n<\/aside>\n\n<p>Para criar links para sites externos, voc\u00ea pode usar tags de \u00e2ncora regulares (<code>&lt;a&gt;<\/code>) com o atributo <code>href<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nexport default function Home() {\n  return (\n        &lt;&gt;\n            &lt;div&gt;\n                &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                &lt;div&gt;\n                    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                    &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\" target=\"_blank\" rel=\"noreferrer\"&gt;\n                        &lt;div&gt;Read more&lt;\/div&gt;\n                    &lt;\/a&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>Neste caso, o link abre o site externo em uma nova aba do navegador devido aos atributos <code>target=\"_blank\"<\/code> e <code>rel=\"noreferrer\"<\/code>.<\/p>\n<h3>Criando componentes no Gatsby<\/h3>\n<p>A arquitetura baseada em componentes do Gatsby permite que voc\u00ea crie blocos de constru\u00e7\u00e3o reutiliz\u00e1veis para suas p\u00e1ginas web. Em vez de duplicar o c\u00f3digo em v\u00e1rias p\u00e1ginas, voc\u00ea pode encapsular elementos comuns em componentes, tornando sua base de c\u00f3digo mais organizada, de mais f\u00e1cil manuten\u00e7\u00e3o e eficiente.<\/p>\n<p>Suponha que o c\u00f3digo da sua P\u00e1gina Inicial inclua a se\u00e7\u00e3o de navega\u00e7\u00e3o, o conte\u00fado principal e um rodap\u00e9:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;div className=\"nav-links\"&gt;\n        &lt;Link&gt; to=\"\/\"&gt;Home&lt;\/Link&gt;\n        &lt;Link&gt; to=\"\/about\"&gt;About&lt;\/Link&gt;\n        &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n      &lt;\/div&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;div className=\"footer\"&gt;\n        &lt;p&gt;\n          Hosted with \u2764\ufe0f by Kinsta's{' '}\n          &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;\n            Static Site Hosting\n          &lt;\/a&gt;\n          .\n        &lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Imagine ter de duplicar o c\u00f3digo da barra de navega\u00e7\u00e3o e do rodap\u00e9 para cada p\u00e1gina do seu site. \u00c9 aqui que o poder dos componentes entra em a\u00e7\u00e3o. Voc\u00ea pode criar componentes reutiliz\u00e1veis para a barra de navega\u00e7\u00e3o, o rodap\u00e9 e todos os trechos de c\u00f3digo que seriam repetidos em v\u00e1rias p\u00e1ginas e componentes.<\/p>\n<p>Para trabalhar com componentes no Gatsby, crie uma pasta <strong>components<\/strong> na pasta <strong>src<\/strong> para armazenar todos os componentes. Em seguida, crie seus componentes. Por exemplo, <strong>Navbar.js<\/strong> e <strong>Footer.js<\/strong>. No arquivo <strong>Navbar.js<\/strong>, separe o c\u00f3digo da seguinte maneira:<\/p>\n<pre><code class=\"language-jsx\">import { Link } from 'gatsby';\nimport React from 'react';\n\nconst Navbar = () =&gt; {\n    return (\n        &lt;nav&gt;\n            &lt;div className=\"nav-links\"&gt;\n                &lt;Link to=\"\/\"&gt;Home&lt;\/Link&gt;\n                &lt;Link to=\"\/about\"&gt;About&lt;\/Link&gt;\n                &lt;Link to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n};\n\nexport default Navbar;<\/code><\/pre>\n<p>E tamb\u00e9m seu <strong>Footer.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nconst Footer = () =&gt; {\n    return (\n        &lt;div className=\"footer\"&gt;\n            &lt;p&gt;\n                Hosted with \u2764\ufe0f by Kinsta's{' '}\n                &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n                .\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Footer;<\/code><\/pre>\n<p>Em seguida, importe os arquivos de componentes para suas p\u00e1ginas ou componentes e use-os desta forma:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '..\/components\/Navbar';\nimport Footer from '..\/components\/Footer';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;Navbar \/&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;Footer \/&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<h3>Criando um componente de layout<\/h3>\n<p>Uma pr\u00e1tica comum no desenvolvimento web \u00e9 criar um <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/routing\/layout-components\/\" target=\"_blank\" rel=\"noopener noreferrer\">componente de layout<\/a> que encapsula a estrutura geral do seu site. Normalmente, o componente de layout inclui elementos que aparecem em todas as p\u00e1ginas, como cabe\u00e7alhos, rodap\u00e9s, menus de navega\u00e7\u00e3o e barras laterais.<\/p>\n<p>Crie um novo arquivo chamado <strong>Layout.js<\/strong> em sua pasta <strong>\/src\/components<\/strong>. Em seguida, defina a estrutura do layout. Para este guia, a estrutura de layout incluir\u00e1 apenas a barra de navega\u00e7\u00e3o e o rodap\u00e9:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '.\/Navbar';\nimport Footer from '.\/Footer';\n\nconst Layout = ({ children }) =&gt; {\n    return (\n        &lt;div className=\"layout\"&gt;\n            &lt;Navbar \/&gt;\n            &lt;div&gt; className=\"content\"&gt;{children}&lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Layout;<\/code><\/pre>\n<p>Neste componente de layout, usamos os componentes para envolver o conte\u00fado da p\u00e1gina (fornecido como <code>children<\/code>). Para usar o componente de layout em suas p\u00e1ginas, importe-o e envolva o conte\u00fado da sua p\u00e1gina com ele. Por exemplo, em sua p\u00e1gina <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\n\nexport default function Home() {\n  return (\n    &lt;Layout&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  );\n}<\/code><\/pre>\n<p>Ao usar um componente de layout, voc\u00ea garante uma estrutura e uma apar\u00eancia consistentes em todas as suas p\u00e1ginas e, ao mesmo tempo, mant\u00e9m o c\u00f3digo organizado e de f\u00e1cil manuten\u00e7\u00e3o. \u00c9 uma maneira poderosa de gerenciar os elementos comuns do seu site de forma eficiente.<\/p>\n<h3>Criando estilos de p\u00e1ginas e componentes no Gatsby<\/h3>\n<p>Criar o estilo do seu site Gatsby \u00e9 flex\u00edvel e permite o uso de v\u00e1rias abordagens, incluindo CSS simples, CSS-in-JS, ou pr\u00e9-processadores de CSS como o Sass. Vamos aprender como criar estilos normais e de m\u00f3dulo para as p\u00e1ginas.<\/p>\n<h4>Estiliza\u00e7\u00e3o com CSS<\/h4>\n<p>No Gatsby, voc\u00ea pode criar facilmente um arquivo CSS e vincul\u00e1-lo a qualquer componente ou p\u00e1gina, e ele funcionar\u00e1 perfeitamente bem. Por exemplo, voc\u00ea pode criar uma pasta <strong>styles<\/strong> na pasta <strong>src<\/strong> e, em seguida, criar um arquivo <strong>global.css<\/strong> com seu c\u00f3digo CSS.<\/p>\n<p>Por exemplo, aqui est\u00e3o alguns estilos globais b\u00e1sicos para os componentes criados anteriormente:<\/p>\n<pre><code class=\"language-css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500&display=swap');\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    background-color: #ddd;\n    font-family: 'Poppins',\n        sans-serif;\n    width: 1200px;\n    margin: 0 auto;\n}\n\na {\n    text-decoration: none;\n}\n\nimg {\n    width: 100%;\n}\n\nnav {\n    display: flex;\n    justify-content: space-between;\n    height: 200px;\n    align-items: center;\n}\n\nnav .logo-img {\n    width: 100px;\n}\n\nnav .nav-links a {\n    padding: 0 20px;\n    font-size: 18px;\n}\n\n@media (max-width:700px) {\n    body {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    nav .nav-links a {\n        padding: 0 18px;\n    }\n}\n\n.footer {\n    width: 100%;\n    text-align: center;\n    margin: 100px 0 20px;\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, voc\u00ea est\u00e1 importando a fonte Poppins do <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-fontes-google\/\">Google Fonts<\/a> e, ent\u00e3o, definindo estilos b\u00e1sicos para aplicar a todos os seus componentes.<\/p>\n<p>Em seguida, importe o arquivo CSS nos componentes que voc\u00ea deseja estilizar; mas, para este projeto, voc\u00ea pode adicion\u00e1-lo ao seu componente Layout para que ele seja aplicado globalmente:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '.\/Navbar';\nimport Footer from '.\/Footer';\nimport '..\/styles\/global.css';\n\nconst Layout = ({ children }) =&gt; {\n    return (\n        &lt;div&gt;\n            &lt;Navbar \/&gt;\n            &lt;div&gt; className=\"content\"&gt;{children}&lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Layout;<\/code><\/pre>\n<h4>Estiliza\u00e7\u00e3o com CSS Modules<\/h4>\n<p>Os CSS Modules permitem que voc\u00ea defina o escopo de seus estilos para componentes ou p\u00e1ginas espec\u00edficos. Isso evita conflitos de estilo e facilita a manuten\u00e7\u00e3o do c\u00f3digo. Na pasta de estilos, crie seus CSS Modules usando o formato <strong>&lt;pageName&gt;.module.css<\/strong> e adicione o estilo espec\u00edfico ao arquivo.<\/p>\n<p>Por exemplo, crie <strong>home.module.css<\/strong> para a p\u00e1gina inicial e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">.home_hero {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    text-align: center;\n\n}\n\n.home_hero h1 {\n    font-size: 60px;\n    width: 70%;\n}\n\n.home_hero p {\n    color: #6E7076;\n    font-size: 20px;\n}\n\n.btn {\n    background-color: #5333ed;\n    padding: 20px 30px;\n    margin-top: 40px;\n    border-radius: 5px;\n    color: #fff;\n}\n\n@media (max-width:700px) {\n    .home_hero h1 {\n        font-size: 40px;\n    }\n\n    .home_hero p {\n        font-size: 16px;\n    }\n}<\/code><\/pre>\n<p>Para usar estilos de CSS em m\u00f3dulos em sua p\u00e1gina ou componente do Gatsby, importe os estilos do seu CSS module como um objeto na parte superior do arquivo da sua p\u00e1gina ou do seu componente e use-o desta forma:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/home.module.css';\n\nexport default function Home() {\n  return (\n    &lt;Layout&gt;\n      &lt;div className={styles.home_hero}&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div className={styles.btn}&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  );\n}<\/code><\/pre>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea tamb\u00e9m pode aplicar o estilo em linha, da mesma forma que faria com componentes React.<\/p>\n<\/aside>\n<br \/>\n<aside data-QM6=\"T2dCYzY5TGpYV0hvUU1a\" data-OU.=\"T2ctMnVEb0V3TllS\" id=\"NjQ0NDI=\" data-U=\"SEZrbVpPMFdHVHYuVXQ=\" data-g.0Hh3u=\"LmpBYlR6M1dKNzZ1bGNHdw==\" class=\"Wzk3NywxMDA5XQ==\" data-tOBUm5f=\"N0YtVllyYVBHdmpmbV9CT0Rx\" data-2FG0OYb=\"OGJZb0dseXh0LXpPNkJuNQ==\" data-Q2=\"YS5ESGdaZXd5SVY3NTBBTDMyelU=\" data-K=\"R2F4NV90UXFkSlNST0RmUFc=\" data-FH3Ql_=\"VTdRbEZyVDgza1I0YVo2\" data-r3koi=\"Im1pZGRsZSI=|InB0X1BUIg==\"><\/aside><\/p>\n<h2>Usando arquivos est\u00e1ticos no Gatsby<\/h2>\n<p>No Gatsby, os arquivos est\u00e1ticos referem-se a ativos como imagens, fontes, arquivos CSS e outros recursos fornecidos diretamente ao navegador do cliente sem nenhum processamento no lado do servidor. Esses arquivos s\u00e3o adicionados ao diret\u00f3rio <strong>\/static<\/strong> na raiz do seu projeto.<\/p>\n<p>Por exemplo, se voc\u00ea adicionar uma imagem <strong>kinsta-logo.png<\/strong> ao diret\u00f3rio <strong>\/static<\/strong>, poder\u00e1 exibi-la em seu componente da seguinte forma:<\/p>\n<pre><code class=\"language-jsx\">import { Link } from 'gatsby';\nimport React from 'react';\n\nconst Navbar = () =&gt; {\n    return (\n        &lt;nav&gt;\n            &lt;Link&gt; to=\"\/\"&gt;\n                &lt;img src=\"\/kinsta-logo.png\" alt=\"Kinsta Logo\" className=\"logo-img\" \/&gt;\n            &lt;\/Link&gt;\n            &lt;div className=\"nav-links\"&gt;\n                &lt;Link&gt; to=\"\/\"&gt;Home&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/about\"&gt;About&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n};\n\nexport default Navbar;<\/code><\/pre>\n<p>O Gatsby resolve automaticamente esses caminhos relativos para a URL correta quando o seu site \u00e9 criado. Mais adiante neste guia, voc\u00ea aprender\u00e1 a otimizar imagens no Gatsby.<\/p>\n<h2>Plugins e integra\u00e7\u00f5es<\/h2>\n<p>O Gatsby tem um rico ecossistema de plugins que podem ampliar sua funcionalidade. Voc\u00ea pode encontrar plugins para <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>, <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-google-analytics\/\" target=\"_blank\" rel=\"noopener noreferrer\">an\u00e1lise<\/a>, otimiza\u00e7\u00e3o de imagens, transforma\u00e7\u00e3o de markdown e muito mais. A instala\u00e7\u00e3o e a configura\u00e7\u00e3o de plugins s\u00e3o simples e podem aprimorar muito os recursos do seu site.<\/p>\n<p>Neste guia, usamos quatro plugins:<\/p>\n<ol start=\"1\">\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-transformer-remark\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-transformer-remark<\/a>: Este plugin permite que voc\u00ea transforme arquivos Markdown em conte\u00fado HTML, facilitando a cria\u00e7\u00e3o e o gerenciamento de publica\u00e7\u00f5es de blog, documenta\u00e7\u00e3o ou qualquer conte\u00fado baseado em texto.<\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-transformer-sharp\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-transformer-sharp<\/a> e <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-sharp\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-plugin-sharp<\/a>: Estes plugins trabalham juntos para otimizar e manipular imagens em seu projeto Gatsby.<\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-source-filesystem\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-source-filesystem<\/a>: Este plugin permite que voc\u00ea obtenha arquivos do diret\u00f3rio do seu projeto e os torne dispon\u00edveis para consulta com GraphQL.<\/li>\n<\/ol>\n<p>Para usar esses plugins em seu projeto Gatsby, execute o seguinte comando no diret\u00f3rio raiz do seu projeto para instal\u00e1-los:<\/p>\n<pre><code class=\"language-bash\">npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem<\/code><\/pre>\n<p>Em seguida, configure-os em seu arquivo <strong>gatsby-config.js<\/strong>. Eis um exemplo de como configurar os plugins:<\/p>\n<pre><code class=\"language-js\">module.exports = {\n    plugins: [\n        \/\/ ...other plugins\n        \/\/ Transform Markdown files into HTML\n        'gatsby-transformer-remark',\n        \/\/ Optimize and manipulate images\n        'gatsby-transformer-sharp',\n        'gatsby-plugin-sharp',\n        \/\/ Source files from your project directory\n        {\n            resolve: `gatsby-source-filesystem`,\n            options: {\n                name: `posts`,\n                path: `${__dirname}\/src\/posts\/`,\n            },\n        },\n        {\n            resolve: `gatsby-source-filesystem`,\n            options: {\n                name: `images`,\n                path: `${__dirname}\/src\/images\/`,\n            },\n        },\n    ],\n};<\/code><\/pre>\n<p>Duas configura\u00e7\u00f5es de <code>gatsby-source-filesystem<\/code> s\u00e3o criadas, apontando para duas pastas: <strong>posts<\/strong> e <strong>images. <\/strong>A pasta<strong> posts<\/strong> armazenar\u00e1 alguns arquivos markdown (publica\u00e7\u00f5es do blog) que seriam transformados com <code>gatsby-transformer-remark<\/code>, e <strong>images<\/strong> armazenar\u00e1 imagens para o blog e outras imagens que voc\u00ea deseja otimizar.<\/p>\n<p>Lembre-se sempre de reiniciar seu servidor de desenvolvimento local quando fizer altera\u00e7\u00f5es no arquivo <strong>gatsby-config.js<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>As imagens armazenadas na pasta <strong>src<\/strong> em um projeto Gatsby destinam-se ao conte\u00fado din\u00e2mico e s\u00e3o otimizadas pelos plugins do Gatsby, enquanto as imagens na pasta <strong>\/static<\/strong> s\u00e3o tratadas como ativos est\u00e1ticos e permanecem inalteradas na sa\u00edda de build, o que as torna adequadas para itens como logos e \u00edcones.<\/p>\n<\/aside>\n\n<h2>Cria\u00e7\u00e3o de publica\u00e7\u00f5es de blog<\/h2>\n<p>Agora que configuramos nossos plugins, crie uma pasta <strong>posts<\/strong> no diret\u00f3rio <strong>src<\/strong> e, em seguida, crie dois arquivos Markdown com o seguinte conte\u00fado:<\/p>\n<p><strong>post-1.md:<\/strong><\/p>\n<pre><code class=\"language-markdown\">---\ntitle: \"Introduction to Gatsby\"\ndate: \"2023-10-01\"\nslug: \"introduction-to-gatsby\"\ndescription: \"Learn the basics of Gatsby and its features.\"\nfeatureImg: ..\/images\/featured\/image-1.jpeg\n---\n\nWelcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.<\/code><\/pre>\n<p>E <strong>post-2.md<\/strong>:<\/p>\n<pre><code class=\"language-markdown\">---\ntitle: \"Optimizing Images in Gatsby\"\ndate: \"2023-10-05\"\nslug: \"optimizing-images-in-gatsby\"\ndescription: \"Explore how to optimize images in your Gatsby project.\"\nfeatureImg: ..\/images\/featured\/image-2.jpeg\n---\n\nImages play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.<\/code><\/pre>\n<p>Esses arquivos Markdown cont\u00eam frontmatter com metadados sobre as publica\u00e7\u00f5es do blog, incluindo t\u00edtulos, datas, slugs, descri\u00e7\u00f5es e caminhos de imagens.<\/p>\n<h2>Realizando consultas no Gatsby com o GraphQL<\/h2>\n<p>O Gatsby usa o <a href=\"https:\/\/kinsta.com\/pt\/blog\/graphql-vs-rest\/\">GraphQL<\/a> para consultar e recuperar dados para o seu site. O GraphQL \u00e9 uma linguagem de consulta avan\u00e7ada que lhe permite solicitar exatamente os dados de que precisa, tornando-a eficiente e flex\u00edvel. Vamos aprender como consultar dados no Gatsby usando o GraphQL.<\/p>\n<p>Ao executar <code>gatsby develop<\/code> no seu terminal, voc\u00ea notar\u00e1 que, al\u00e9m do link <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-source-filesystem\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-source-filesystem<\/a>, que abre o seu projeto na web, voc\u00ea tamb\u00e9m ver\u00e1 a URL <a href=\"http:\/\/localhost:8000\/___graphql\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:8000\/___graphql<\/a>. Essa URL fornece acesso ao <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/querying-data\/running-queries-with-graphiql\/\" target=\"_blank\" rel=\"noopener noreferrer\">editor GraphiQL<\/a> para o seu projeto Gatsby.<\/p>\n<p>Ao abrir o editor, voc\u00ea v\u00ea esta interface:<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/graphiql-playground.png\" alt=\"O playground do Gatsby GraphiQL.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">O playground do Gatsby GraphiQL.<\/figcaption><\/figure>\n<p>Voc\u00ea pode consultar o m\u00e1ximo de informa\u00e7\u00f5es sobre o seu site nesse editor, desde que tenha criado arquivos markdown e feito todas as configura\u00e7\u00f5es no arquivo <strong>gatsby-config.js<\/strong>. Vamos consultar os arquivos Markdown e seu conte\u00fado executando a seguinte consulta no editor:<\/p>\n<pre><code class=\"language-json\">query BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}<\/code><\/pre>\n<p>Esta consulta busca dados de todos os arquivos Markdown usando <code>allMarkdownRemark<\/code>. Ela recupera o <code>title<\/code>, <code>slug<\/code> e <code>description<\/code> do frontmatter de cada arquivo, al\u00e9m do seu <code>id<\/code>.<\/p>\n<p>Ap\u00f3s escrever sua consulta, clique no bot\u00e3o &#8220;Play&#8221; (\u00edcone de tri\u00e2ngulo voltado para a direita) para execut\u00e1-la. Os resultados ser\u00e3o exibidos no lado direito do editor.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/markdown-details-with-graphiql.png\" alt=\"Usando o playground do GraphiQL para obter informa\u00e7\u00f5es de markdown.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Usando o playground do GraphiQL para obter informa\u00e7\u00f5es de markdown.<\/figcaption><\/figure>\n<p>Da\u00ed voc\u00ea pode usar o GraphQL para consultar os dados de Markdown em seus componentes ou p\u00e1ginas. Para consultar esses dados na p\u00e1gina <strong>blog\/index.js<\/strong>, primeiro importe <code>graphql<\/code> de <code>gatsby<\/code>. Em seguida, na parte inferior do c\u00f3digo JSX, adicione o seguinte:<\/p>\n<pre><code class=\"language-json\">export const query = graphql`\nquery BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}\n`;<\/code><\/pre>\n<p>No c\u00f3digo acima, usamos a tag <code>graphql<\/code> para criar uma consulta GraphQL chamada <code>query<\/code>. \u00c9 assim que o arquivo <strong>blog\/index.js<\/strong> deve se parecer:<\/p>\n<pre><code class=\"language-jsx\">import { graphql, Link } from 'gatsby';\nimport React from 'react';\nimport Layout from '..\/..\/components\/Layout';\nimport * as styles from '..\/..\/styles\/blog.module.css';\n\nconst blog = ({ data }) =&gt; {\n    const posts = data.allMarkdownRemark.nodes;\n    return (\n        &lt;Layout&gt;\n            &lt;div className={styles.blog_cont}&gt;\n                &lt;h2&gt;Blog&lt;\/h2&gt;\n                &lt;div className={styles.blog_grid}&gt;\n                    {posts.map((post) =&gt; (\n                        &lt;Link\n                            to={`\/blog\/${post.frontmatter.slug}`}\n                            className={styles.blog_card}\n                            key={post.id}\n                        &gt;\n                            &lt;h3&gt;{post.frontmatter.title}&lt;\/h3&gt;\n                            &lt;p&gt;{post.frontmatter.description}&lt;\/p&gt;\n                        &lt;\/Link&gt;\n                    ))}\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\nexport default blog;\n\nexport const query = graphql`\nquery BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}\n`;<\/code><\/pre>\n<p>No c\u00f3digo acima, voc\u00ea acessa o resultado de <code>query<\/code> por meio da propriedade <code>data<\/code> em seu componente. Em seguida, percorra os dados de <code>posts<\/code> usando o m\u00e9todo JavaScript <code><a href=\"https:\/\/kinsta.com\/pt\/blog\/typeerror-cannot-read-property-map-of-undefined\/\">map()<\/a><\/code> e, ent\u00e3o, exiba os t\u00edtulos em uma lista.<\/p>\n<p>Para evitar erros, crie um arquivo <strong>blog.module.css<\/strong> na pasta <strong>styles<\/strong> e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">.blog_cont h2 {\n    font-size: 40px;\n    margin-bottom: 20px;\n}\n\n.blog_grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n@media (max-width:700px) {\n    .blog_grid {\n        grid-template-columns: 1fr;\n    }\n}\n\n.blog_card {\n    background-color: #bfbfbf;\n    padding: 20px;\n    border-radius: 5px;\n    color: #000;\n    transition: all .5s ease-in-out;\n}\n\n.blog_card:hover {\n    background-color: #5333ed;\n    color: #fff;\n}\n\n.blog_card h3 {\n    margin-bottom: 15px;\n}\n\n.blog_card p {\n    margin-bottom: 15px;\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/blog-posts-graphql.png\" alt=\"Exibi\u00e7\u00e3o das publica\u00e7\u00f5es de blog obtidas via GraphQL.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Exibi\u00e7\u00e3o das publica\u00e7\u00f5es de blog obtidas via GraphQL.<\/figcaption><\/figure>\n<h2>Entendendo templates e gerando p\u00e1ginas din\u00e2micas no Gatsby com GraphQL<\/h2>\n<p>No Gatsby, templates e p\u00e1ginas din\u00e2micas s\u00e3o conceitos essenciais que permitem criar sites flex\u00edveis e orientados por dados. Os templates permitem que voc\u00ea defina a estrutura e o layout das p\u00e1ginas, enquanto o GraphQL o ajuda a buscar dados para preencher esses templates de forma din\u00e2mica.<\/p>\n<h3>Criando um template de publica\u00e7\u00e3o de blog<\/h3>\n<p>Digamos que voc\u00ea queira criar um blog em que cada publica\u00e7\u00e3o tenha uma estrutura consistente, incluindo um t\u00edtulo e conte\u00fado. Voc\u00ea pode criar um template <code>BlogDetails<\/code> para definir esse layout. Na pasta <strong>src<\/strong>, crie a pasta <strong>templates<\/strong>, e ent\u00e3o crie um arquivo <strong>blog-details.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/blog-details.module.css';\n\nconst BlogDetails = () =&gt; {\n\n    return (\n        &lt;Layout&gt;\n            &lt;div&gt;\n                &lt;div className={styles.blog_content}&gt;\n                    &lt;Img\n                        className={styles.blog_featured}\n                    \/&gt;\n                    &lt;h3&gt;Title&lt;\/h3&gt;\n                    &lt;div&gt;\n                        className={styles.html}\n                        dangerouslySetInnerHTML={}\n                    \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\n\nexport default BlogDetails;<\/code><\/pre>\n<p>Neste exemplo, o template <code>BlogDetails<\/code> define a estrutura para publica\u00e7\u00f5es individuais do blog. Em seguida, vamos usar o GraphQL para buscar dados de publica\u00e7\u00f5es espec\u00edficas do blog e pass\u00e1-los como propriedades para esse template.<\/p>\n<h3>Gerando p\u00e1ginas din\u00e2micas<\/h3>\n<p>Para gerar p\u00e1ginas din\u00e2micas, crie um arquivo <strong>gatsby-node.js<\/strong> no diret\u00f3rio raiz do seu projeto. Esse arquivo permite que voc\u00ea defina como as p\u00e1ginas s\u00e3o criadas.<\/p>\n<p>Em seu arquivo <strong>gatsby-node.js<\/strong>, use o GraphQL para consultar os dados que voc\u00ea deseja usar para p\u00e1ginas din\u00e2micas. Por exemplo, se voc\u00ea tiver publica\u00e7\u00f5es de blog em Markdown, poder\u00e1 consultar seus slugs:<\/p>\n<pre><code class=\"language-jsx\">const path = require(`path`);\n\nexports.createPages = async ({ graphql, actions }) =&gt; {\n  const { data } = await graphql(`\n    query Articles {\n      allMarkdownRemark {\n        nodes {\n          frontmatter {\n            slug\n          }\n        }\n      }\n    }\n  `);\n\n  data.allMarkdownRemark.nodes.forEach((node) =&gt; {\n    actions.createPage({\n      path: '\/blog\/' + node.frontmatter.slug,\n      component: path.resolve('.\/src\/templates\/blog-details.js'),\n      context: { slug: node.frontmatter.slug },\n    });\n  });\n};<\/code><\/pre>\n<p>Neste exemplo, consultamos os slugs de todas as publica\u00e7\u00f5es Markdown e criamos p\u00e1ginas din\u00e2micas para cada publica\u00e7\u00e3o usando o template <code>BlogDetails<\/code>. O objeto de contexto \u00e9 usado para passar dados para o template. Esses dados (slug) s\u00e3o o que o template usa para buscar outros dados que se alinhem com o slug.<\/p>\n<p>Vamos primeiro entender como a otimiza\u00e7\u00e3o de imagens funciona no Gatsby antes de adicionar uma consulta GraphQL \u00e0 p\u00e1gina de template.<\/p>\n<h3>Otimiza\u00e7\u00e3o de imagem no Gatsby<\/h3>\n<p>Anteriormente, voc\u00ea instalou e configurou o <code>gatsby-transformer-sharp<\/code> e o <code>gatsby-plugin-sharp<\/code> juntamente com o <code>gatsby-source-filesystem<\/code> para obter imagens.<\/p>\n<p>Com esses plugins, voc\u00ea pode consultar e otimizar imagens com o GraphQL. Veja um exemplo de como consultar e exibir uma imagem otimizada usando <code>gatsby-plugin-sharp<\/code>:<\/p>\n<pre><code class=\"language-json\">export const query = graphql`\n  query {\n    file(relativePath: { eq: \"example.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`;<\/code><\/pre>\n<p>No c\u00f3digo acima, voc\u00ea est\u00e1 consultando uma imagem chamada <strong>example.jpg<\/strong> na fonte <strong>images<\/strong> e usando a propriedade <code>fluid<\/code> da imagem consultada para exibi-la com renderiza\u00e7\u00e3o responsiva e otimizada.<\/p>\n<p>Voc\u00ea pode ent\u00e3o importar <code>Img<\/code> de <code>gatsby-image<\/code> para trabalhar com imagens otimizadas.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\n\nconst ImageExample = ({ data }) =&gt; {\n  const { fluid } = data.file.childImageSharp;\n\n  return (\n    &lt;div&gt;\n      &lt;Img fluid={fluid} alt=\"Example Image\" \/&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default ImageExample;<\/code><\/pre>\n<h3>Consulta de p\u00e1ginas din\u00e2micas<\/h3>\n<p>O Gatsby usar\u00e1 o template especificado para criar p\u00e1ginas individuais para cada publica\u00e7\u00e3o de blog. Agora, vamos adicionar a consulta GraphQL \u00e0 p\u00e1gina de template para buscar os dados com base no slug:<\/p>\n<pre><code class=\"language-jsx\">import { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\nimport React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/blog-details.module.css';\n\nconst BlogDetails = ({ data }) =&gt; {\n    const { html } = data.markdownRemark;\n    const { title, featureImg } = data.markdownRemark.frontmatter;\n    return (\n        &lt;Layout&gt;\n            &lt;div&gt;\n                &lt;div className={styles.blog_content}&gt;\n                    &lt;Img\n                        fluid={featureImg.childImageSharp.fluid}\n                        className={styles.blog_featured}\n                    \/&gt;\n                    &lt;h3&gt;{title}&lt;\/h3&gt;\n                    &lt;div\n                        className={styles.html}\n                        dangerouslySetInnerHTML={{ __html: html }}\n                    \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\n\nexport default BlogDetails;\n\nexport const query = graphql`\n    query ProjectDetails($slug: String) {\n        markdownRemark(frontmatter: { slug: { eq: $slug } }) {\n            html\n            frontmatter {\n                title\n                featureImg {\n                    childImageSharp {\n                        fluid {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n            }\n        }\n    }\n`;<\/code><\/pre>\n<p>No c\u00f3digo acima, voc\u00ea notar\u00e1 que estamos consultando a imagem otimizada e consultando a publica\u00e7\u00e3o do blog que corresponde ao slug.<\/p>\n<p>Voc\u00ea pode conferir o c\u00f3digo-fonte completo deste <a href=\"https:\/\/github.com\/kinsta\/kinsta-gatsby-quickstart\" target=\"_blank\" rel=\"noopener noreferrer\">projeto Gatsby no GitHub<\/a>.<\/p>\n<h2>Implante sites est\u00e1ticos do Gatsby com a Kinsta<\/h2>\n<p>A Kinsta permite que voc\u00ea hospede <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">at\u00e9 100 sites est\u00e1ticos<\/a> <strong>gratuitamente<\/strong>. Voc\u00ea pode fazer isso enviando seu c\u00f3digo para o provedor Git de sua prefer\u00eancia (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) e depois implantando-o na Kinsta.<\/p>\n<p>Quando seu reposit\u00f3rio estiver pronto, siga estas etapas para implantar seu site est\u00e1tico na Kinsta:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login ou crie uma conta para visualizar seu painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com seu provedor Git.<\/li>\n<li>Clique em <strong>Sites est\u00e1ticos<\/strong> na barra lateral esquerda, e ent\u00e3o, em <strong>Adicionar site<\/strong>.<\/li>\n<li>Selecione o reposit\u00f3rio e o branch a partir dos quais voc\u00ea deseja implantar.<\/li>\n<li>Atribua um nome exclusivo ao seu site.<\/li>\n<li>O MyKinsta detectar\u00e1 automaticamente as configura\u00e7\u00f5es de build para esse projeto Gatsby. Voc\u00ea ver\u00e1 as seguintes configura\u00e7\u00f5es pr\u00e9-preenchidas:\n<ul>\n<li><strong>Comando de build:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Vers\u00e3o do node:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Diret\u00f3rio de publica\u00e7\u00e3o:<\/strong> <code>public<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Por fim, clique em <strong>Criar site<\/strong>.<\/li>\n<\/ol>\n<p>E \u00e9 isso! Agora voc\u00ea tem um site implantado em poucos segundos. Voc\u00ea receber\u00e1 um link para acessar a vers\u00e3o implantada do seu site. Posteriormente, voc\u00ea poder\u00e1 adicionar seu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dom\u00ednio personalizado<\/a> e o <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificado SSL<\/a>, se desejar.<\/p>\n<p>Como alternativa \u00e0 Hospedagem de Site Est\u00e1tico, voc\u00ea pode optar por implantar seu site est\u00e1tico com a <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implanta\u00e7\u00e3o personalizada usando um Dockerfile, e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">an\u00e1lises completas<\/a>\u00a0que englobam dados hist\u00f3ricos e em tempo real.<\/p>\n<h2>Resumo<\/h2>\n<p>Este guia aborda os fundamentos de fornecimento de dados, roteamento, estilo, otimiza\u00e7\u00e3o de imagens, plugins, implanta\u00e7\u00e3o, e muito mais.<\/p>\n<p>A flexibilidade, a velocidade e o rico ecossistema do Gatsby fazem dele uma op\u00e7\u00e3o poderosa para a cria\u00e7\u00e3o de sites est\u00e1ticos. N\u00e3o importa se voc\u00ea est\u00e1 criando um blog pessoal, um site de portf\u00f3lio ou um site de neg\u00f3cios, o Gatsby tem tudo que voc\u00ea precisa.<\/p>\n<p><em>Agora \u00e9 hora de colocar seu conhecimento em a\u00e7\u00e3o e come\u00e7ar a criar seu pr\u00f3prio site Gatsby. Voc\u00ea j\u00e1 utilizou Gatsby para criar algo? Sinta-se \u00e0 vontade para compartilhar seus projetos e experi\u00eancias conosco abaixo, na se\u00e7\u00e3o de coment\u00e1rios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os sites est\u00e1ticos voltaram a aparecer nos \u00faltimos anos, gra\u00e7as \u00e0 sua velocidade, seguran\u00e7a e simplicidade. Uma das principais ferramentas para a cria\u00e7\u00e3o de sites est\u00e1ticos &#8230;<\/p>\n","protected":false},"author":287,"featured_media":64443,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[977,1009],"class_list":["post-64442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-geradores-sites-estaticos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby\" \/>\n<meta property=\"og:description\" content=\"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-03T12:33:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T11:44:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby\",\"datePublished\":\"2023-12-03T12:33:05+00:00\",\"dateModified\":\"2023-12-06T11:44:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\"},\"wordCount\":3559,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\",\"name\":\"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg\",\"datePublished\":\"2023-12-03T12:33:05+00:00\",\"dateModified\":\"2023-12-06T11:44:07+00:00\",\"description\":\"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Geradores de Sites Est\u00e1ticos\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/geradores-sites-estaticos\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby - Kinsta\u00ae","description":"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/","og_locale":"pt_PT","og_type":"article","og_title":"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby","og_description":"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.","og_url":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-12-03T12:33:05+00:00","article_modified_time":"2023-12-06T11:44:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"21 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby","datePublished":"2023-12-03T12:33:05+00:00","dateModified":"2023-12-06T11:44:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/"},"wordCount":3559,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/gatsby\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/","url":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/","name":"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg","datePublished":"2023-12-03T12:33:05+00:00","dateModified":"2023-12-06T11:44:07+00:00","description":"Libere todo o poder do Gatsby com nosso guia detalhado! Saiba como criar sites est\u00e1ticos extremamente r\u00e1pidos desde a configura\u00e7\u00e3o at\u00e9 a implanta\u00e7\u00e3o.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/gatsby\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/gatsby.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/gatsby\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Geradores de Sites Est\u00e1ticos","item":"https:\/\/kinsta.com\/pt\/topicos\/geradores-sites-estaticos\/"},{"@type":"ListItem","position":3,"name":"Guia Abrangente de Cria\u00e7\u00e3o de Sites Est\u00e1ticos com Gatsby"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=64442"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64442\/revisions"}],"predecessor-version":[{"id":65650,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64442\/revisions\/65650"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64442\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/64443"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=64442"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=64442"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=64442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}