pug.js tutorial | Chapter 3 | How to run pug files

Overview

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 :

The extension of pug files is .pug .
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.
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  
html(lang='en')  
 head
   title Nodejsera Pug tutorial series
 body
   h1 Hello World

Run

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"> 
	<head>
		<title>Nodejsera Pug tutorial series</title>
	</head>
	<body>
		<h1>Hello World</h1>
	</body>
</html>

Screenshot

The screenshot of the above code is as follows :

What we learned

Repository

Get it from :

Pug.js tutorial : How to run a pug file

Inside this article!