Folder Based Navigation w/ Handlebar for Static Blog

Ever wondered how to omit the file name part from the URL or how to have folder base navigation while making a micro/static site?

Example -

To do this we will have to create a folder name same as the file and then create a index.html or default.html file in it. But it is a boring process to create folder with the same name of the file and then create index file in each folder.

I am assuming your familiar with grunt and handlebars.


grunt-assemble-permalinks‘ is a plugin for Grunt which helps to create folder based navigation, please see below the code which create a folder name from a file’s name and rename the file’s name to index.html

assemble: {
                plugins: ['grunt-assemble-permalinks'], // This is the plugin to use for folder structure navigation
                assets: 'siteware',
                data: ['source/data/**/*.json'],
                layoutdir: 'source/templates/layouts',
                flatten: true,
                layout: 'default.hbs',
                partials: 'source/templates/modules/*.hbs',
                permalinks: {
                      structure: ':year/:month/:basename/index.html',
            page: {
                options: {
                    layout: 'pages.hbs'
		expand: true,
		cwd: 'source/templates/pages',
                src: ['**/*.hbs'],
                dest: 'source/'

Value of Structure in the permalinks objects do the magic and create a path as we need.

  • :year – will get the current year
  • :month – will get the current month
  • :basename – will get the .hbs file name and create a folder with the name and rename the .hbs file with index and copy it in the folder.

We can add/remove or manipulate the value to get the desired structure and the plugin will work as required.

I have created a simple handlebar structure to get the folder based navigation and uploaded it to bitbucket. Feel free to fork or download and use it.

I have used Grunt Task Manager for this sample but you can use gulp or yeoman as well and use the grunt-assemble-permalinks plugin to create your own desired permalinks.

Hope this helps!
Do let me know what you think about this article in comment box below.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.