Skip to content
A Jekyll plugin for single page websites.
JavaScript Ruby
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


A simple Jekyll plugin to make content load dynamically using pagify.js.


Pagify.js is a great jQuery plugin to make simple one-page websites, with content loading dynamically. The only problem with it is that you have to define every page you want to load manually. This is fine for a static page, but it get's in the way when you're hosting a website with regularly updated content. This plugin aims to solve that.

It generates a JSON file of all your pages, which you can pass to pagify.js.



Place "singlepage-jekyll.rb" in _plugins, "root" in _includes, and jquery-min.js and pagify.js in your website root. Install ruby-json:

gem install json


Create a layout in _layouts, such as default.html. Load Pagify and jQuery:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="pagify.js" type="text/javascript"></script>

Then go on and add the following:

{% include root %}
{{ content }}

Create a page with the layout default. Create a div that will contain page content:

<div id='page_holder' />

Call pagify on the aforementioned div and pass in options. The only required option is pages.

$.getJSON('html.json', function(data) {
       pages: data, 
       default: 'home'

Link to other pages by linking to hashes of their page names:

<a href='#contact'>Contact</a>
<a href='#about'>About</a>

Or like this:

{% for post in site.posts %}
<a href="#{{ }}">{{ post.title }}</a>
{% endfor %}

All the pages you want to call don't need a layout, as their content will just be loaded within a div on the page. To learn more about the options of pagify.js, check out it's Github page.

Everything else

This is just a first version. Feel free to improve and send a pull request.

Made by Jacob Klapwijk.

MIT licensed.

You can’t perform that action at this time.