htmlpreview.github.io not working on my rmarkdown files - YAML issue?

Publishing Your Results
1

Hi there,

I used to have a workflow of rendering my documents as .html from my .rmd files, while keeping the .md. This way, all three get uploaded on GitHub (pick your poison type thing).

I would then use the HTML preview (links below) to get a preview of my HTML file (as only .md is generally supported) which would match the view of my local HTML preview.

However, with the last 3 projects I tried this on, this doesn't work anymore.

Here's a project on which this worked:

  • REPO: peterhontaru/Job-Offer-Prediction-MBA-Students (github repo, won't let me add more than 2 links)

  • PREVIEW: GitHub & BitBucket HTML Preview
    (you can note the HTML type content within the R Markdown such as tabs and code folds)

Here's a project in which this did not work

To note that this repo has the code hidden now as it was displaying every chunk regardless of the code_folding: hide option. The tabs are also not displaying.

To mention that everything looks fine on my local HTML files, so something is lost in the process of uploading it over there.

My YAML settings are unchanged from the previous repos where this worked:

output:
  html_document:
          
    toc: true
    toc_float: false
    toc_depth: 3
    number_sections: true
    
    code_folding: hide
    code_download: true
    
    fig_width: 9 
    fig_height: 5
    fig_align: "center"
    
    highlight: pygments
    theme: cerulean
    
    keep_md: true
    
title: "Human Learning meets Machine Learning"
subtitle: "1,200+ hours of piano practice"
author: "by Peter Hontaru"

And below, my knitr settings

knitr::opts_chunk$set(
echo = TRUE, # show all code
tidy = FALSE, # cleaner code printing
size = "small", # smaller code

fig.path = "figures/", #graphics location
out.width = "100%",

message = FALSE,
warning = FALSE
)

Would really love some help on this issue as I could not find anything online as to why this stopped working.

2

It seems to be something related to the order in which the dependency are loading in those document. I don't know how htmlpreview service works but I guess it is calling the JS from the HTML docs

Anyway, it does not work because you get this error in the browser console

Uncaught ReferenceError: $ is not defined
    at <anonymous>:7:1
    at loadJS (htmlpreview.js:86)
    at htmlpreview.js:56

I think this means that JQuery is not loaded yet when htmlpreview.js tries to load some script.

So I am not sure where the error is. It is a tricky one. Do you know if this happens with any document ?
Did you try with the default Rmd template for example ?

As it is JS it could also come with any htmlwidget you may be using for example.

Do you happen to know the difference with rmarkdown version used to generate the two documents ?
The working one is older than the previous one ?

I'll try to have a look

Curious about the use case: is this for your own use to check sometimes the content ?
Or is it for sharing with others ?

Why not publish your document using GH pages, which made for that ?
publishing to a service like RPub specific for Rmd publishing to HTML ?

Just curious.

3

Thank you for your answer, Christophe!

As far as I can see now, there are 3 ways to do this, now just one.

htmlpreview: I used this one mainly due to a very efficient workflow. The link looks directly into the html file in my repo so it updates live with any change I make, so I loved that aspect.

I see, weird as to why that error started coming up now. I have tried it with three of my recent (last month or so) repos and it fails with all of them. The projects that it does still work with, are all from 3+ months ago. I also tried rendering from both a MacBook and Windows laptop and both render outputs have the same issue.

I tried with the default .rmd file but that website only works with .html outputs so even under the best of circumstances, it would not work.

I am not sure about which version I previously used, but the working one would've been older than the current one.

The use case is for sharing publicly, rather than my own use. I find .md files a bit dull to read through for general audiences and lacks the HTML interactivity. Hence, thought folding the code, promoting the use of tabs, kable_extra HTML tables, etc. would make it more user-friendly.

RPubs: just tried this and it works fine for 2 of the HTML files that the former option did not work (I am sure it would work fine with all of them). I guess the main disadvantage here is the workflow. You'd have to reupload each version of the html file as you render them but it wouldn't be the end of the world.

GitHub Pages: I've come across this one before and was thinking to maybe create a centralisee page where I could maintain the various public projects I have. However, as far as I understand GitHub pages (I have 0 experience with them) it's more of a single website that can contain various things (such as pages within that website of each repo)? Rather than a separate HTML preview for each repo. Or is it that both are possible?

Thanks again for your help, very appreciated.

4

I did not find time to look more into the why you get the issue. JS stuff and load order of JS in browser is kinda complex.

But I can answer this:

See here for demo and doc: https://pages.github.com/

You can have one github pages site for you user which is a global website you maintain in a special repo under your user. This is a git repo and anything you'll commit can end up on your site. This is useful for own blog or main site for an organization.

You can also have one site per repository you have. In which you can have either a branch (gh-pages) or a folder in your main branch (docs), which will be serve as a website. This means that you can easily compile to HTML, even not self_contained, and commit your file to the doc or the branch and it will end up in a site for you project. So you can have for each project a site where you can share works you have.
A Github action can help you build and publish your resulting html each time you update the Rmd file.

Another popular option is Netlify to host static content. You can do manual drag and drop to have a site as you need to. Or you can use automatic deployment per repository using integration between Netlify and Github, or use a github action to build then publish.

5

Absolutely no worries and thank you SO MUCH for all your help, Christophe.

I was actually considering creating some sort of a website where I can host and organise my repos (kind of like a portfolio) and GitHub Pages seems to fix both that and the HTML visualisation of my analyses. Also, wasn't aware of Netlify so will be looking into that as well.

I will keep the RPubs way of displaying the work for now while I work on GitHub pages but this seems to have been solved my problem, it's just that I need to spend some time on it. I'm sure it will pay off long-term as well.

I think this problem is solved now, if there's anything else I will come back but should be able to find enough tutorials online and through your link!

Thanks again!

6

That is great !

I have just remembered this resource that may help you

7

Brilliant, thank you! :slight_smile:

1 Like
8

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.