Folder Based Navigation w/ Handlebar for Static Blog

Ashish Panchal
Dec 26, 2017 · 2 min read
Permalink

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 - http://ashishuideveloper.in/2017/12/folder-based-navigation-handlebar-static-blog/

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

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: {
options: {
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.


Originally published at ashishuideveloper.in on December 26, 2017.

Ashish Panchal

Written by

Front-end developer and Blogger. Love to learn and share my knowledge; Follow me on my tech blog — http://ashishuideveloper.in

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade