How to make the notebooks work on a MySt site?

[ErnestSuyver]

Hi all,

I'm using MySt to generate a static site. One of the pages is a Jupyter notebook. I would love it if people could just run a cell with some code and see the output, visually, on that very page.

On my local machine, I got this working by following the instructions on this page in the MyST documentation. Basically, you run the notebook inJupyterLab and this somehow "talks" to the notebook in MyST. That is, you can click on the on/off button and it turns into a little menu where you can run the cells on the page. Also, the code cells themselves got little buttons. Fiddly to set up but nice when it finally worked. (Although the preview using :::{figure} didn't seem to work).

But how does this work online? I tried connecting to Binder but I don't really understand what to do and cannot get it to work.

I could do with some advice and clear explanation and instructions ("explain it to me like I'm 5 years old....")

I do feel this - live notebooks - is the defining feature of MySt so it is important to get this right.

Thanks for your help!

Ernest

some links:
site (still WiP): https://creativecodingleiden.nl
notebook in MyST: https://creativecodingleiden.nl/examples
repo: https://github.com/ErnestSuyver/CCL
mybinder: https://mybinder.org/v2/gh/ErnestSuyver/CCL/HEAD

[agahkarakuzu]

@ErnestSuyver I see that the html pages are built in the actions, but they are not pushed to GitHub pages ernestsuyver.github.io/CCL/ is not accessible.

I think the following configuration is needed:

project:
  thebe:
    binder:
      url: https://mybinder.org
      repo: ErnestSuyver/CCL
      ref: main

instead of

  binder: https://mybinder.org/v2/gh/ErnestSuyver/CCL/HEAD

in the myst.yml config file.

To publish on GitHub pages, you can replace actions/deploy-pages@v2 step with the following.

 - name: GitHub Pages action
      uses: peaceiris/actions-gh-pages@v3.6.1
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./_build/html

You need to set GITHUB_TOKEN so that the actions can actually push built files to the gh-pages branch of your repo, from which the book will be served.

[ErnestSuyver]

@agahkarakuzu Thank you for your reply. Your advice regarding the binder configuration worked! The "on/off button" on the notebook page is not functional and the notebooks (or rather, code fields) can be run.

Takes forever to start up though, given that it is binder. Also, when you navigate away from the page and back again, you have to click the button again.

Regarding replacingactions/deploy-pages@v2 in deploy.yml, I could not get that to work. But it seems to work fine without it.

[agahkarakuzu]

@ErnestSuyver I can see that the HTML is built but not pushed to GitHub pages. Actions logs indicate that it was because the step could not push build files to your repo:

remote: Permission to ErnestSuyver/CCL.git denied to github-actions[bot].

To add a secret named GITHUB_TOKEN to your repository:

1. Create a personal access token (classic) with the repo scope (i.e., select the repo checkbox) (steps)
   

2. Copy that token and add it as a secret named GITHUB_TOKEN to your repository (steps)

Then it should work. If I can see the page online, it would help me understand the issue better.