Build Personal Blog -- Integrate Hexo with Jupyter Notebook

Posted on Edited on In , Views: Valine: 405 1 mins.

Embed Local File

  1. npm install hexo-jupyter-notebook –save`

  2. brew install pandoc

  3. pip install nbconvert

  4. Update _config.yml in hexo folder –> post_asset_folder: true

  5. Create new folder named jupyter under folder _post to save the ipynb code blocks

    mkdir jupyter-demo

  6. Add the following code to your target md file

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>

  1. If you want to change the height and width of the iframe, please go to node_module of hexo, and find main.py in hexo-jupyter-notebook , change the relative configuration.

    1
    2
    3
    <iframe id='ipynb' marginheight="0" frameborder="0" width='924px' 
            height='680px' srcdoc="%s" style="scrolling:yes;">
    </iframe>

Embed Online File

  1. Go to https://nbviewer.jupyter.org/ and paste the link of online jupyter notebook, like

    https://github.com/kinglin/YTClip/blob/cliptrial/02_Code/01_Scripts/FrameSampling.ipynb

  2. Use the following code block and input the generated URL by nbviewer:

    https://nbviewer.jupyter.org/github/kinglin/YTClip/blob/master/02_Code/01_Scripts/rename_addprefix.ipynb

1
<iframe src="your_URL" width="700" height="500"></iframe>
0%