Skip to main content

Deploying to Heroku

You can use the heroku buildpack static to handle the static files of your site.

Set the heroku/node.js and heroku-buildpack-static buildpacks on your application.

$ heroku buildpacks:set heroku/nodejs
$ heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git

You can optionally add the buildpacks to app.json if you want to take advantage of the heroku platform api

app.json
{
"buildpacks": [
{
"url": "heroku/nodejs"
},
{
"url": "https://github.com/heroku/heroku-buildpack-static"
}
]
}

Heroku will automatically detect and run the build script from your package.json which should already look like this:

package.json
{
"scripts": {
"build": "gatsby build"
}
}

Finally, add a static.json file in the root of your project to define the directory where your static assets will be. You can check all the options for this file in the heroku-buildpack-static configuration.

The following configuration will give you a good start point in line with Gatsby’s suggested approach to caching.

static.json
{
"root": "public/",
"headers": {
"/**": {
"Cache-Control": "public, max-age=0, must-revalidate"
},
"/**.css": {
"Cache-Control": "public, max-age=31536000, immutable"
},
"/**.js": {
"Cache-Control": "public, max-age=31536000, immutable"
},
"/static/**": {
"Cache-Control": "public, max-age=31536000, immutable"
},
"/icons/*.png": {
"Cache-Control": "public, max-age=31536000, immutable"
}
},
"https_only": true,
"error_page": "404.html"
}

Edit this page on GitHub
Docs
Tutorials
Plugins
Blog
Showcase