How to use Pug on Netlify?

Peter Thaleikis

Engineer. Maker. Open Source Fan. Backpacker

by Peter Thaleikis

Netlify is a powerful, yet easy to use platform to host your website. Combine this with pug and it gives you a great starting point to build and host your own website.

What is Pug?

Pug or PugJS, previously called Jade, is a JavaScript template engine. It assembles and combines your final HTML from different files and gives you a much cleaner development experience than plain HTML.

How to configure pug on Netlify?

Netlify allows you to use a number of tools when building your site. Pug isn't support out of the box but can be added and configured easily with npm. The following command installs pug, runs the compile of all pug files in the folder pug and saves the result in the folder public:

npm install pug-cli; node node_modules/pug-cli/index.js pug/ --out ./public

You will have to adjust this command to your needs to match the folders and add it to the "Build command" on your Netlify site:

Netlify configuration panel

This approach should work for any library which can be installed npm and run directly on the command line. All it requires is to find the correct file to execute.