Jekyll是一个用Ruby编写的静态站点生成器，支持博客并与Github页面整合。因为Github只负责托管，这种设置使数据分析共享和可视化变得简单。...这里介绍的Jupyter Notebook单元有四种类型的输出：Markdown格式的MathJex和LaTeX，HTML表格，控制台输出和使用绘图功能的图形。...[jupyter_table.png] [jekyll_table.png] 在Jekyll中添加图像 通过markdown添加图像需要将图像存储在项目目录中。...将所有从Jupyter导出的图像移动到/assets/images文件夹中。 在markdown中将图像的引用修改为适当的路径。用两个花括号和双引号括起路径。...[jekyll_ggplot.png] 这只是一个例子。使用JavaScript库添加交互式图形超出了本指南的范围。
如果你已经对 GitHub Pages 熟悉了，你或许会对知道一些幕后的东西感兴趣，我们现在正在做一些事情去简化这个发布流程，并且让它更加如你所期待的那样在 GitHub 的其它地方创作 Markdown...所有的 Markdown 文件现在都被 GitHub Pages 渲染，把你从需要给每个文件添加 YAML 前置描述（在文件顶部由 ---符号分割的元数据）中解脱出来。...如果你没有一个名为 index.md（或者 index.html）的文件，我们会使用你的 README 文件作为站点的首页，就和你在 GitHub 浏览一个仓库时看到的一样。...如果一个给定的文件没有明确的指明使用什么布局，我们将根据它的上下文指定一个。举个例子，页面会自动的变成 page布局，而如果 page布局不存在，它会变成 default布局。...如果你的页面没有一个明确的标题，并且这个文件是由 H1、H2或者 H3 标签开始的，我们会使用这个标签内容作为页面的标题，显示在浏览器的标签上。
Prism 工具的安装使用相较其他两种稍微复杂一点，需要下载插件 prism.rb 手动安装到 _plugins 文件夹中，然后在文章模板页添加 prism.css 和 prism.js 的引入。...index.md 文件。...important; } } 另外，也需要在 _config.yml 文件中在导航栏中添加链接，如下所示。...此处，为了原生支持 LaTex 语法中采用双$符号来声明公式，同时也相应调整了 MathJax 的配置。于是就可以在基于文章模板的页面中直接使用如下所示的 LaTex 声明即可正确显示数学公式了。...其实在 Jekyll 中要做到这个也不是很难，只需要对整个文章的内容进行字符计数即可。
index.md ├── _posts │ └── 2018-03-19-welcome-to-jekyll.markdown └── _site 这些不是实际的网站文件。...在添加新帖子和页面时，使用现有结构并遵循Jekyll的命名约定非常重要。 提示： tree是查看文件和目录结构的一个非常有用的命令。...config.yml ├── Gemfile ├── Gemfile.lock ├── index.md ├── _posts │ └── 2018-03-19-welcome-to-jekyll.markdown...一旦保存对帖子或页面的更改，静态站点将自动重建，因此不要直接对_site文件夹中的文件进行更改。...在Web浏览器中，我们可以在jekyll serve输出中显示的服务器地址和端口访问它： 结论 在本教程中，我们安装了Jekyll并创建了一个包含一些自动生成内容的开发站点。
在GitHub Pages中写博客，通常就是使用Markdown。比如你正在阅读的这篇博客就是用 Markdown 编写的。...（原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。Jekyll 还支持 Textile 文件，这里不做展开。） 阿里云。...我有一个和微信公众号ID同名的com域名shanyshanb.com，希望能够使用它来访问博客，而不是使用 GitHub 提供的二级域名。...此时就可以使用 www.shanyshanb.com 来访问博客。 另一种设置方式，是在仓库的设置页面通过图形界面设置自定义域名。设置后系统会自动提交CNAME文件至仓库，效果是一样的。...在配置页面的 Theme Chooser 处可以选择自己喜欢的 Jekyll 主题，我现在使用的是 jekyll-theme-merlot。
虽然一直以来对Git1还停留在使用图形界面软件的程度，但还是想试试用GitHub2怎么折腾出一个博客出来。...在jekyll templates中可以看到，是支持include的，只需要在根目录下创建一个名为_includes的目录，把页面片放到这个目录中，然后用下面的语法加载对应的页面片文件即可： {% include...footer.html %} #加载名为 footer.html 的文件到当前位置 {% include footer.html param="value" %} #也可传参数到页面片文件中，在footer.html...代码展示 直接展示 由于Github是支持使用Markdown的，所以我们可以使用Markdown的代码展示方式，具体可以看Markdown中的CODE BLOCKS部分。...评论系统 网上有几个可以嵌入到静态站点的评论系统，像多说、友言、畅言等等，还有Jekyll模板里默认使用的DISQUS。
国内也有很多博客和技术论坛，比如简书、博客园等等，然而使用别人的博客架构，自定义的内容受到很大限制，而且使用 markdown 语法的话，一般都需要自己开设一个图床，这样就使得文章内容可能会需要两方，甚至三方的服务...github pages 配置项，选择 jekyll theme ?...此时会生成配置文件 _config.yml，里面记录了你设置的主题模板 ； index.md 文档，初始引导页面，写了几句欢迎词以及 markdown基本语法 ?...后续改进 除了官方提供的几个基础模板，github pages 也支持其他开源的模板，可以在模板页面选择 模板地址： http://jekyllthemes.org/ ?...看了这个主题，除了风格不太适合我个人以外，它实现了 MathJax ,Mermaid.JS 等强大的可视化功能，这些是在处理算法原理的时候非常有用的 还想到了一个很好的方式，如果大家也想加入到公众号文章的内容建设中来的话
下面的示例中，导入了一个 hosted on github 的csv，并使用Plotly将数据展示在一个table中。...在notebook中绘制，可以将数据分析和绘图保存在一个位置。下面是一个可以交互的绘图。转到 Plotly getting started 页面，了解如何设置凭据。... 使用Numpy和Plotly，可以在Notebook中绘制交互式3D图。 ...例如，从YouTube： LaTeX 可以通过将数学内容用$$包住，来将LaTeX嵌入notebook中，然后将该单元格作为Markdown cell 运行。...或者可以在python的输出中展示，请参阅：here 导出和发布 notebook 可以将Notebook导出为HTML，PDF，.py，.ipynb，Markdown和reST文件。
这些优化仍然允许在 markdown 中混合使用 Vue 组件，编译器会帮你处理静态/动态分离工作 4.使用了 Vite 5.更快的 dev 服务器启动 6.更快的热更新 7.更快的构建（使用 Rollup...其鼓励使用原始的 JavaScript 而不用转义以及使用 CSS 变量来主题化 将来这会是 VuePress 的下一版本么？ 可能不会。...避免影响 VuePress 当前的主题和插件生态，核心逻辑是更少的主题 API（倾向于 JavaScript API 而不是文件布局方式）且没有插件（所有的定制都在主题内） 开始 1.初始化目录及 index.md...文件则需要通过 /icon.png 引用 基础 URL 解决你的站点部署不是在根目录的情况。...-- 指向在 foo 目录的 README 文件中的某个标题 --> [bar - three](../bar/three) [bar - three](..
#1 在GitHub.com上编辑代码 先从一个大多数人都知道的开始吧（尽管我是上个星期才知道的） 在GitHub上打开一个文件（任何仓库的任何文件），在页面的右上角有一个像小铅笔的按钮。...你可以在PR的描述中写fixes #234。 当合并PR的时候，会自动关闭那个issue。是不是很方便：） 了解更多。 #5 链接到评论 是否想要链接到某个特定的评论？...#7 灵活使用GitHub地址栏 GitHub的页面导航已经做的很好了，但是有些时候直接在导航栏中输入会更快。...比如这个README页面（链接）: ? 点击设置，选择Jekyll主题。 ? 我将得到一个Jekyll主题的页面: ?...我的建议是文本写在markdown文件中，然后存到你的仓库。接着在前端写一个组件来请求文件然后渲染。
在 Linux 上，你可以使用你的包管理器安装 Node.js： $ sudo dnf install nodejs 如果你的包管理器没有 Node.js，或者你不在 Linux 上，你可以从 Node.js...在你确认安装完成后，尝试运行 Eleventy： $ npx @11ty/eleventy 4、创建一些模板 现在运行两个命令来创建两个新的模板文件（一个 HTML 和一个 Markdown 文件）：...这就把当前目录或子目录中的任何内容模板编译到输出文件夹中（默认为 _site）。...然后把 _site 中的文件上传到你的 Web 服务器，发布你的网站给世界看。 尝试 Eleventy Eleventy 是一个静态网站生成器，它易于使用，有模板和主题。...如果你已经在你的开发流程中使用 Node.js，Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好的结果，并使你免于复杂的网站设计和维护。
下面的示例中，导入了一个 hosted on github 的csv，并使用Plotly将数据展示在一个table中。...在notebook中绘制，可以将数据分析和绘图保存在一个位置。下面是一个可以交互的绘图。转到 Plotly getting started 页面，了解如何设置凭据。...使用Numpy和Plotly，可以在Notebook中绘制交互式3D图。...例如，从YouTube： LaTeX 可以通过将数学内容用$$包住，来将LaTeX嵌入notebook中，然后将该单元格作为Markdown cell 运行。...或者可以在python的输出中展示，请参阅：here 导出和发布 notebook 可以将Notebook导出为HTML，PDF，.py，.ipynb，Markdown和reST文件。
最近因为研究需要，发现有太多的东西需要记录，同时，Markdown也越用越顺手，就想着能够建立自己的博客平台来分享自己平时研究和学习过程中的一些技术问题和自己对于研究的一些思考。...而github提供的github pages基本上能满足我的需求了，使用也方便，搭建好环境以后，可以使用Markdown来编写博客，并且上传到github上托管，非常方便。 一....如果读者喜欢我的博客模板，可以直接从我的github仓库https://chauby.github.io下载，然后使用git checkout命令回到最初的版本即可，最初的版本是一个空仓库，只有简单的示例页面...到这里，博客的平台搭建就算完成了，可以在本地调试完写好的博客然后再使用git推送到github的远程仓库，远程仓库的博客就更新了。 4....其中，_posts目录下分类存放了我的所有博客文章的源文件，博客所使用到的图片都放在images目录下，而平时最主要用到的目录就是这两个，只要在其中添加相应的文件和图片即可完成博客的编写，非常方便。
在实际工作中，当我们面临复杂大型的项目，和其中大量的代码时，如果只根据个人喜好而不根据代码规范去开发，写完后不留存开发文档以及接口文档，必然给项目的维护带来更高的代价，给团队中的其他开发者带来困扰。...我推崇用Markdown来写笔记，因为markdown足够简约优雅，兼容性也十分强， Markdown是一种轻量级的「标记语言」，通常为程序员群体所用，目前它已是全球最大的技术分享网站 GitHub 和技术问答网站...，在config中添加博客相关信息和配置 在hexo官网/themes选择相关主题，或使用默认主题，以我使用的简约主题maupassant为例 主题默认样式如图： ?...除了默认的首页/归档等tab页，可以在配置中添加更多tab页，tab的内容也可以从markdown渲染。...例如添加/Demo分页，可以在配置文件中新增一项tab配置，在source文件夹下添加/demo/index.md即可，可以在post.pug模板中更改tab分页渲染index.md的方式。
docsify 官网 4 Docute Docute 本质上就是一个 JavaScript 文件，它可以获取 Markdown 文件并将它们呈现为单页面应用。...Docute 与Docsify 基本一样，只是在文件大小和UI 及不同的使用方式，Docute网站有其差异介绍。...最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。...现在github默认支持jekyll, 所以原生的文件如果放到github上，它会自动帮你生成静态网站。...4、相对hexo而言，可以直接在github网页版上编辑和发布博客，PC间切换和同步非常方便。（这点本人非常喜欢） 缺点： 1、jekyll用的liquid语法确实不是对程序员友好的，。
既然博文都保存在了 GitHub 上，怎么方便快速的基于 GitHub 来搭建自己的博客呢？（有些人直接就让在 GitHub 阅读，虽然可以，但体验还是不太好，而且看起来没有那么高大上，是不是？）...增加列表页 在 content/posts 目录下新增一个文件：_index.md，内容如下： --- title: "文章列表" --- 这时（hugo serve 会自动编译）点击 Posts，页面如下...它最常使用的是通过 Jekyll 这个站点生成器生成静态页面，有兴趣的自行查阅资料了解。我们应该使用 Hugo 生成静态页面，因此直接将静态页面部署到 GitHub Pages。...小细节：避免 Jekyll 起作用，可以在仓库根目录放一个空文件，文件名：.nojekyll 部署我们的站点 这里有两种做法。...1）方法一 上面 Hugo 项目的代码直接推送到 GitHub Pages 这个仓库中，在通过 Hugo 生成静态页面时，指定目标目录为 docs： $ hugo -d docs 这样 docs 下面的内容就是静态页面
通过使用Markdown或其他格式编写博客文章，并在Next.js中使用静态生成来生成预渲染的静态页面，可以使博客页面更快地加载，并提高SEO排名。...你可以查看它的 GitHub和官网了解更多。 9.Docsify star 数 22K+。 Docsify是一个轻量级的JavaScript文档网站生成器，使用Markdown文本文件来生成静态站点。...VuePress 使用 Markdown 来写作和生成网站内容，同时支持 Vue 组件和自定义页面。...这些工具中的大多数都支持 Markdown 等轻量级格式，并提供了许多主题和插件，可以方便地创建漂亮的博客。此外，这些工具也有很好的文档和社区支持，使得学习和使用它们变得更加容易。...不同的工具都有各自的优缺点，适用于不同的需求和技能水平，因此在选择时需要根据自己的情况进行考虑。例如，如果您想要一个快速而简单的解决方案，那么 Jekyll 或 Hexo 可能是不错的选择。
在工作、学习中，不可避免会要写一些文档；又或者想搭建个简单网站，记录和分享您的生活经验或知识；撰写这些文档中使用 markdown 是一个非常不错的选择，让我们更加聚焦在文档表达的内容上。...在 先前文章 《Markdown的那些事儿》 也有提到到，围绕 markdown 有着大量的开源软件、库做支持；这里分享下使用基于MIT许可证的开源软件 Hugo 来管理 Markdown 文档，能帮助基于...markdown 生成各种风格主题的静态页面。...Hugo是一款强大的用于生成静态网页的程序，擅长于将 Markdown 文档按需要转换成各类主题的静态网页；它由Go语言编写的，在处理速度上非常快；也有人对比过类似一些产品比如 Jekyll / Hugo...由于使用的都是默认配置，这里仅拷贝docs/example、docs/_index.md 当然，我们可以自己新建下 自己的 Markdown文件（hello.md）；由于 快速使用中配置都为默认的，因此
不好的地方是与标准的 Markdown 语法略有不同，而且每次都得在文章内容页面开头加上以下代码。如果你使用带有 markdownlint 插件的编辑器编辑文章时，可能会有一堆告警。...缺点在于 Github Pages 不支持这类自定义插件，你可能需要使用自定义的 workflow.yml 文件来指导 Github Action 来编译生成静态文件。...如果不怎么了解 Github Action，恐怕这种方式部署在 Github Pages 上也不是很省心。...# gemfile gem "jekyll-toc" # 添加后需执行 bundle install 安装插件 # _config.yml # 在全局配置文件中启用 jekyll-toc 插件 plugins...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能，因此这两个例子的做法都不是很合适。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
