Running two build commands sequentially in Build configurations

I’m deployng my Eleventy 11ty static website with Framework presets (Build command: eleventy) and everything works fine.

Now, I would need to build a static search library AFTER Eleventy is built, and so to build its index by downloading its binary: pagefind --source "_site" --serve

My question is: how to build Eleventy first and then - consequently, after Eleventy is built - to build the static search library?

I am thinking to create in my package.json:

{
  "scripts": {
    "build": "npx @11ty/eleventy",
    "postbuild": "npx pagefind --source _site"
  }
}

and then in Build configurations to configure the Build command manually like this:

npm run build && npm run postbuild

Cloudflare Pages will respect my package.json and will run my custom build command consequently (build and then postbuild)?

Or better not to specify anything in my package.json and just manually add in Build configurations:

npx @11ty/eleventy && npx pagefind --source _site

Yep :slight_smile:

This will work and what I’d recommend too

2 Likes

Thank you!

For cleaner code I would recommend to create another script entry, that combines both and therefore makes the command you have to use (at pages) more simple and you then can control it from your code and don’t have to log into the dashboard.

I would have done it like:

{
  "scripts": {
    "all": "npm run build && npm run postbuild",
    "build": "npx @11ty/eleventy",
    "postbuild": "npx pagefind --source _site"
  }
}

then your command would be as short as: “npm run all”. Should work as well.
I use it like this with yarn.

Whenever you now want to add some script to also be executed, just append it to the “all” script with a leading &&.

You can also try to remove the “run” command as I think it is default, so the command could be “npm all”, but you will have to test/try this first, as I could be wrong.

But if you like it very simple you also can just merge them into the “build” script by default:

{
  "scripts": {
    "build": "npx @11ty/eleventy && npx pagefind --source _site"
  }
}

I would not recommend it hardcoded, but with references to all the modular scripts.

1 Like

Thanks! I will give it a try.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.