Now in order to create our very first template, what we'd like to do is make a directory in the project called views. The views is the default directory that Express uses for your templates. So what we'll do is add the views directory and then we'll add a template inside it. We'll make a template for our About Page.
Inside views, we'll add a new file and the file name will be about.hbs. The hbs handlebars extension is important. Make sure to include it.
Now Atom already knows how to parse hbs files. At the bottom of the about.hbs file, where it shows the current language it's using, HTML in parentheses mustache.
What we'll do to get started though is take the contents of help.html and copy it directly. Let's copy this file so we don't have to rewrite that boilerplate, and we'll paste it right in the about.hbs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Help Page</title>
</head>
<body>
<h1>Help Page</h1>
<p>Some text here</p>
</body>
</html>
Now we can try to render this page. We'll change the h1 tag from help page to about page:
<body>
<h1>About Page</h1>
<p>Some text here</p>
</body>
We'll talk about how to dynamically render stuff inside this page later. Before that we'd like to just get this rendering.