hey Jill, let me try and walk through this with you!
So the big mismatch that’s preventing this from working is understanding how netlify’s build environment and the requirements of your project fit together.
Here is a simplified run through of what we do to build your site!
After you push to github, we clone your repo and one of the first things we (netlify’s robots) do is take a look at your
package.json file to see which dependencies (packages) are listed there for your project to be built and run successfully. The
package.json also contains a listing of commands that looks a bit like this (may vary, more on that in a sec)
"dev": "run-s clean && run-s lint:* && run-s dev:*",
"dev:hugo": "hugo -d ../dist -s site --buildDrafts --buildFuture",
"dev:postcss": "postcss src/css/*.css -d dist",
"dev:webpack": "webpack --config webpack.config.js --mode development",
"build": "run-s build-branch",
"upload-index": "node upload-index.js",
[... and so on...]
the above is just an example, everyone’s looks a bit different depending on the unique requirements of your project. What they all have in common though is that in this scripts section, you can see a key/value pair of a name: command.
Basically, if you tell us to run “build” in the above example, we will actually execute “run-s build-branch”. We do this so that as the requirements of projects change, the actually-executed-build-command can change but the instruction “build” doesn’t have to.
Why is this beneficial? Well, because the command build is actually something you have to write in the UI:
And they have to match. We do this in order to make our build system as flexible as possible for basically any static site generator or build pipeline or even sites that don’t use either.
Would the above build settings work with the package.json snippet i pasted in above? No - there is no build command defined here and my site needs one. If i wrote “toaster” in the build command settings, would it work? No - it needs to match what is defined in the package.json, in this case it is: “npm run build”. You can read that line as follows:
“Run the command called build?”
“Sure! I know how to do that as it is defined in my
and then it goes and does it.
Now, in order to actually find the right files, sometimes we need to play around with the publish and the base directory.
The base is indeed the base, so, if your
package.json isn’t at root level, we’ll need to switch into the directory that contains it, first. Then we run the stuff, and if we are building something, we’ll output it into the publish dir. If both are blank, well, then we just work from the project root which is whatever is living in the most top level of the git repo you have connected.
Sometimes we don’t build anything - that’s another reason why the build dir might be blank (and there may be no
package.json etc). Why is that? Well, not everyone is creating a site that needs building at deploy time - static sites that are just html for example. And our build system is flexible enough to cater to that too.
So, in short: your command for building needs to be whatever is written in your package.json, and whatever that is needs to be suitable for the kind of project you are trying to build. This is why there isn’t a “just write this” catch all answer for every person.
Can you post your package.json and a screenshot of your build settings and we can try and figure out what these commands need to be if you can’t get it to work after reading this?