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:
Can I use any NPM/Yarn libraries on Netlify?
Without having tried all, this approach should work for any library that can be installed via npm or yarn and runs directly on the command line.
All it requires is to find the correct build command to run. If you are running a particular development command on your command line (for example npm run dev, npm run watch, yarn watch, etc.) there is a good chance this works as well. Unless it's a globally installed package. For these, you will find the file to execute in the node_modules folder.
Closing thoughts
Even if you are a developer and "used to code", Pug can make your site easier and faster to maintain. Written content is a different type of information and should be somewhat separated from code - same as you don't write your CSS or JavaScript inline you should avoid it for the actual content as well.
Did you like this article?
Besides tones of crap, the web also has lots interesting open-source libraries, actually innovative side-projects and awesome free knowledge. Once in a while, I share these awesome web-findings via email. If this sounds like something you are into, subscribe below:
Published under the following tags: JAMStack JavaScript PugJS