Type up the following in your index.pug.ĭoctype htmlhtmlheadbodyh1#title Lets get pugging!p I'm a paragraphp.I'm a multi-line paragraph!And this is the second line.p.para.This paragraph has class!.firstDiv A div with a class.#secondDiv A div with an id. Lets get started on a basic HTML structure. Note: Once you’ve executed this command, keep your terminal running to continue the auto-compile! The Basics P will make our HTML source code pretty printed, with indentation, line-breaks, etc. o ./html will set the output folder to html. The -w flag will watch our pug file for changes and re-compile automatically each time we save./ will watch everything in the current directory. When working on a larger project, you might want to use a more specific compile command, such as: It will of course convert to HTML as follows: We should now see our index.html generated in the root directory. Lets test this out! Add the following text to our file as follows:Īnd lets compile it to HTML with the following command: Now in our root directory, create a file called index.pug. We install globally with -g as we’ll need access to Pug commands from terminal. To install pug run the following command from your terminal: Note: You’ll need NodeJS installed! Go ahead and install if you haven’t already. Additionally, the compiler will throw errors if we have any mistakes in our code – which makes for convenient error prevention.

index.html Pug demo Welcome to Pug Life I'm a p that needs to be contained! īy comparison our pug code is much more concise.

Note the use of indentation to nest our HTML as we require. index.pugĭoctype html html(lang='en') head title Pug demo body h1 Welcome to Pug Life div.container p I'm a p that needs to be contained! Lets take a peek at some Pug syntax & compare it to regular HTML.

The syntax is arguably a lot cleaner to read and it can be a real time-saver when working with a lot of HTML (especially frameworks such as Bootstrap, Foundation, etc). It also adds a ton of functionality, such as Javascript objects, conditionals, loops, mixins and templates. Pug (formerly known as Jade) is a preprocessor which simplifies the task of writing HTML.

Pug template define attributes