Hosting a Closeread page on GitHub

[emeyers]

Hi,

I am trying to host a webpage created by Closeread on GitHub pages, but unfortunately it doesn't seem to be working. While the webpage appears, none of the Closeread javascript is working. The webpage is here: https://emeyers.github.io/test_delete/closeread_answers.html and the repo is at: https://github.com/emeyers/test_delete/tree/website

When I clone the repo and look at the webpage everything works fine so I seem to have uploaded all the appropriate files.

Any help you can give would be greatly appreciated!

Ethan

[jimjam-slam]

Hey @emeyers! I think the problem might be that you're rendering individual documents rather than a Quarto project. I'm not 100% sure, but depending on how you upload stuff to GitHub Pages, it might be designed to work with a project. How do you go if you add a project file (_quarto.yml)?

The main consequence of this I'm seeing on your GitHub Pages-hosted link is that the CSS stylesheet for Closeread isn't loading properly (it's in the wrong place).

I'm separately also seeing an error in the JavaScript, "no step elements found". I would need to see your source files to figure this out this — the repo only has the HTML output closeread_answers.html (do you have a closeread_answers.qmd or closeread_answers.ipynb?). But generally it probably means that you don't have any triggers on your page (or else something else has gone wrong when rendering, causing the triggers not to be processed properly).

[emeyers]

Thanks for the reply @jimjam-slam! I experimented a bit with creating a Quarto project, but I'm still running into the same issue regardless of whether I created a project. I don't think the issue is missing the _quarto.yml per se, but I do think that I have some wrong settings on GitHub pages so that my closeread html document is not able to find the javascript files.

Is there any documentation for how to deploy a closeread html document to GitHub pages? What I did was to just change the settings on the GitHub Pages page to point to the branch that has my closeread files which doesn't seem to be adequate to get the javascript files to load.

Also, sorry that the repo was a bit of a mess. I cleaned it up a little and the quarto closeread document is there (https://github.com/emeyers/test_delete/). I also tried forking and deploying the solar system app created by @Meghansaha and it's having the same issue (see https://emeyers.github.io/the_solar_system/our_solar_system.html). So, I'm pretty sure all the closeread code is correct (also since it runs on my local computer) it's just that GitHub pages can't find the javascript files.

[jimjam-slam]

Hey @emeyers, yeah, that might be your problem! GitHub Pages generally needs the rendered version of your page, which is what is produced when you run quarto render or press the Render button.

If you're rendering a website, that'll be the _site folder by default. If you're rendering an individual page — say example.qmd — then it'll be example.html plus the example_files folder (which usually contains CSS and JS). Also make sure any images or other assets you're publishing go along for the ride.

Quarto also has some tools built in to help ease the process of uploading to GitHub Pages 😊

[emeyers]

Thanks for sending the links to the documentation, I figured it out!!!

What I needed was a .nojekyll file. I knew something weird was going on because the whole site worked fine on my local computer but GitHub pages was ignoring the javascript files, so seemed like something was interfering, which I guess has to do with the jekyll configuration.

Well, definitely wasted too much time on this, but hopefully this will be helpful to anyone else who has this issue in the future.

[Meghansaha]

@emeyers glad you figured it out! And thank you @jimjam-slam for answering! Didn't see this till now because I'm traveling for a wedding and was trying to beat the snowstorm near me! Will also have time to finally submit for the contest! I didn't forget!

[jimjam-slam]

Ah yep, that'll do it! GitHub Pages processes all sites with Jekyll by default unless you add a .nojekyll file. Sorry, I haven't used it in a while!

@Meghansaha, glad to hear you're thinking of entering! We've extended the contest to Jan 5 (still updating announcement pages), so you still have plenty of time 😊

[emeyers]

Thank you again @jimjam-slam and @Meghansaha! The R community is amazing.

In case anyone needs to deploy closeread websites on github in the future, I just wanted to mention that you if you set the argument embed-resources: true in the Quarto document header, then all the files needed will be embedded in the resulting .html document, and you can just upload that .html document to GitHub pages and you doing need to upload the _extensions directory and you don't need a .nojekyll file; i.e., the header should have:

---
title: My Closeread page
format:
  closeread-html:
    embed-resources: true
---

This is probably the easiest/best solution because it just requires upload a single .html document to view the page. I hope that helps anyone who runs into this issue in the future.

[andrewpbray]

Hey @emeyers good to see you, it's been awhile!

Neat to see you found your way to Closeread. Looking forward to seeing what you use it for!

[emeyers]

Hi @andrewpbray, good to hear from you too - I hope all is well in California, and really nice work creating Closeread!

The main reason I starting looking at Closeread was for something fun to teach for the last class of the semester for my Data Exploration and Analysis class. Hopefully some of the students will convert their final projects into Closeread documents, and I mentioned the contest, so hopefully some of them will submit entries as well.