Netlify.com Homepage Netlify Docs

Contact

Common configurations

This page describes commonly used build settings and other configuration tips for several popular build tools and project architectures. Your particular settings may be different.

For more build configuration advice and to ask questions of your own, visit our Community forum.

JavaScript SPAs

Most JavaScript single-page apps (SPAs) declare a build command in the scripts array of the project's package.json file. To run this script in Netlify, set the Build command to npm run {YOUR_BUILD_SCRIPT} or yarn {YOUR_BUILD_SCRIPT}, depending on your chosen JavaScript dependency manager.

The Publish directory for single-page apps is often called dist, but varies by framework and build tool. You can check the framework documentation, or try running the build script locally, then check to see what folder was created as a result.

Avoid 404s

If your app uses history pushstate to get clean URLs, you must add a rewrite rule to serve the index.html file no matter what URL the browser requests.

Monorepos

If you work with a codebase that works as a monorepo, you can bring those workflows to Netlify. Netlify provides the ability to set up sites pointing to a specific base directory in your repository or code base. When you configure a base directory, either in the Netlify UI or a Netlify configuration file, Netlify will consider the base directory as the primary or root directory and build your site from this directory.

When a base directory is specified along with build.ignore in netlify.toml, Netlify will execute the command you specify from that same base directory as well.

For sites created before October 3rd, 2019

If you would like to use this feature for a site that was created before October 3rd, 2019, you'll need to re-link your repository to make this feature available for your site.

Gatsby

The Gatsby docs include instructions for deploying Gatsby to Netlify. The typical build settings are as follows:

  • Build command: gatsby build
  • Publish directory: public

Gatsby environment variables

Any environment variables prefixed with GATSBY_ will be processed by Gatsby and made available in the browser for client-side JavaScript access. Visit the Gatsby docs about environment variables for more information.

Next.js

Netlify's buildbot can build and export Next.js apps for deployment to our CDN. Visit our Community forum for more on deploying Next.js to Netlify. The typical build settings are as follows:

  • Build command: next build && next export
  • Publish directory: out

Hugo

The Hugo docs include instructions for deploying Hugo to Netlify. The typical build settings are as follows:

  • Build command: hugo
  • Publish directory: public

By default we’ll use the Hugo version that is preinstalled in your site's initial build image. You can change this by setting a HUGO_VERSION environment variable to the version string for any released version after 0.19. (For version 0.19 or older, instead append the version number to the build command, e.g. hugo_0.19.)

Failed build?

If you are getting an error with exit code: 255 when building a Hugo website, try setting HUGO_VERSION to the version you are using locally.

If you would like to use the Sass compilation features available in Hugo versions 0.43 and above (using the "extended" version of the binaries), you can use the new build image selection setting (currently in beta) to select the Ubuntu Xenial 16.04 image, which supports all Hugo versions.

Jekyll

If your site is built with Jekyll, make sure you have a Gemfile and a Gemfile.lock checked into your repository, specifying the Jekyll version you want to use. The typical build settings are as follows:

  • Build command: jekyll build
  • Publish directory: _site

Hexo

The Hexo docs include instructions for deploying Hexo to Netlify. The typical build settings are as follows:

  • Build command: hexo generate
  • Publish directory: public

VuePress

The VuePress docs include instructions for deploying VuePress to Netlify. The typical build settings are as follows:

  • Build command: npm run docs:build or yarn docs:build
  • Publish directory: docs/.vuepress/dist

MkDocs

If you're using MkDocs, make sure to specify the dependency in a requirements.txt file with mkdocs>=0.9.0. The typical build settings are as follows:

  • Build command: mkdocs build
  • Publish directory: site

Middleman

If your site is built with Middleman, make sure you have a Gemfile and a Gemfile.lock checked into your repository, specifying the Middleman version you want to use. The typical build settings are as follows:

  • Build command: middleman build
  • Publish directory: build

Grunt

We automatically provide Grunt for you in the build environment in case your build command references it. We’ll run npm install grunt-cli for you before running your build command, in case your build command contains the string grunt. The typical build settings are as follows:

  • Build command: grunt build
  • Publish directory: dist