Search code examples
github-pagesoctopress

How to deploy pure html to Octopress?

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?

Solution

  • 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 %}