How to do it...

1. In workspace/app, add a new folder and call it partial:

      cd && cd worspace/app && mkdir partial

1. Add _nav.ejs to the partial folder--touch partial/_nav.ejs.
2. Open the app/index.html and cut all the code starting with <nav> and ending with </nav> (the whole navbar). Paste the code into the _nav.ejs file.
3. In index.html, right where you cut out the <nav> element, paste this include:

      <%- partial("partial/_nav") %>

1. Make a new file, _data.json, in workspace/app:

      touch _data.json

1. Paste the following code into it:

      { 
         "index": { 
            "title": "Welcome to Our Homepage" 
         },
         "about": {
            "title": "About Us"
         }
      }

1. Now, let's copy and rename index.html to _layout.ejs:

      cp index.html _layout.ejs

1. C9 into index.html and delete everything except the div with the class of container, that is, keep only the following code in index.html:

      <div class="container">

        <div class="starter-template">
          <h1>Bootstrap 4 Grid Recipe</h1>
          <p class="lead">Use this document to quickly start any new 
          project.
          <br> All you get is this text and a barebones HTML document. 
         </p>
        </div>

      </div><!-- /.container --> 

1. Change the file extension of index.html to index.ejs:

      mv index.html index.ejs

1. In _layout.ejs, add the title of the current page:

      <title><%- title %></title>

1. Also, delete everything under the _nav partial include, all the way up to the comment <!-- Bootstrap core JavaScript ... and place just this one line there:

      <%- yield %>

1. Run the harp compile and harp server commands to verify that everything still works.

In this recipe, we have split our code into includes, making it a lot easier to work with. In the following recipes, we will deal with layouts.