# Gatsby hosting

Host a Gatsby site: gatsby build writes public/, and npx lobsite deploys it, uploading only the files that changed. HTTPS, forms and rollbacks included.

On the web at https://lobsite.com/hosting/gatsby

```sh
npx gatsby build && npx lobsite
```

Gatsby builds into public/, and npx lobsite finds it and deploys it.

Gatsby builds your site into plain files in `public/`: HTML for every page, plus the JavaScript that makes navigation fast. Since Gatsby Cloud closed in 2023, many Gatsby sites have needed a new home. Lobsite hosts the built folder: run `gatsby build`, then `npx lobsite`, and the site is live at a `*.lobsite.app` address with HTTPS.

## How it works

1. **Build the site** with `npx gatsby build` (or `npm run build`). Gatsby writes it to `public/`.
2. **Run `npx lobsite`** in the project. It finds `public/` and deploys it; in a Gatsby project that's the build output, while your own static files live in `static/`. The first deploy needs no account and lasts 6 hours.
3. **Keep it** with the claim link, in a free account. After that, the same two commands update the same address.

## gatsby-config settings

```js
// gatsby-config.js
module.exports = {
  siteMetadata: { siteUrl: "https://my-site.lobsite.app" },
};
```

- **`siteMetadata.siteUrl`** is your full address. `gatsby-plugin-sitemap`, canonical links and feeds read it.
- **`pathPrefix`** isn't needed: the site is served from the top of its address. If you set it for GitHub Pages, build without `--prefix-paths`.
- **`gatsby clean`** clears the cache and `public/`. Run it if a deploy shows pages you've removed.

## What needs Gatsby's server features

Static pages, `gatsby-plugin-image` and data from GraphQL all work, because they're resolved during `gatsby build`. Three features need a server and don't run on Lobsite: Gatsby Functions (`src/api`), server-side rendering with `getServerData`, and Deferred Static Generation. Replace a function that handles a contact form with a form that posts to `/_lobsite/forms/contact`; see [forms](https://lobsite.com/features/forms). Redirects made with `createRedirect` need a host plugin; on Lobsite, put them in `lobsite.toml` instead, with the [Redirect Generator](https://lobsite.com/tools/redirect-generator).

## Gatsby hosts compared

| | Lobsite | Netlify | GitHub Pages |
|---|---|---|---|
| Static Gatsby sites | Yes | Yes | Yes |
| Functions, SSR, DSG | No | Yes | No |
| Builds on the server | No: you deploy `public/` | Yes | In GitHub Actions |
| Only changed files upload | Yes | Yes | Through Git |
| Account before the first deploy | No: live 6 hours, then keep it free | Yes | Yes, and a repository |
| Forms without a backend | Yes, once the site is in an account | Yes | No |
| Custom domain | Yes, free | Yes | Yes |

Netlify, which took over Gatsby in 2023, runs its server features too. For a Gatsby site that's static, as most are, Lobsite deploys the built folder in one command, and Gatsby's hashed file names mean a rebuild uploads only the files that actually changed.

## Frequently asked questions

### Where can I host a Gatsby site now that Gatsby Cloud is gone?

Any static host serves a built Gatsby site. On Lobsite, run `gatsby build` and `npx lobsite`; the first deploy needs no account.

### Why does npx lobsite deploy public/ for Gatsby?

Because Gatsby writes the built site to `public/`. Your own files to copy, such as `favicon.ico`, go in `static/`, and Gatsby copies them into `public/` during the build.

### Does gatsby-plugin-image work on a static host?

Yes. Images are resized during `gatsby build` and written to `public/`, so they're plain files by the time you deploy.

### Will my Gatsby 404 page work?

Yes. `src/pages/404.js` builds `404.html`, and Lobsite serves it with a 404 status for any address that doesn't exist.