How to deploy pure html to Octopress? - github-pages

Question

I am using Octopress to write posts, which uses markdown file to generate html files, using :
rake new_post['my_post']
rake generate
But what if I need to add some JavaScript demo inside my post, which I need to write some code inside the post, which may possibly be a html page I am writing as.
Can I achieve this with Octopress and remain overall consistency of style?

Answer 1

You can put your Javascript block into its own HTML file, in your source/_includes/ directory. Then you can embed that into your post using Liquid include tags:
---
layout: post
title: "JS Demo"
date: 2015-01-01 01:01:01
categories:
---
{% include myjs.html %}
and the contents of myjs.html would be:
<div id="myelement"></div>
<script>
$('div#myelement').text("hello world");
</script>
and myjs.html would be at source/_includes/myjs.html. Then your final page source code would (for example) render as:
<div><h1>JS Demo</h1></div>
<div id="myelement">hello world</div>
If you want to structure the Javascript code you're including a bit more, you can make a directory for Javascript files in (e.g.) source/_includes/demo/, then put your Javascript into source/_includes/demo.html. Then your markdown would have the following Liquid include tags:
{% include demo/demo.html %}