Mithat Konar (the wiki)

This is an old revision of the document!

Creating web pages

In this section, we will use Jade to build a simple but complete web page. It will serve as an introduction to some fundamental Jade language concepts.

myPage.jade

doctype html
html
    head
        title A Simple Site
    body
        h1 Hello there!
        p Nice to meet you.

buildMyPage.js

var jade = require('jade');
var fs = require('fs');
 
options = {
    pretty: true
};
 
// Render an HTML page from a file written in Jade.
var html = jade.renderFile('myPage.jade', options, function(err, html) {
        if (err) {
           throw(err);
        }
        return html;
    });
 
// Write HTML to a file.
fs.writeFile('myPage.html', html, function(err) {
    if (err) {
        throw(err);
    }
});

output:

$ cat myPage.html 
<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Site</title>
  </head>
  <body>
    <h1>Hello there!</h1>
    <p>Nice to meet you.</p>
  </body>
</html>

The basic idea is that Jade uses a shorthand HTML syntax where indentation is used to nest elements.

This should be enough to make you comfortable reading the Jade Language Reference, after which you should be able to compose entire web pages in Jade.