jroberayalas jroberayalas - 4 months ago 36
HTML Question

How to include an Rmarkdown/HTML file in Jekyll post

I'm working on a static website made with Jekyll and hosted on GitHub. One of the post looks like this

Normal view of the site

Also, I created an Rmarkdown file, and I want to embed the resulting html file into the post. I read here that I only needed to do this:


You just have to create a folder with the name _includes/ in the DocumentRoot of your project, then, create an HTML file inside, for example "mycomponent.html" and call it in your post with something like this:

{% include mycomponent.html %}



I added my html file in the _includes/ folder and added such piece of code at the end of the markdown file for the corresponding post. However, when I do that, the website layout changes completely

Undesired look of the site

Is there I way I can avoid this? All the files of the website are store here.

EDIT:

I found another question where it is suggested to do this:


In my opinion the best solution is:

Using jQuery:

a.html:

<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>


b.html:

<p> This is my include file </p>



I do not understand it completely. Somehow the layout of the site is recovered, but now some images and htmlwidgets are lost. Also, the footer of the page is completely messed up.

Another undesired look of the site

Answer

I found out that it is not necessary to embed an html inside another. Using R, an Rmd file with the post can be created which then is transformed into the required md file. Jason Fisher's website explains it nicely with step-by-step instructions. His GitHub site has also useful information.

Another useful site is the one by Juuso Parkkinen. He is the person that told me that he's never embed an html into another and only used R directly to create his Jekyll website by using the following code:

# compiles all .Rmd files in _R directory into .md files in _posts directory,
# if the input file is older than the output file.

# run ./knitpages.R to update all knitr files that need to be updated.

KnitPost <- function(input, outfile, base.url="/") {
  # this function is a modified version of an example here:
  # http://jfisher-usgs.github.com/r/2012/07/03/knitr-jekyll/
  require(knitr);
  opts_knit$set(base.url = base.url)
  fig.path <- paste0("blog/figs/", sub(".Rmd$", "", basename(input)), "/")
  opts_chunk$set(fig.path = fig.path)
  opts_chunk$set(fig.cap = "testing")
  render_jekyll()
  knit(input, outfile, envir = parent.frame())
}

for (infile in list.files("blog/_R", pattern="*.Rmd", full.names=TRUE)) {
  outfile = paste0("blog/_posts/", sub(".Rmd$", ".md", basename(infile)))

  # knit only if the input file is the last one modified
  if (!file.exists(outfile) | file.info(infile)$mtime > file.info(outfile)$mtime) {
    KnitPost(infile, outfile)
  }
}

His GitHub account is a useful reference as well.