使用Jekyll显示Jupyter笔记本

Jekyll是一个用Ruby编写的静态站点生成器，支持博客并与Github页面整合。因为Github只负责托管，这种设置使数据分析共享和可视化变得简单。Jekyll提供了各种主题和插件，因此用户无需担心Web开发。

本指南将指导您完成安装Jekyll的过程，并将其配置为从Jupyter笔记本显示多种输出类型。

在你开始之前

1. 熟悉我们的入门指南并完成Linode主机名和时区设置的步骤。
2. 本指南尽可能使用sudo。完成“ 保护您的服务器”的相应部分以创建标准用户帐户。
3. 更新您的系统： sudo apt update && sudo apt upgrade
4. 如果默认情况下尚未在您的发行版上安装GCC和Make，请安装它们： sudo apt install gcc make

安装Ruby和Jekyll

安装Ruby版本管理器（RVM）。建议使用RVM有以下几个原因：

• 安装gems时无需使用sudo
• 简化在同一台机器上使用多组gems的情况
• 轻松切换不同版本的Ruby
• software-properties-common软件包是添加新PPA的便捷方式： sudo apt install software-properties-common
• 将RVM库添加到PPA列表： sudo apt-add-repository -y ppa:rael-gc/rvm
• 更新PPA列表中可用的软件包并安装RVM： sudo apt update && sudo apt install rvm
• 安装完成后，终端将显示它创建的新组。退出终端会话并将SSH重新连接到Linode： Creating group 'rvm' Installing RVM to /usr/share/rvm/ Installation of RVM in /usr/share/rvm/ is almost complete: \* First you need to add all users that will be using rvm to 'rvm' group, and logout - login again, anyone using rvm will be operating with "umask u=rwx,g=rwx,o=rx". \* To start using RVM you need to run "source /etc/profile.d/rvm.sh" in all your open shell windows, in rare cases you need to reopen all shell windows.
• 安装Ruby： rvm install ruby
• 使用gem下载jekyll和Bundler： gem install jekyll bundler

创建一个新博客

1. 创建一个新博客。本指南将使用exampleblog： jekyll new exampleblog
2. 导航到exampleblog目录。虽然Jekyll已经有了博客框架，还是需要创建一个assets文件夹来存储图像，CSS和JS文件。 cd exampleblog mkdir -p assets/images 目录树类似于： exampleblog/ ├── 404.html ├── about.md ├── assets │   └── images ├── \_config.yml ├── Gemfile ├── Gemfile.lock ├── index.md └── \_posts └── 2017-10-10-welcome-to-jekyll.markdown
3. 运行Jekyll服务器。使用浏览器导航到Linode的公共IP地址（端口4000）来预览站点。网站上应该有一篇默认的文章。 bundle exec jekyll serve --host=0.0.0.0

注意启动Jekyll服务器后，会有一个新_site文件夹。由于每次对站点进行更改时它会重建，所以不要将文件存储在此文件夹中。

配置Jupyter笔记本

如果您的系统上尚未安装带有Jupyter的Anaconda，本节将指导您完成设置笔记本的过程，该笔记本将提供模板输出，然后可以将其导出到您的Jekyll博客。

本节中的步骤可以从本地计算机或使用Jekyll博客的Linode完成。如果您使用Linode，则可以使用ngrok查看笔记本。

1. 如果您的系统上还没有Anaconda，请下载并安装它： curl -O https://repo.continuum.io/archive/Anaconda3-5.0.0.1-Linux-x86\_64.sh bash Anaconda3-5.0.0.1-Linux-x86\_64.sh 按照提示在系统上安装Anaconda。
2. 使用R语言为Jupyter创建Anaconda环境。使用以下命令替换data-notebooks为合适的环境名称： conda create --name data-notebooks source activate data-notebooks
3. 启动Jupyter笔记本： jupyter notebook

将Jupyter笔记本导出为Markdown

本节演示了Jupyter笔记本的一些常见功能，可以在Jekyll博客上显示HTML。这里介绍的Jupyter Notebook单元有四种类型的输出：Markdown格式的MathJex和LaTeX，HTML表格，控制台输出和使用绘图功能的图形。Iris数据集将用作生成本指南中输出的示例。

1.打开感兴趣的笔记本，或使用下面的代码创建示例笔记本。运行所有相关单元格，以便在页面上显示你想要在Jekyll博客上显示的内容。导航到File > Download As > Markdown (.md)。markdown文件将保存到浏览器默认的Downloads文件夹中。

或者直接可以从命令行完成。为了创建example_notebook.md，图形保存在单独的example_notebook_files文件夹中。

jupyter nbconvert --to markdown /path/to/example\_notebook.ipynb

2.本指南中使用的演示代码如下：

example.ipynb 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20\begin{equation\*} \mathbf{V}\_1 \times \mathbf{V}\_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \end{equation\*} import pandas as pd import seaborn as sns %matplotlib inline url=https://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data" names = 'sepal-length', 'sepal-width', 'petal-length', 'petal-width', 'class' iris = pd.read\_csv(url, names=names) iris.head() iris.describe() sns.pairplot(x\_vars="petal-length",y\_vars="petal-width", data=iris, hue="class", size=10)

3.在Jekyll项目的_posts文件夹中，创建一个新的名为YYYY-MM-DD-example-post.md的文件。如果日期格式不正确，帖子可能不会出现在博客上：

touch YYYY-MM-DD-example-post.md

4.markdown文件应以三个破折号开头并包含标题，这些标题为Jekyll提供了适当的页面数据以便填充帖子的信息。日期必须采用指定的格式。小时，分钟，秒和时区的调整是可选的：

YYYY-MM-DD-example-post.md1 2 3 4 5 6 7

--- layout: post title: "Awesome Data Visualization" date: 2017-10-10 12:07:25 +0000 categories: - data ---

5.把Jupyter导出的markdown文件内容复制到新帖子中。

使用命令行执行此操作：

cat example\_notebook.md | tee -a exampleblog/\_posts/YYYY-MM-DD-example-post.md

修改Markdown文件

如果您在浏览器中导航到Jekyll博客，您应该会看到指向新帖子的标题链接（示例中为“超赞的数据可视化”）。但是您可能会注意到大部分输出格式不正确。根据帖子内容可能需要转义字符。有关转义字符和格式化块的更多信息，请参阅Jekyll文档。

以下部分显示如何通过调整并设置表格和图像样式以改进显示。

扩展默认SCSS

Jupyter中的表格输出转换为HTML表格。本节介绍如何通过扩展主题SCSS以便对表格进行样式化。

1.在/exampleblog/assets文件夹中创建一个名为main.scss的新文件。导入现有的最小SCSS主题并添加以下内容：

main.scss 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

--- --- @import "minima"; p, blockquote, ul, ol, dl, li, table, pre { margin: 15px 0; } table { padding: 0; } table tr { border-top: 1px solid #cccccc; background-color: white; margin: 0; padding: 0; } table tr:nth-child(2n) { background-color: #f8f8f8; } table tr th { font-weight: bold; border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; } table tr td { border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; } table tr th :first-child, table tr td :first-child { margin-top: 0; } table tr th :last-child, table tr td :last-child { margin-bottom: 0; }

2.HTML表格将使用新样式。

在Jekyll中添加图像

通过markdown添加图像需要将图像存储在项目目录中。

1. 将所有从Jupyter导出的图像移动到/assets/images文件夹中。
2. 在markdown中将图像的引用修改为适当的路径。用两个花括号和双引号括起路径。 YYYY-MM-DD-example-post.md1 undefined({{ "/assets/images/example_notebook_5_0.png" }})
3. 还可以显示具有较大尺寸图例的图表。

这只是一个例子。使用JavaScript库添加交互式图形超出了本指南的范围。

使用CDN支持MathJax

内容分发网络（CDN）是在网站上添加功能而无需下载其他软件的好方法。本节将介绍如何创建使用自定义标题的帖子。

1.为了让Jekyll将LaTeX转换为PNG，可以通过MathJax获得CDN。复制以下HTML标记并将其粘贴到以下元数据部分的下方YYYY-MM-DD-example-post.md：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML\\\_HTMLorMML" type="text/javascript"></script>

2.默认的Jekyll minima主题包含与gem一起打包的_layouts和_includes目录。通过以下方式导航到此目录：

cd $(bundle show minima)

目录树包含用于集成Disqus和Google Analytics的其他HTML文件。

minima-2.1.1/ ├── assets │   └── main.scss ├── \_includes │   ├── disqus\_comments.html │   ├── footer.html │   ├── google-analytics.html │   ├── header.html │   ├── head.html │   ├── icon-github.html │   ├── icon-github.svg │   ├── icon-twitter.html │   ├── icon-twitter.svg │   └── scripts.html ├── \_layouts │   ├── default.html │   ├── home.html │   ├── page.html │   └── post.html ├── LICENSE.txt ├── README.md └── \_sass ├── minima │   ├── \_base.scss │   ├── \_layout.scss │   └── \_syntax-highlighting.scss └── minima.scss

注意默认主题作为gem安装。如果项目根目录中有另一个_layouts或_includes文件夹，那些HTML文件将覆盖该主题。

3.在minima主题的_includes目录中，创建一个新的scripts.html文件。使用Liquid模板，添加逻辑以检查帖子中的mathjax标题：

\_includes / scripts.html1 2 3 4 5

{% if page.mathjax %} <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML\\\\\\\\\\\\\_HTMLorMML"> </script> {% endif %}

4.添加模板到_layouts/post.html以便在帖子中包含scripts.html：

\_layouts / post.html1 2 3 4 5

--- layout: default --- {% include scripts.html %}

5.使用mathjax: true编辑/exampleblog/_posts/YYYY-MM-DD-example-post.md标题。使用 $$包裹LaTeX以创建数学块。请记住包括两行---：

YYYY-MM-DD-example-post.md 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

--- layout: post mathjax: true title: "Awesome Data Visualization" date: 2017-10-10 12:07:25 +0000 categories: data --- $$ \begin{equation\*} \mathbf{V}\_1 \times \mathbf{V}\_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \end{equation\*} $$

6.浏览器应使用MathJax显示与Jupyter Notebook一样的输出。

更多信息

您或许需要访问以下资源来获取关于本主题的更多内容。在此提供以下链接希望有所帮助，但是不保证外部资料的准确性和时效性。

• Jekyll
• MathJax
• Jupyter笔记本