Netlify Build Configs for Vanilla Sites

Netlify is our absolute favorite publishing tool for websites and prototypes: just create a repo, go to netlify, set your build commands and go live. We have used with with create-react-app, preact, gatsby, hexo, you name it, it works.

However, there are times when you don’t want to create a site using a framework. You just want to deploy your site as-is without any fancy bells and whistles. I am talking about the real-life single page HTML/CSS/basic javascript - type deals and landing page templates. Well netlify still wants you to specify build directory and build command. What do you do?

Well no problem! We will show you how to handle this today.

Step 1: Changes to your code base

In your source repository, move all files you want to deploy to a directory other than the root. We will call it ./app directory, but you can use any name that works for you.

In the root directory, run npm init if you have not done so already to create package.json.

In package.json, add a script called build. Below is an example:

"scripts": {
  "build": "echo \"OK\" && exit 0",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Step 2: on Netlify

Create a new project from your repository.

Configure your “build” settings. As your build command use npm run build. Publish directory is the directory you created earlier in step 1, with all the files you want to deploy.

Here is an example configuration:

Step 3: Run build

Queue a build manually or commit a change to your repository to trigger a build. Then navigate to your freshly launched website to see the end result.

---

That is it! Happy Coding.