Ember Template Not showing in page

I'm trying to create a simple blog with Ember. I'm following this tutorial http://ift.tt/2gReaWR

I've created a model and generated a template.bhs and component.js for 'create-new-post'. I've created a route for 'posts' and also 'posts/new'. However, when loading 'app.com/posts/new' in the browser, I don't see the content from new.hbsI just see my header and footer as per application.hbs.

No doubt I'm missing something very basic here.

templates/posts/new.hbs

components/create-new-post/template.hbs

<h3>Create a new post</h3> <form>   <p>

   </p>   <p>
   </p>   <p>
<span >Publish</span>   </p> </form>

routes/new.js

import Ember from 'ember';

export default Ember.Route.extend({
});

models/post.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  snippet: DS.attr('string'),
  createdDate: DS.attr('date'),
  text: DS.attr('string')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

export default Router;