If you want to connect or display your jupyter notebook on your local website, there are several ways to do that.

We will use the below method in this tutorial.

Using an Iframe in your local website

Your jupyter notebook runs on a local server, on a particular address for example say "http://localhost:8888/notebooks/mycode.ipynb".

An Iframe can be used to display any other website using the address on which it is running.

Just insert the below piece of code in your website code, wherever you want to display your jupyter notebook.

And don't forget to change the src with yours.

<iframe src="http://localhost:8888/notebooks/mycode.ipynb"></iframe>

Now, please note that the above method might not work if there are Content Security Policy issues. You might face this particular error "ancestor violates content security policy".

To solve this problem we can add some extra parameters to our jupyter notebook configuration file related to frame-ancestors, for it to work.

 

 

Make sure you have jupyter notebook installed on your system.

Run the below command on your terminal or cmd.

jupyter notebook --generate-config

This command will generate a configuration file your jupyter notebook, named "jupyter_notebook_config.py".

Now, add the following lines to this configuration file.

c.NotebookApp.tornado_settings = {
    'headers': {
        'Content-Security-Policy': "frame-ancestors http://localhost:8000 'self' "
    }
}

Note: Make sure you change the address of the local website with yours in the above code.

We are almost done. After you are done with all of the above, try restarting your jupyter notebook and then reload your local website.

I Hope the error related to content security policy is solved now and you can display your jupyter notebook on your local website.

If you still face any errors, let me know in the comments below.