O Gatsby transforma seu site em arquivos simples em public/: HTML para cada página, mais o JavaScript que deixa a navegação rápida. Desde que o Gatsby Cloud fechou em 2023, muitos sites Gatsby precisaram de uma nova casa. O Lobsite hospeda a pasta gerada: rode gatsby build, depois npx lobsite, e o site fica no ar num endereço *.lobsite.app com HTTPS.
Como funciona
- Faça o build do site com
npx gatsby build(ounpm run build). O Gatsby o escreve empublic/. - Rode
npx lobsiteno projeto. Ele encontrapublic/e publica; num projeto Gatsby essa é a saída do build, enquanto seus próprios arquivos estáticos ficam emstatic/. O primeiro deploy não precisa de conta e dura 6 horas. - Mantenha-o com o link de resgate, numa conta gratuita. Depois disso, os mesmos dois comandos atualizam o mesmo endereço.
Configurações do gatsby-config
// gatsby-config.js
module.exports = {
siteMetadata: { siteUrl: "https://my-site.lobsite.app" },
};
siteMetadata.siteUrlé o seu endereço completo. Ogatsby-plugin-sitemap, os links canônicos e os feeds o leem.pathPrefixnão é necessário: o site é servido a partir da raiz do endereço. Se você o definiu para o GitHub Pages, faça o build sem--prefix-paths.gatsby cleanlimpa o cache epublic/. Rode-o se um deploy mostrar páginas que você removeu.
O que precisa dos recursos de servidor do Gatsby
Páginas estáticas, gatsby-plugin-image e dados do GraphQL funcionam, porque são resolvidos durante o gatsby build. Três recursos precisam de servidor e não rodam no Lobsite: Gatsby Functions (src/api), renderização no servidor com getServerData e Deferred Static Generation. Troque uma function que processa um formulário de contato por um formulário que envia para /_lobsite/forms/contact; veja formulários. Redirecionamentos criados com createRedirect precisam de um plugin da hospedagem; no Lobsite, coloque-os no lobsite.toml, com o Gerador de redirecionamentos.
Os arquivos são guardados pelo hash. Refazer o deploy de um site sem mudanças envia 0 bytes.
Veja a prévia antes de ir ao ar. Volte atrás com um clique, redirecionamentos inclusos.
Todo site ganha um endereço *.lobsite.app com HTTPS desde o primeiro deploy.
Aponte um formulário para /_lobsite/forms/contact. Filtro de spam incluso.
Redirecionamentos, cabeçalhos e formulários ficam no lobsite.toml e acompanham cada deploy.
Um deploy sem conta fica no ar por 6 horas. O link de resgate o mantém, de graça.
Hospedagens para Gatsby comparadas
| Lobsite | Netlify | GitHub Pages | |
|---|---|---|---|
| Sites Gatsby estáticos | Sim | Sim | Sim |
| Functions, SSR, DSG | Não | Sim | Não |
| Faz o build no servidor | Não: você publica public/ |
Sim | No GitHub Actions |
| Só os arquivos alterados são enviados | Sim | Sim | Via Git |
| Conta antes do primeiro deploy | Não: no ar por 6 horas, depois mantenha grátis | Sim | Sim, e um repositório |
| Formulários sem backend | Sim, quando o site está numa conta | Sim | Não |
| Domínio próprio | Sim, grátis | Sim | Sim |
O Netlify, que assumiu o Gatsby em 2023, também roda os recursos de servidor dele. Para um site Gatsby estático, como a maioria, o Lobsite publica a pasta gerada com um comando, e os nomes de arquivo com hash do Gatsby fazem um novo build enviar só os arquivos que realmente mudaram.
Perguntas frequentes
Onde hospedar um site Gatsby agora que o Gatsby Cloud acabou?
Qualquer hospedagem estática serve um site Gatsby gerado. No Lobsite, rode gatsby build e npx lobsite; o primeiro deploy não precisa de conta.
Por que o npx lobsite publica public/ no Gatsby?
Porque o Gatsby escreve o site gerado em public/. Seus próprios arquivos para copiar, como favicon.ico, ficam em static/, e o Gatsby os copia para public/ durante o build.
O gatsby-plugin-image funciona numa hospedagem estática?
Sim. As imagens são redimensionadas durante o gatsby build e escritas em public/, então na hora do deploy já são arquivos simples.
Minha página 404 do Gatsby vai funcionar?
Sim. src/pages/404.js gera 404.html, e o Lobsite o serve com status 404 para qualquer endereço que não exista.