Change the UI for the JupyterHub in k8s

Hi, I would like to change the UI of my JupyterHub, to make it more like a learning platform style with videos etc.

For starters how to change the css of the Jupyter Notebooks? How to do it with helm charts?

I don’t know Docker, and now tbh I do not want to learn it.

If you want to customise JupyterHub I think it’s best to start with a local install, so that you can see your changes straight away.

If you want to run it in Kubernetes you can then you can either rebuild your Docker image once you’ve figured out your changes, or perhaps mount your changed config into the exist images, it’ll depend on what changes you’ve made.

Jupyter Notebook (or Lab) is a separate component that you’ll need to customise separately. As with JupyterHub it’s going to be a lot easier to install it and modify it in a local development environment.

I don’t know Docker, and now tbh I do not want to learn it.

There’s a lot you can do without getting into Docker, but to run anything on Kubernetes you should at least understand the basics of containers and Kubernetes, otherwise you’re going to have trouble debugging problems, especially if you’re customising things.

1 Like

Hi, thanks for the answer. For starters I would like to change css of the Jupyter Notebooks in the JH. How to do this without the Docker? This is not a problem to do it without the Kubernetes. I just do not get how to achieve it here.

I think you’ll probably need to go through the notebook documentation:
https://jupyter-notebook.readthedocs.io/en/stable/extending/index.html

You won’t need JupyterHub for the development work, you can install and run notebook locally. When you’ve got a specific requirement (e.g. what exactly do you want to change with the CSS) perhaps create a new topic?

Alright I’ve done it :slight_smile: For future reference I had to add those to the helm chart:

single-user:
extraVolumes:
- name: custom-css
configMap:
name: custom-css
extraVolumeMounts:
- name: custom-css
mountPath: /home/jovyan/.jupyter/custom
readOnly: true

1 Like