Using Jade instad of HTML

A way to write reusable HTML code

If you want to simultaneously:

• write your website in HTML
• not have to edit each file again every week if you update your site-wide navigation bar
• include one HTML file inside another

Strictly speaking, you don't use HTML, you use a templating language that is what HTML ought to be, and that compiles into HTML. There are a few of these; I recommend Jade. Ben and I just converted our HTM websites into Jade in half an hour and everything works perfectly. Now we can refactor common code snippets into their own files, like page headers.

The Jade homepage shows side-by-side Jade and HTML. It's easier to read than HTML for similar levels of familiarity, and it has less junk in the way. Also importantly, it is very fast to convert your current .html files into .jade files - there's an html-to-jade converter.

To set everything up:

• Install npm if you don't have it already. (NPM is the node package manager, used for installing node.js packages. Jade is a Node package. You can google search for instructions on installing node; it depends on your operating system.)
• Install Jade with the command "npm install jade --global"
• Type "jade" at the command line - if you get errors, troubleshoot them. Ben had a linker issue on Ubuntu, but it was a quick fix.
• Store a jade file as "yourFile.jade". Compile it with the command "jade -P yourFile.jade" - it will produce "yourFile.html".
• Once you confirm that everything works, convert your html files to jade files with.
• Compile all your files back into html. They'll have different indentation probably, but that's all that will be different.[1] Either store your jade files at another location, or add ".jade" to the file "section.Harvard/.git/info/exclude", or whatever your appropriate section is, to tell git to ignore them.
• Whenever you edit your jade files, recompile them to update your html files. Or better yet, tell jade to watch for changes and automatically recompile them - "jade -w" will do this for you.

You now have the power of jade. You can use it as simply html-with-better-syntax if you like, but you can also refactor commonly-used code into separate jade files and include each file in all the other files that use it. There are quite a few features if you want them, check out the Jade reference. The "includes" and "mixins" sections are the ones I'm most excited for.

[1] If you have any <pre> tags in your code, the html2jade converter seems to handle those imperfectly, so check those manually. Jade handles it correctly though, so you'll only have to fix it when you first convert your existing files into jade.