this is my jekyll with hash routing setup/strategy - is there a better way?

Question

I've been trying figure out how to get a static website generator with built-in hash routing solution. I guess I could only describe it as a poor mans 'client side javascript framework with routing that works locally with out a server'.

My main goal is to avoid pages from being reloaded unnecessarily. While some pages would be refreshed, my hope is that the majority would not. Additionally, I still wanted to maintain page markup via markdown formatted pages.

I tried to do this with pure client side javascript and templates, but couldnt get any frameworks to parse markdown for me.

This is my hacked up solution perhaps some of you have a setup that works better or more elegant. Perhaps using Jekyll plus another routing framework like angular?

Note: I created a layout named 'empty' for hash routed pages because if the doctype, head, etc are duplicated then the pages will not load.

Problem: Files in other directories that load images - These files load images from their own directory, but when called via pagify.js to another directory their links are all broken

Jekyll + Pagify.js with Liquid include 'root' for relative urls (thanks to kikito):

root include:

{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}

load scripts:

<script type="text/javascript" src="{{ root }}/js/jquery.js"></script>

<script type="text/javascript" src="{{ root }}/js/pagify.js"></script>

setup core html:

{% include root %}

<h1>Pagify.js<small>A jQuery plugin for single page web sites</small></h1>
<nav>
  <a href='{{ root }}#about'>About</a>
  <a href='{{ root }}#usage'>Usage</a>
  <a href='{{ root }}#options'>Options</a>
  <a href='{{ root }}#gallery'>Gallery</a>
  <a href='{{ root }}#Showcase/VM'>Showcase</a>
</nav>

load script from pagify.js at end of core html:

<script>
$(document).ready(function() {
  $('#page_holder').pagify({
    pages: [
    'about', 
    'usage', 
    'options',
    'gallery',
    'Showcase/VM'     
    ],
    animation: 'fadeIn',
    'default': 'about',
    cache: true
  });
});

sample YAML heading from a hash routed page:

---
layout: empty
title : about
root: .\
---
{% include root %}

this is what the layout named 'empty.html' looks like:

{% include root %}

<div class="page-header">
  <h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1>
</div>



{{ content }}

HankSmackHood HankSmackHood · Accepted Answer · 2012-04-12T14:12:07

I created a Jekyll plugin to ease this process a bit. It takes away the need to manually specify all the pages you want to link to. Let me know what you think of it.

this is my jekyll with hash routing setup/strategy - is there a better way?

1 Answers