Tutorial: Host a Gatsby Site on Filebase

Build the Gatsby Output

Gatsby already produces a static site at build time, which makes it a straightforward fit for Filebase. The deployable output lives in public/.

Build the Project

From your project root:

gatsby build

Or, if your package.json script is build:

npm run build

Gatsby writes the static site to public/, including index.html, page-data/, and other static assets.

Upload the Contents of public/

In Filebase, create a bucket and upload the contents of public/. The bucket root should contain index.html and Gatsby’s asset folders directly.

Do not upload the public directory itself. Filebase needs the built files at the root of the bucket.

Keep only the built site files in that bucket. After the upload, copy the bucket CID from the bucket storing those files. You will use that bucket CID when you create the site.

Create the Site

Open Sites in the dashboard and create a new site, then paste in the bucket CID you copied from the bucket storing the site files. Filebase will use that CID as the site’s content source.

Other Frameworks

We also have framework-specific guides for Vite, Next.js, Remix, Astro, and Docusaurus.