专栏首页使用Jekyll显示Jupyter笔记本

使用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. 创建一个新博客。本指南将使用exampleblogjekyll 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一样的输出。

更多信息

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

本文的版权归 eru 所有,如需转载请联系作者。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在Ubuntu 18.04上安装WordPress

    WordPress是一个非常流行的专注于博客的动态内容管理系统(CMS)。WordPress可以部署在LAMP或LEMP堆栈上。它具有的可扩展插件框架和主题系统...

    eru
  • 为什么网络安全很重要?

    随着互联网的发展和计算机网络的迅速增长,网络安全已成为企业考虑的最重要因素之一。像微软这样的大企业正在设计和构建需要防御外来攻击的软件产品。

    eru
  • 可再生能源物联网:当物联网遇到能源

    随着对全球变暖和化石燃料消耗问题的关注不断上升,世界正在转向替代能源以满足其需求。其中最具可持续性的选择是可再生能源。该领域遍及太阳能,风能,水力和地热等各种能...

    eru
  • 【2019年8月】OCP 071认证考试最新版本的考试原题-第15题

    Examine the description of the PRODUCTS table:

    用户5892232
  • Django学习_简易博客(五)

    {% csrf_token %}包含了自动生成的令牌,避免跨站点请求伪造(CSRF)

    zx钟
  • 博客从 typecho 迁移到 Hexo

    tanmx
  • 大神接棒,YOLOv4来了!

    之前,YOLO系列(v1-v3)作者 Joe Redmon 宣布不再继续CV方向的研究,引起学术圈一篇哗然。YOLO之父宣布退出CV界,坦言无法忽视自己工作带来...

    Amusi
  • DartVM服务器开发(第四天)--代码优化

    在上一篇文章中,有人问了相对路径在不同的系统的表现是不一样的,那么,我们今天使用绝对路径,获取当前项目的绝对路径是很容易的,通过下面代码获取

    rhyme_lph
  • Linux常用命令记录

    一旦有空,就开始学习Linux常用命令,不想求学会多少,只要每天学习一点点就行了。之所以记录一下所学习的东西,是为了加深一下印象,下次再次遇到也就印象深刻了。教...

    王小婷
  • [日常] Go语言圣经-Goroutines和线程

    1)线程都有一个固定大小的内存块(一般会是2MB)来做栈 2)一个goroutine会以一个很小的栈开始其生命周期,一般只需要2KB,不是固定的;栈的大小...

    陶士涵

扫码关注云+社区

领取腾讯云代金券