Client-rendered, one-URL, dynamic, static site.
My vacations end tomorrow. So, the time to spend hacking fun, personal, free stuff is going to be limited because of the time spent coding fun, free stuff for money. So, I decided to finish with a bit of whimsy.
I implemented a completely client-rendered, one-URL, dynamic blog. Which is actually totally static.
In fact, that blog is this blog, just with a twist. If you go to this URL you will see what's basically this very site, with comments and everything as usual. But if you click on "Previous Post" ... well, it stays in the same page, even though it displays a different post :-)
The magic is the new, experimental, dynamic task_mustache plugin for my static site generator, Nikola. which does the following:
Renders post data as JSON files instead of HTML
Creates a HTML file that is really a mustache.js template
Creates a HTML file with some bits of Javascript that loads the template and the newest post's data.
If you access that mustache.html with a fragment, it uses that to fetch JSON data and rewrite itself.
And that's it. It actually loads fast, and regenerates very fast, since it does much less than the real site. There are a bunch of things that will dump you out of the "dynamic" site, like tag links, and whatever, but it works surprisingly well (and if you want to theme it, it's just one template).
This is the first of a new kind of thing for Nikola, the "extra plugins". Basically, stuff
that is too weird, specific or useless for the general distro, will go there, and to use those
plugins, you have to create a plugins/
folder in your site and add it there manually.
Enjoy!
This is not good. First of, you should use hashbang to get Google to index it (eg. mustache.html#!posts/…). Second of, those URLs are not pretty nor useful. I don’t have anything against using JS and Ajax this way: http://kwpolska.tk/projects/ or https://github.com/Kwpolska... — try clicking the top links (the links in the middle box lead to the pages without Ajax and the whole thing breaks up horribly there) on the not-updated-since-EVER project page or going through the repository structure and observe how it changes.
Thanks for the tip about #! (had no idea)
The only difference I see between these URLs and yours is the "#" in the middle, why are they not pretty and/or not useful?
My implementation works just fine without JS. Yours doesn’t.
Good point. Does it require any server-side configuration?
Well, quite a bit, maybe, I don’t know. Here is how it works for me (http://kwcdn.tk/js/projects.js ):
1. There are two directories: /projects/ and /projects/projects-nil. /projects/ contains nice, full HTML pages with layout and such, while -nil contains just the HTML of the project itself. Names to display in the top bar and the title bar in the JS, for some weird reason.
2. When the link is clicked, it is supposed to get you to the /projects/ directories and not /projects/projects-nil/. But, if you have JS enabled, it doesn’t. When you click on a link, JS does all its Ajax magic, changes the title and does something else. What does it do, may you ask? Find out yourself. Hint: click the Back button next time you will be playing around on my Projects page (or the GitHub tree).
I'll check it out in my next vacation ;-)