Jekyll是一个用Ruby编写的静态站点生成器，支持博客并与Github页面整合。因为Github只负责托管，这种设置使数据分析共享和可视化变得简单。...Jekyll提供了各种主题和插件，因此用户无需担心Web开发。 本指南将指导您完成安装Jekyll的过程，并将其配置为从Jupyter笔记本显示多种输出类型。...虽然Jekyll已经有了博客框架，还是需要创建一个assets文件夹来存储图像，CSS和JS文件。...通过以下方式导航到此目录： cd $(bundle show minima) 目录树包含用于集成Disqus和Google Analytics的其他HTML文件。...如果项目根目录中有另一个_layouts或_includes文件夹，那些HTML文件将覆盖该主题。 3.在minima主题的_includes目录中，创建一个新的scripts.html文件。
Jekyll非常适合需要离线工作的人，更喜欢使用轻量级编辑器进行内容维护的Web表单，并希望使用版本控制来跟踪其网站的更改。...以安装所需的依赖项，并自动安装名为Minima的主题。...在添加新帖子和页面时，使用现有结构并遵循Jekyll的命名约定非常重要。 提示： tree是查看文件和目录结构的一个非常有用的命令。...└── _site ├── 404.html ├── about │ └── index.html ├── assets │ ├── main.css...│ └── minima-social-icons.svg ├── feed.xml ├── index.html └── jekyll └── update
Jekyll 生成目录的方案 如参考资料 1 中所提到的，如果想要在 Jekyll 中实现文章目录，有三种不同的方案可供选择： 第一种方案 利用完整的标签来生成静态目录，可以看到在本文的开头就是这样的一个实例...不好的地方是与标准的 Markdown 语法略有不同，而且每次都得在文章内容页面开头加上以下代码。如果你使用带有 markdownlint 插件的编辑器编辑文章时，可能会有一堆告警。...前面的例子是 Hexo 主题，其中采用的是 js 控制 toc 的 div 层在 position: absolute 和 position: fixed 之间变换：当页面初始时，处于 absolute...具体在 post 模板页使用 toc 模块的代码如最后所示。 自适应 为了实现目标二，这里采用了最简单的 CSS 媒体查询，即在平常 PC 端宽屏时采用如下 common.sass 中的样式。...具体实现如最终代码 common.sass 和 layout.sass 所示。在没有 sass 编译环境下，此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!
上面预览图中的博客就是基于jekyll的dbyll主题风格的网站。jekyll是一个简单的免费的Blog生成工具，而dbyll就是基于jekyll的一款开源的主题项目。...dbyll简介 dbyll是一款即时尚又简约开源的jekyll博客主题。...侧边栏(sidebar) 你可以在编辑/_includes/sidebar.html来自定义你的侧边栏。 其他问题 发表的文章在首页不显示？...默认情况发表的文章会在首页进行显示，如果发现首页父不显示发表的文章，可以编辑你的index.html文件： 将for post in site.posts 改为for post in paginator.posts...发表文章： dbyll支持Markdown语法，所以你只需要将.md文件放到_posts目录下，jekyll就会自动将.md文件渲染成一个html页面。一个.md文件代表一个HTML页面。
Mifa GitHub Pages 主题 ?...原子设计由原子、分子、生物体、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。 原子：Mifa CSS Framework 原子，即是事物的基本组成部分。...接着我找到了一个迷你的 CSS 框架 milligram。 随后，在上面加上了我之前作品的颜色，如玩点什么的深灰色，Growth 中采用的绿色。...模板：Mifa Jekyll 主题及 Markdown 编辑器 模板，顾名思义就是整合前面的元素，构建整体的布局。 诸如一个博客包含了 header、footer 及博客本身的内部： ?...这里的 Jekyll 即是模板。 而我的微信编辑器，本身也是基于此模板的，访问地址：md.phodal.com。 页面 So，本文自豪地采用 Mifa Design 0.1.0 排版。
Jekyll 也可以运行在 GitHub Pages 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...我的博客选择的是在 Github 上找的博客主题，它对目录中各个文件的内容、功能都有很详细地说明，适合我这样的小白学习使用 Jekyll 。...（配置其实也挺简单的） 首先我们打开这个网址进行 Prism 的下载，在这里可以选择想要的主题、支持的语言和一些特性，选择完成后在网址最下方选择下载Prism.js和Prism.css，将.css覆盖到...如果博客里原来没有引用，注意需要在head.html中加入 添加css文件后，高亮代码设置完成了，上传至GitHub...参考资料 本次博客的搭建主要参考了以下内容，感谢作者们~ 基于Jekyll搭建个人博客 jekyll-theme-H2O博客主题 个人网站的搭建（基于GitHub和Jekyll主题 ） Jekyll +
其中，markdown 字段的值表示使用哪一款插件来将 Markdown 文本转换为 HTML 页面结构。 GitHub 推荐使用的 Jekyll 的 Markdown 插件为 kramdown。...风格的样式到 assets/css/syntax.css 文件中： $ rougify style github > assets/css/syntax.css 别忘了在你的 中把这份... Rouge 自带语法高亮主题预览...以下每张图片的后面都标注了这种风格主题再 rouge 中的名称，使用上一节中提到的命令可以生成语法高亮样式。 ? ▲ github 需要额外设置前景色 #24292e ?...和 markdown 较大的差异比较 - Hom GitHub Flavored Markdown Spec jneen/rouge: A pure-ruby code highlighter that
因为它是不需要数据库的，通过markdown编写静态文件，生成Html页面，它的优点是提升了页面的响应速度，并且让博主可以只专注于写文章，不用再去考虑如何排版。 静态。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...└── index.html (网站的index) 二.开发或者选择Jekyll主题 再来说说博客的外观，这可能是很多人很看重的，一个高逼格的博客里面看文章也是一种享受。...这里就需要自定义主题了。你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。
因为它是不需要数据库的，通过markdown编写静态文件，生成Html页面，它的优点是提升了页面的响应速度，并且让博主可以只专注于写文章，不用再去考虑如何排版。 静态。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...└── index.html (网站的index)复制代码 二.开发或者选择Jekyll主题 再来说说博客的外观，这可能是很多人很看重的，一个高逼格的博客里面看文章也是一种享受。...这里就需要自定义主题了。你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。
你可以查看它的 GitHub 和官网了解更多。 4.Jekyll star 数 45K+。 Jekyll 是一个基于 Ruby 的静态站点生成器，支持多种主题和插件。...GitBook CLI 是一种用于创建、编辑和构建 GitBook 电子书的工具。通过 GitBook CLI，用户可以使用命令行界面创建新书、添加章节和页面、选择主题和插件，以及构建和发布书籍。...可以使用多种主题和插件来自定义文档页面，使其更具有个性化和专业性。 支持多种扩展功能，如搜索、站点导航、代码高亮等。 可以与Git等版本控制系统集成，方便协作和管理文档。...Eleventy 基于 JavaScript 实现，是一个简单、灵活、快速的静态站点生成器，可以将各种模板语言（如 Markdown、Pug、Liquid、Handlebars 等）转换为 HTML、CSS...Brunch 是一个快速、简单的静态站点生成器和构建工具，它可以处理多种前端语言和框架，例如 HTML、CSS、JavaScript、React、Vue 等。
但是，Markdown 语法的出现无疑为博客编辑带来了一种全新的体验。按照规范化的文本内容标记编写，使用不同的 Markdown 语法翻译器和 CSS 样式，就可以带来丰富多彩的效果呈现。...可能是出于扩大业务的考虑， Cloudflare 现在也开始提供类似于 Netlify 的持续部署和免费静态页面托管服务，并且提供了一个非常棒的域名 *.pages.dev。...the Docs、GitBook 提供的在线文档编辑和托管服务等等。...Jekyll 的开始与 Hexo 有所不同，Hexo 是采用子目录的方式加载应用新的主题，而 Jekyll 则是采用主题化的方式应用主题。...# Site settings 配置站点 # 博客名称 title: 'Mr Li' # 博客描述，会出现在每个 HTML 页面的 head 部分 description: '个人的一个技术博客站点。'
#1 在GitHub.com上编辑代码 先从一个大多数人都知道的开始吧（尽管我是上个星期才知道的） 在GitHub上打开一个文件（任何仓库的任何文件），在页面的右上角有一个像小铅笔的按钮。...#11 静态博客 你可能已经知道你可以使用GitHub部署静态网页，这个部分我将告诉你用Jekyll（简单博客静态网站生成器）生成静态网页 非常简单，Jekyll会用漂亮的主题去渲染你的README.md...比如这个README页面（链接）: ? 点击设置，选择Jekyll主题。 ? 我将得到一个Jekyll主题的页面: ?...#12 用GitHub作为CMS(内容管理系统) 你有一个网站需要展示一些文本，但是你又不想把文本存成HTML。 您想将文本块存储在某个地方，而且可以很方便的编辑，且不需要开发。...说到颜色，我怎么容忍一个苍白的GitHub呢？ ? 插件组合： Stylish（这个插件允许你把主题应用到任何一个网站） 和 GitHub 黑色主题。
本文涉及知识点： HTML5。HTML5 是 HTML（超文本标记语言） 的最新标准。我们的示例网页是使用 HTML5 编写的。后续如果你想更好地理解使用的主题和进行主题自定义，也需要这方面的知识。...CSS3。CSS3 是 CSS 的最新标准。它用于控制网页样式和布局。后续如果你想更好地理解使用的主题和进行主题自定义，也需要这方面的知识。 Markdown。...（原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。Jekyll 还支持 Textile 文件，这里不做展开。） 阿里云。...在配置页面的 Theme Chooser 处可以选择自己喜欢的 Jekyll 主题，我现在使用的是 jekyll-theme-merlot。...设置主题后，GitHub 会在仓库自动提交保存 _config.yml 文件，内容： theme: jekyll-theme-merlot 六、设置主题 主题选择后，页面的标题和描述文字都是主题自带的，
目录一样 ├─ sass/ #css文件的源文件,过程中会compass成css ├─ plugins/ #放置自带以及第三方插件的目录,ruby程序 │ └── xxx.rb └─ source.../ #默认网站html相关文件,最底层 └─ _posts/ #新增以及从其它程序迁移过来的数据都存在这里 └─ stylesheets/ #css文件目录 └─ javascripts.../ #js文件目录 ② 一些配置内容 关于如何配置Octopress 关于如何创建新的page或者post以及本地预览 关于如何修改主题和默认的样式 Octopress支持的第三方主题下载和预览网站...关于侧边栏和主题的定制，添加新浪微博，多说评论，分类标签云等等 [注意，使用多说的话，shortname不是你的个人资料中的名称，而是新建的站点给定的！...④ 关于本地编写博客 对于Markdown编辑器，我觉得Mou可能不是最好的，但是，它是很精巧的！我简直爱不释手，希望之后能够在我的博客中实现数学公式的编辑，这样会很方便，哈哈 哦了，今天就到这里啦！
CI）这样看起来只解决了网站问题，但是HTML好像还是要自己做，别着急，继续向下看！...综上原因在我找主题和定制的时候，十分吃力。工具其二：VuePress一看到Vue，就知道，稳辣，全部都稳辣。没错，他就是Vue及其生态所构建的静态博客。...\test> bundle exec jekyll buildConfiguration file: D:/Github/test/_config.yml Source: D:/Github..._site 文件夹就是存放md转网页之后存放的位置接下来运行PS D:\Github\test> bundle exec jekyll sConfiguration file: D:/Github/test...... press ctrl-c to stop.http://127.0.0.1:4000/ 在没有具体指定的情况下会生成一个这样的地址这里默认使用的是minima 的主题，到这为止，都可以复制到刚才的
博客编辑页 下来我们对这四个页面的代码分别讲解. 2.博客列表页 blog-list.html: <!...100%是相对父元素来说高度是100%(和父元素一样高) 对于html标签来说,父元素就是浏览器窗口,浏览器窗口多高,html就多高 body的父亲是html 设置为100% 意思是body...和html一样高 此时,body和html的高度都是和浏览器窗口一样高的....此页中要引入集成Makedown编辑器，并不是从0开始写一个，而是使用现有的开源库editor.md Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io...-- 博客编辑器, 这里用 id 是为了和 markdown 编辑器对接, 而设置的 --> <textarea
我们知道，Github Page 默认支持的也是 Jekyll，而非 Hexo、Hugo等静态站点生成器。...由于本站目前是采用 Jekyll 来搭建的，所以为了提供给读者更加高效的阅读条件，笔者在廖柯杰大佬开发的 H2O 主题的基础上做了一些功能上的增加和优化，接下来就来详细介绍一下。...样式，可以直接访问以下地址下载： https://pygments.org/_static/pygments.css 不过也是可以引入其他主题的 CSS 样式的。...； 支持的高亮编程语言丰富，虽然在某些地方还是有所瑕疵，但是总体上还是很实用； 高亮主题基本上现有的都能用，本站所用的就是 Github 官方同款主题。 ...实现步骤主要就是两步，一是添加好 CSS 和 JS 文件引入，二是添加一个声明，如下所示： <!
hexo或者jekyll配合github pages 进行博客的搭建非常方便快捷，这两种方式都有不同的主题，上github上一搜一大片，hexo上手会比较快，自己的博客一开始也是用hexo+next搭建的...，后续发现了jekyll比较好的一个主题，所以换成了jekyll，大家可以参考一下。...CSS icon - 使用css写的icon，可以减少iconfont和图片所占的大小，其实主要是好玩，可以研究研究怎么写的 codepen - 在网页上快速写代码，可以免去打开编辑器去敲代码...、Markdown 与 HTML 互转、网页转为图片等，功能很强大，很适合前端 Octotree：可以在 github 上可以生成侧边栏更易查看 Wide Github：会将 github...Panda Theme 一个主题，比较护眼，熊猫主题 Path Intellisense 路径自动补充 ? SVG Viewer 可以在编辑器中查看 svg 图片 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
