Pug Tutorial Series

Pug.js tutorial : How to run a pug file

Pug tutorial series pugjs tutorial introduction


In this part of the pug tutorial series we will learn how to run pug files.

Basics of Pug files

Some basics of pug files include the following :

  1. The extension of pug files is .pug .
  2. We don't need to write the angle brackets for e.g. we can write p in pug in place of <p> tag in html.
  3. Closing tags as we see in HTML can be avoided while using pug.

Hello World in Pug

Let see how the code snippet for hello world program will look like in pug.

doctype html  
   title Nodejsera Pug tutorial series
   h1 Hello World


We can run the above code using the following command in your file directory:

>pug hello-world.pug

  rendered hello-world.html

On execution of the above command , the pug code will get transformed into the html code and is saved with the same name but .html extension. The corresponsding HTML files will be created right next to the pug one.
The contents of the html file obtained is shown below :
<!-- Name of the File : hello-world.html -->
<!DOCTYPE html >
<html lang="en"> 
		<title>Nodejsera Pug tutorial series</title>
		<h1>Hello World</h1>


The screenshot of the above code is as follows :

What we learned


Get it from :