Leave the link as blog/article.html...that's fine.
However, apply a global event listener to all internal links on your site. The following is an EXAMPLE only:
e.preventDefault(); //stop the clicking of the link from processing
var page = this.href;
document.location.hash = '/'+page; //example.com/#/blog/article.html
page + '#content',
//replace your content with the value of r
In the above code, you're going to have to look up jQuery's load function if you don't understand it.
Now, the type of system you would like to develop is not a simple feat unless you've got a strong background in JS (not just jQuery) because you've got to understand what everything is doing.
If you are trying to piece this type of application together from snippets (like the one above), I'd advise you not to, as it can get quite complex.
The best thing you can start with is the concept. You said you've got the concept so that's a big hurdle done...after that, just look up what code you'll need to execute your process.