Differences

This shows you the differences between two versions of the page.

--- javascript:jade:getting_started [2014/03/18 03:48] – created mithat
+++ javascript:jade:getting_started [2014/03/18 03:50] – mithat
@@ Line 136: / Line 136: @@
 </code>
+===== 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.
+<file jade myPage.jade>
+doctype html
+html
+    head
+        title A Simple Site
+    body
+        h1 Hello there!
+        p Nice to meet you.
+</file>
+<file javascript 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);
+    }
+});
+</file>
+output:<code>
+$ 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>
+</code>
+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 [[http://jade-lang.com/reference/|Jade Language Reference]], after which you should be able to compose entire web pages.