Os sites estáticos voltaram a aparecer nos últimos anos, graças à sua velocidade, segurança e simplicidade. Uma das principais ferramentas para a criação de sites estáticos atualmente é o Gatsby, um gerador de sites estáticos (SSG) extremamente rápido.

Se você é um desenvolvedor web que deseja criar um blog pessoal, um site de portfólio ou um site comercial, o Gatsby pode ajudá-lo a atingir suas metas. Este guia abrangente o conduzirá pelo processo de criação de sites estáticos com o Gatsby. Ele aborda de tudo, desde o básico até tópicos avançados.

Um site demonstrativo para ilustrar o que você pode criar após ler este guia.
Um site demonstrativo para ilustrar o que você pode criar após ler este guia.

Entendendo sites estáticos

Sites estáticos são páginas web que contêm arquivos HTML, CSS e JavaScript pré-renderizados. Ao contrário dos sites dinâmicos, eles não dependem do processamento no lado do servidor para cada solicitação. Em vez disso, todo o conteúdo é gerado antecipadamente e exibido diretamente no navegador do usuário. Essa abordagem oferece várias vantagens:

  1. Velocidade: os sites estáticos são carregados rapidamente, pois não há processamento no lado do servidor.
  2. Segurança: Como não há execução de código no lado do servidor, sites estáticos são menos vulneráveis a ameaças de segurança.
  3. Escalabilidade: É fácil armazenar em cache e distribuir sites estáticos por meio de CDNs (Content Delivery Networks, redes de distribuição de conteúdo).
  4. Simplicidade: Eles são mais fáceis de desenvolver, implantar e manter.

Agora que você já sabe o que são sites estáticos e seus benefícios, vamos nos aprofundar no Gatsby.

O que é o Gatsby?

O Gatsby é um framework de código aberto baseado na biblioteca JavaScript React, que simplifica o processo de criação de sites estáticos. Ele combina o poder dos componentes React com o GraphQL para gerenciamento de dados, o que o torna uma excelente opção para desenvolvedores de todos os níveis. Veja por que o Gatsby se destaca:

  1. Extremamente rápido: O Gatsby otimiza a velocidade do seu site usando técnicas como divisão de código e lazy loading, resultando em carregamentos de página quase instantâneos.
  2. Fonte de dados flexível: Pode obter dados de vários locais, incluindo arquivos Markdown, APIs e bancos de dados.
  3. Rico ecossistema de plugins: O amplo ecossistema de plugins do Gatsby permite que você amplie sua funcionalidade sem esforço.
  4. SEO e desempenho: O Gatsby gera automaticamente HTML otimizado para melhorar o SEO e o desempenho.

Primeiros passos com o Gatsby

Para acompanhar este guia, você deve ter:

  • Conhecimento fundamental de HTML, CSS e JavaScript
  • Conhecimento básico de React
  • Node.js e npm (Node Package Manager) ou yarn instalados em seu computador

Para começar a usar o Gatsby e criar um projeto, você pode usar um dos muitos exemplos na Gatsby Starter Library, ou criar um projeto do zero.

Para este guia, vamos usar o hello world starter oficial para o GatsbyJS, pois ele fornece um projeto simples sem plugins ou arquivos extras.

  1. Primeiro, instale a CLI do Gatsby em seu computador executando o seguinte comando:
npm install -g gatsby-cli

Execute gatsby --version para verificar se a instalação foi bem-sucedida.

  1. Em seguida, navegue até a pasta em que você deseja criar o projeto e execute o seguinte comando:
npx gatsby new <project-name> https://github.com/gatsbyjs/gatsby-starter-hello-world

Altere <project-name> acima para o nome escolhido para o seu projeto.

  1. Quando isso for feito com sucesso, navegue até a pasta do projeto e inicie o servidor de desenvolvimento:
cd <project-name>
gatsby develop

O servidor de desenvolvimento local será iniciado em http://localhost:8000, onde você poderá acessar o seu site do Gatsby.

O tema hello world do Gatsby.
O tema hello world do Gatsby.

Entendendo a estrutura de arquivos do Gatsby

Ao abrir seu projeto em um editor de código, você verá a seguinte estrutura:

/
|-- /public
|-- /src
    |-- /pages
        |-- index.js
|-- /static
|-- gatsby-config.js
  • /public: Esse diretório contém a saída do seu processo de build do Gatsby. É onde residem o HTML, o CSS, o JavaScript e outros ativos gerados.
  • /src: este é o coração do seu projeto Gatsby, no qual você passará a maior parte do tempo. Contém vários subdiretórios e arquivos:
    • /pages: É onde estão armazenadas todas as páginas do seu projeto. Cada arquivo JavaScript aqui corresponde a um caminho em seu site.
  • /static: Esse diretório é usado para arquivos estáticos que você deseja incluir em seu site, como imagens, fontes ou arquivos para download. Esses arquivos são servidos como são e não serão processados pelo Gatsby.
  • gatsby-config.js: nesse arquivo de configuração você define vários ajustes para o seu site Gatsby. Você pode especificar plugins, metadados do site e outras configurações aqui.

Criação de páginas e componentes

No Gatsby, a criação de páginas web é um processo simples. Qualquer arquivo JavaScript que você cria na pasta /src/pages se torna automaticamente uma página com seu caminho correspondente, graças à geração automática de páginas do Gatsby.

Você pode criar quantas páginas forem necessárias para o seu site adicionando mais arquivos JavaScript à pasta /src/pages. Por exemplo, você pode criar um arquivo about.js para uma página “Sobre”.

Embora você possa criar arquivos JavaScript individuais para cada página diretamente na pasta /src/pages, também é possível organizar melhor as páginas. Você pode criar subpastas para agrupar páginas relacionadas. Por exemplo, crie uma pasta blog para organizar todas as páginas relacionadas ao seu blog.

Para este projeto, veja como se parecerá a estrutura da página:

|-- /src
    |-- /pages
        |-- about.js
        |-- index.js
        |-- /blog
            |-- index.js

Utilizando JSX para páginas

Como o Gatsby foi desenvolvido com base no React, suas páginas e componentes são escritos em JSX (JavaScript XML). JSX é uma extensão de sintaxe para JavaScript que permite definir a estrutura e o layout de suas interfaces de usuário de maneira altamente legível e expressiva.

Por exemplo, você pode criar o conteúdo da sua Página Inicial (index.js) desta forma:

import React from 'react';

export default function Home() {
  return (
    <>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
      </div>
    </>
  );
}

Criando links para outras páginas no Gatsby

Para criar um link para outra página, você pode usar o componente Link da seguinte forma:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
    return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <Link> to="/about">About Us</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </>
    );
}

No exemplo acima, importamos o componente Link de gatsby e o usamos para criar links para a página “About Us” e um blog. A página “About Us”, por exemplo, tem o caminho /about. Quando os usuários clicarem no link “About Us”, serão levados para a página /about.

Para criar links para sites externos, você pode usar tags de âncora regulares (<a>) com o atributo href:

import React from 'react';

export default function Home() {
  return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <div>
                    <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                    <p>Fast, Secure, Reliable Hosting Solution.</p>
                    <a href="https://kinsta.com/docs/static-site-hosting/" target="_blank" rel="noreferrer">
                        <div>Read more</div>
                    </a>
                </div>
            </div>
        </>
    );
}

Neste caso, o link abre o site externo em uma nova aba do navegador devido aos atributos target="_blank" e rel="noreferrer".

Criando componentes no Gatsby

A arquitetura baseada em componentes do Gatsby permite que você crie blocos de construção reutilizáveis para suas páginas web. Em vez de duplicar o código em várias páginas, você pode encapsular elementos comuns em componentes, tornando sua base de código mais organizada, de mais fácil manutenção e eficiente.

Suponha que o código da sua Página Inicial inclua a seção de navegação, o conteúdo principal e um rodapé:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return (
    <>
      <div className="nav-links">
        <Link> to="/">Home</Link>
        <Link> to="/about">About</Link>
        <Link> to="/blog">Blog</Link>
      </div>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <div className="footer">
        <p>
          Hosted with ❤️ by Kinsta's{' '}
          <a> href="https://kinsta.com/static-site-hosting">
            Static Site Hosting
          </a>
          .
        </p>
      </div>
    </>
  );
}

Imagine ter de duplicar o código da barra de navegação e do rodapé para cada página do seu site. É aqui que o poder dos componentes entra em ação. Você pode criar componentes reutilizáveis para a barra de navegação, o rodapé e todos os trechos de código que seriam repetidos em várias páginas e componentes.

Para trabalhar com componentes no Gatsby, crie uma pasta components na pasta src para armazenar todos os componentes. Em seguida, crie seus componentes. Por exemplo, Navbar.js e Footer.js. No arquivo Navbar.js, separe o código da seguinte maneira:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <div className="nav-links">
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

E também seu Footer.js:

import React from 'react';
const Footer = () => {
    return (
        <div className="footer">
            <p>
                Hosted with ❤️ by Kinsta's{' '}
                <a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
                .
            </p>
        </div>
    );
};

export default Footer;

Em seguida, importe os arquivos de componentes para suas páginas ou componentes e use-os desta forma:

import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Home() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <Footer />
    </>
  );
}

Criando um componente de layout

Uma prática comum no desenvolvimento web é criar um componente de layout que encapsula a estrutura geral do seu site. Normalmente, o componente de layout inclui elementos que aparecem em todas as páginas, como cabeçalhos, rodapés, menus de navegação e barras laterais.

Crie um novo arquivo chamado Layout.js em sua pasta /src/components. Em seguida, defina a estrutura do layout. Para este guia, a estrutura de layout incluirá apenas a barra de navegação e o rodapé:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout = ({ children }) => {
    return (
        <div className="layout">
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Neste componente de layout, usamos os componentes para envolver o conteúdo da página (fornecido como children). Para usar o componente de layout em suas páginas, importe-o e envolva o conteúdo da sua página com ele. Por exemplo, em sua página index.js:

import React from 'react';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

Ao usar um componente de layout, você garante uma estrutura e uma aparência consistentes em todas as suas páginas e, ao mesmo tempo, mantém o código organizado e de fácil manutenção. É uma maneira poderosa de gerenciar os elementos comuns do seu site de forma eficiente.

Criando estilos de páginas e componentes no Gatsby

Criar o estilo do seu site Gatsby é flexível e permite o uso de várias abordagens, incluindo CSS simples, CSS-in-JS, ou pré-processadores de CSS como o Sass. Vamos aprender como criar estilos normais e de módulo para as páginas.

Estilização com CSS

No Gatsby, você pode criar facilmente um arquivo CSS e vinculá-lo a qualquer componente ou página, e ele funcionará perfeitamente bem. Por exemplo, você pode criar uma pasta styles na pasta src e, em seguida, criar um arquivo global.css com seu código CSS.

Por exemplo, aqui estão alguns estilos globais básicos para os componentes criados anteriormente:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ddd;
    font-family: 'Poppins',
        sans-serif;
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    height: 200px;
    align-items: center;
}

nav .logo-img {
    width: 100px;
}

nav .nav-links a {
    padding: 0 20px;
    font-size: 18px;
}

@media (max-width:700px) {
    body {
        width: 100%;
        padding: 0 20px;
    }

    nav .nav-links a {
        padding: 0 18px;
    }
}

.footer {
    width: 100%;
    text-align: center;
    margin: 100px 0 20px;
}

No código acima, você está importando a fonte Poppins do Google Fonts e, então, definindo estilos básicos para aplicar a todos os seus componentes.

Em seguida, importe o arquivo CSS nos componentes que você deseja estilizar; mas, para este projeto, você pode adicioná-lo ao seu componente Layout para que ele seja aplicado globalmente:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../styles/global.css';

const Layout = ({ children }) => {
    return (
        <div>
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Estilização com CSS Modules

Os CSS Modules permitem que você defina o escopo de seus estilos para componentes ou páginas específicos. Isso evita conflitos de estilo e facilita a manutenção do código. Na pasta de estilos, crie seus CSS Modules usando o formato <pageName>.module.css e adicione o estilo específico ao arquivo.

Por exemplo, crie home.module.css para a página inicial e adicione o seguinte código:

.home_hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

.home_hero h1 {
    font-size: 60px;
    width: 70%;
}

.home_hero p {
    color: #6E7076;
    font-size: 20px;
}

.btn {
    background-color: #5333ed;
    padding: 20px 30px;
    margin-top: 40px;
    border-radius: 5px;
    color: #fff;
}

@media (max-width:700px) {
    .home_hero h1 {
        font-size: 40px;
    }

    .home_hero p {
        font-size: 16px;
    }
}

Para usar estilos de CSS em módulos em sua página ou componente do Gatsby, importe os estilos do seu CSS module como um objeto na parte superior do arquivo da sua página ou do seu componente e use-o desta forma:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/home.module.css';

export default function Home() {
  return (
    <Layout>
      <div className={styles.home_hero}>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div className={styles.btn}>Read more</div>
        </a>
      </div>
    </Layout>
  );
}


Usando arquivos estáticos no Gatsby

No Gatsby, os arquivos estáticos 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ão adicionados ao diretório /static na raiz do seu projeto.

Por exemplo, se você adicionar uma imagem kinsta-logo.png ao diretório /static, poderá exibi-la em seu componente da seguinte forma:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <Link> to="/">
                <img src="/kinsta-logo.png" alt="Kinsta Logo" className="logo-img" />
            </Link>
            <div className="nav-links">
                <Link> to="/">Home</Link>
                <Link> to="/about">About</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

O Gatsby resolve automaticamente esses caminhos relativos para a URL correta quando o seu site é criado. Mais adiante neste guia, você aprenderá a otimizar imagens no Gatsby.

Plugins e integrações

O Gatsby tem um rico ecossistema de plugins que podem ampliar sua funcionalidade. Você pode encontrar plugins para SEO, análise, otimização de imagens, transformação de markdown e muito mais. A instalação e a configuração de plugins são simples e podem aprimorar muito os recursos do seu site.

Neste guia, usamos quatro plugins:

  1. gatsby-transformer-remark: Este plugin permite que você transforme arquivos Markdown em conteúdo HTML, facilitando a criação e o gerenciamento de publicações de blog, documentação ou qualquer conteúdo baseado em texto.
  2. gatsby-transformer-sharp e gatsby-plugin-sharp: Estes plugins trabalham juntos para otimizar e manipular imagens em seu projeto Gatsby.
  3. gatsby-source-filesystem: Este plugin permite que você obtenha arquivos do diretório do seu projeto e os torne disponíveis para consulta com GraphQL.

Para usar esses plugins em seu projeto Gatsby, execute o seguinte comando no diretório raiz do seu projeto para instalá-los:

npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

Em seguida, configure-os em seu arquivo gatsby-config.js. Eis um exemplo de como configurar os plugins:

module.exports = {
    plugins: [
        // ...other plugins
        // Transform Markdown files into HTML
        'gatsby-transformer-remark',
        // Optimize and manipulate images
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        // Source files from your project directory
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/src/posts/`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
    ],
};

Duas configurações de gatsby-source-filesystem são criadas, apontando para duas pastas: posts e images. A pasta posts armazenará alguns arquivos markdown (publicações do blog) que seriam transformados com gatsby-transformer-remark, e images armazenará imagens para o blog e outras imagens que você deseja otimizar.

Lembre-se sempre de reiniciar seu servidor de desenvolvimento local quando fizer alterações no arquivo gatsby-config.js.

Criação de publicações de blog

Agora que configuramos nossos plugins, crie uma pasta posts no diretório src e, em seguida, crie dois arquivos Markdown com o seguinte conteúdo:

post-1.md:

---
title: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its features."
featureImg: ../images/featured/image-1.jpeg
---

Welcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.

E post-2.md:

---
title: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Explore how to optimize images in your Gatsby project."
featureImg: ../images/featured/image-2.jpeg
---

Images play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.

Esses arquivos Markdown contêm frontmatter com metadados sobre as publicações do blog, incluindo títulos, datas, slugs, descrições e caminhos de imagens.

Realizando consultas no Gatsby com o GraphQL

O Gatsby usa o GraphQL para consultar e recuperar dados para o seu site. O GraphQL é uma linguagem de consulta avançada que lhe permite solicitar exatamente os dados de que precisa, tornando-a eficiente e flexível. Vamos aprender como consultar dados no Gatsby usando o GraphQL.

Ao executar gatsby develop no seu terminal, você notará que, além do link gatsby-source-filesystem, que abre o seu projeto na web, você também verá a URL http://localhost:8000/___graphql. Essa URL fornece acesso ao editor GraphiQL para o seu projeto Gatsby.

Ao abrir o editor, você vê esta interface:

O playground do Gatsby GraphiQL.
O playground do Gatsby GraphiQL.

Você pode consultar o máximo de informações sobre o seu site nesse editor, desde que tenha criado arquivos markdown e feito todas as configurações no arquivo gatsby-config.js. Vamos consultar os arquivos Markdown e seu conteúdo executando a seguinte consulta no editor:

query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}

Esta consulta busca dados de todos os arquivos Markdown usando allMarkdownRemark. Ela recupera o title, slug e description do frontmatter de cada arquivo, além do seu id.

Após escrever sua consulta, clique no botão “Play” (ícone de triângulo voltado para a direita) para executá-la. Os resultados serão exibidos no lado direito do editor.

Usando o playground do GraphiQL para obter informações de markdown.
Usando o playground do GraphiQL para obter informações de markdown.

Daí você pode usar o GraphQL para consultar os dados de Markdown em seus componentes ou páginas. Para consultar esses dados na página blog/index.js, primeiro importe graphql de gatsby. Em seguida, na parte inferior do código JSX, adicione o seguinte:

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

No código acima, usamos a tag graphql para criar uma consulta GraphQL chamada query. É assim que o arquivo blog/index.js deve se parecer:

import { graphql, Link } from 'gatsby';
import React from 'react';
import Layout from '../../components/Layout';
import * as styles from '../../styles/blog.module.css';

const blog = ({ data }) => {
    const posts = data.allMarkdownRemark.nodes;
    return (
        <Layout>
            <div className={styles.blog_cont}>
                <h2>Blog</h2>
                <div className={styles.blog_grid}>
                    {posts.map((post) => (
                        <Link
                            to={`/blog/${post.frontmatter.slug}`}
                            className={styles.blog_card}
                            key={post.id}
                        >
                            <h3>{post.frontmatter.title}</h3>
                            <p>{post.frontmatter.description}</p>
                        </Link>
                    ))}
                </div>
            </div>
        </Layout>
    );
};
export default blog;

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

No código acima, você acessa o resultado de query por meio da propriedade data em seu componente. Em seguida, percorra os dados de posts usando o método JavaScript map() e, então, exiba os títulos em uma lista.

Para evitar erros, crie um arquivo blog.module.css na pasta styles e adicione o seguinte código:

.blog_cont h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.blog_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width:700px) {
    .blog_grid {
        grid-template-columns: 1fr;
    }
}

.blog_card {
    background-color: #bfbfbf;
    padding: 20px;
    border-radius: 5px;
    color: #000;
    transition: all .5s ease-in-out;
}

.blog_card:hover {
    background-color: #5333ed;
    color: #fff;
}

.blog_card h3 {
    margin-bottom: 15px;
}

.blog_card p {
    margin-bottom: 15px;
}
Exibição das publicações de blog obtidas via GraphQL.
Exibição das publicações de blog obtidas via GraphQL.

Entendendo templates e gerando páginas dinâmicas no Gatsby com GraphQL

No Gatsby, templates e páginas dinâmicas são conceitos essenciais que permitem criar sites flexíveis e orientados por dados. Os templates permitem que você defina a estrutura e o layout das páginas, enquanto o GraphQL o ajuda a buscar dados para preencher esses templates de forma dinâmica.

Criando um template de publicação de blog

Digamos que você queira criar um blog em que cada publicação tenha uma estrutura consistente, incluindo um título e conteúdo. Você pode criar um template BlogDetails para definir esse layout. Na pasta src, crie a pasta templates, e então crie um arquivo blog-details.js:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = () => {

    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        className={styles.blog_featured}
                    />
                    <h3>Title</h3>
                    <div>
                        className={styles.html}
                        dangerouslySetInnerHTML={}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

Neste exemplo, o template BlogDetails define a estrutura para publicações individuais do blog. Em seguida, vamos usar o GraphQL para buscar dados de publicações específicas do blog e passá-los como propriedades para esse template.

Gerando páginas dinâmicas

Para gerar páginas dinâmicas, crie um arquivo gatsby-node.js no diretório raiz do seu projeto. Esse arquivo permite que você defina como as páginas são criadas.

Em seu arquivo gatsby-node.js, use o GraphQL para consultar os dados que você deseja usar para páginas dinâmicas. Por exemplo, se você tiver publicações de blog em Markdown, poderá consultar seus slugs:

const path = require(`path`);

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query Articles {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  data.allMarkdownRemark.nodes.forEach((node) => {
    actions.createPage({
      path: '/blog/' + node.frontmatter.slug,
      component: path.resolve('./src/templates/blog-details.js'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

Neste exemplo, consultamos os slugs de todas as publicações Markdown e criamos páginas dinâmicas para cada publicação usando o template BlogDetails. O objeto de contexto é usado para passar dados para o template. Esses dados (slug) são o que o template usa para buscar outros dados que se alinhem com o slug.

Vamos primeiro entender como a otimização de imagens funciona no Gatsby antes de adicionar uma consulta GraphQL à página de template.

Otimização de imagem no Gatsby

Anteriormente, você instalou e configurou o gatsby-transformer-sharp e o gatsby-plugin-sharp juntamente com o gatsby-source-filesystem para obter imagens.

Com esses plugins, você pode consultar e otimizar imagens com o GraphQL. Veja um exemplo de como consultar e exibir uma imagem otimizada usando gatsby-plugin-sharp:

export const query = graphql`
  query {
    file(relativePath: { eq: "example.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

No código acima, você está consultando uma imagem chamada example.jpg na fonte images e usando a propriedade fluid da imagem consultada para exibi-la com renderização responsiva e otimizada.

Você pode então importar Img de gatsby-image para trabalhar com imagens otimizadas.

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';

const ImageExample = ({ data }) => {
  const { fluid } = data.file.childImageSharp;

  return (
    <div>
      <Img fluid={fluid} alt="Example Image" />
    </div>
  );
};

export default ImageExample;

Consulta de páginas dinâmicas

O Gatsby usará o template especificado para criar páginas individuais para cada publicação de blog. Agora, vamos adicionar a consulta GraphQL à página de template para buscar os dados com base no slug:

import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = ({ data }) => {
    const { html } = data.markdownRemark;
    const { title, featureImg } = data.markdownRemark.frontmatter;
    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        fluid={featureImg.childImageSharp.fluid}
                        className={styles.blog_featured}
                    />
                    <h3>{title}</h3>
                    <div
                        className={styles.html}
                        dangerouslySetInnerHTML={{ __html: html }}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

export const query = graphql`
    query ProjectDetails($slug: String) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                featureImg {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
`;

No código acima, você notará que estamos consultando a imagem otimizada e consultando a publicação do blog que corresponde ao slug.

Você pode conferir o código-fonte completo deste projeto Gatsby no GitHub.

Implante sites estáticos do Gatsby com a Kinsta

A Kinsta permite que você hospede até 100 sites estáticos gratuitamente. Você pode fazer isso enviando seu código para o provedor Git de sua preferência (Bitbucket, GitHub ou GitLab) e depois implantando-o na Kinsta.

Quando seu repositório estiver pronto, siga estas etapas para implantar seu site estático na Kinsta:

  1. Faça login ou crie uma conta para visualizar seu painel MyKinsta.
  2. Autorize a Kinsta com seu provedor Git.
  3. Clique em Sites estáticos na barra lateral esquerda, e então, em Adicionar site.
  4. Selecione o repositório e o branch a partir dos quais você deseja implantar.
  5. Atribua um nome exclusivo ao seu site.
  6. O MyKinsta detectará automaticamente as configurações de build para esse projeto Gatsby. Você verá as seguintes configurações pré-preenchidas:
    • Comando de build: npm run build
    • Versão do node: 18.16.0
    • Diretório de publicação: public
  1. Por fim, clique em Criar site.

E é isso! Agora você tem um site implantado em poucos segundos. Você receberá um link para acessar a versão implantada do seu site. Posteriormente, você poderá adicionar seu domínio personalizado e o certificado SSL, se desejar.

Como alternativa à Hospedagem de Site Estático, você pode optar por implantar seu site estático com a Hospedagem de Aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benefícios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implantação personalizada usando um Dockerfile, e análises completas que englobam dados históricos e em tempo real.

Resumo

Este guia aborda os fundamentos de fornecimento de dados, roteamento, estilo, otimização de imagens, plugins, implantação, e muito mais.

A flexibilidade, a velocidade e o rico ecossistema do Gatsby fazem dele uma opção poderosa para a criação de sites estáticos. Não importa se você está criando um blog pessoal, um site de portfólio ou um site de negócios, o Gatsby tem tudo que você precisa.

Agora é hora de colocar seu conhecimento em ação e começar a criar seu próprio site Gatsby. Você já utilizou Gatsby para criar algo? Sinta-se à vontade para compartilhar seus projetos e experiências conosco abaixo, na seção de comentários.

Joel Olawanle Kinsta

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 200 technical articles majorly around JavaScript and it's frameworks.