文章目录

  • 1. 前言
    • Ruby
    • Gems
    • Gem命令
    • Bundler
    • 修改gem镜像源
  • 2. jekyll是啥?
    • 2.1 安装 Jekyll
    • 2.2 运行 Jkeyll
    • 2.3 Liquid
    • 2.4 头信息(front matter)
    • 2.5 布局(Layouts)
    • 2.6 index 页面
    • 2.7 about 页面
    • 2.8 includes
    • 2.9 数据文件(Data files)
    • 2.10 Assets
    • 2.11 Sass文件
    • 2.12 博客文件
    • 2.13 Collections
    • 2.14 Jekyll 主题
      • 基于Gem的主题
  • 3. 配置自己的 Jekyll 站点
  • 参考文献

1. 前言

在使用GitHub Pages的时候,了解到有 Jekyll 这个东西,是一个静态站点生成器,用来做写博客是很好的。

在学习jekyll 之前,需要了解 RubyGemsGem命令Bundler

Ruby

Ruby 是一种纯粹的面向对象编程语言。它由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)创建于1993年。

Gems

Gems 可以理解为Ruby的库。

Gem命令

gem 命令是 Ruby语言中的包管理器。gem命令用于构建、上传、下载以及安装Gem包,,可以认为类似于 Pythonpip

# finding gems
gem search <gems>
# installing gems
gem install <gems>
# listing installed gems
gem list
# uninstalling gems
gem uninstall
# viewing documentation
gem server
# downloading gems without install
gem fetch <gems>
# unpacking installed gems
gem unpack

Bundler

使用 Bundler 来安装 Gemfile 文件中的gems。
Gemfile 中列出了你的站点所需要的gems。格式如下:

source "https://rubygems.org"gem "jekyll"group :jekyll_plugins dogem "jekyll-feed"gem "jekyll-seo-tag"
end

首先,用gem命令安装 Bundler

gem install bundler

然后,用 Bundler 安装 Gemfile 中的 gems

# 安装gems
bundle install
# 使用Gemfile文件中的gems的版本来创建站点
bundle exec jekyll serve

修改gem镜像源

原文请看 Ruby Gems 镜像

# 查看现在的gem源
gem sources
# 移除gem源
gem sources --remove https://rubygems.org/
# 添加新的gem源
gem sources -a https://mirrors.aliyun.com/rubygems/

2. jekyll是啥?

Jekyll 是一个静态站点生成器,内置 GitHub Pages 支持和简化的构建过程。它是一个 Ruby 项目 Jekyll 使用 Markdown 和 HTML 文件,并根据您选择的布局创建完整静态网站。 Jekyll 支持 MarkdownLick,这是一种可在网站上加载动态内容的模板语言。

您可以通过编辑_config.yml文件来配置大多数 Jekyll 设置,例如网站的主题和插件。

Jekyll 的一大特点 是没有用数据库,所有的数据就是存放在对应的目录中,所以也 不太适合用来做大型网站,但是用来做自己的博客网站就搓搓有余了。

2.1 安装 Jekyll

# 安装 jekyll 和 bundler
gem install jekyll bundler
mkdir myblog && cd myblog
# 为当前项目创建一个Gemfile文件
bundle init
# Gemfile 文件末尾加入一行
gem "jekyll"

Jekyll站点的基础目录结构如下:

.
.
├── _config.yml
├── _data
│   └── members.yml
├── _drafts
│   ├── begin-with-the-crazy-ideas.md
│   └── on-simplicity-in-technology.md
├── _includes
│   ├── footer.html
│   └── header.html
├── _layouts
│   ├── default.html
│   └── post.html
├── _posts
│   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
│   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
│   ├── _base.scss
│   └── _layout.scss
├── _site
├── .jekyll-metadata
└── index.html # can also be an 'index.md' with valid front matter

2.2 运行 Jkeyll

# 构建站点并将静态站点输出到名为_site的目录
jekyll build
# 运行web服务器
jekyll serve

Jekyll 使用的模板语言是Liquid,下面是对liquid的一点介绍。

2.3 Liquid

Liquid 是一种模板语言,它具有三个主要部分:objects(对象),tags(标签)和filters(过滤器)。

objects告诉Liquid输出什么内容。用双大括号表示。{{ xxx }}。如:{{ page.tile }}

tags(标签)实现了模板的逻辑和控制,用 {% xxx %}表示。

filter (过滤器)更改 Liquid 对象的输出。用 | 分隔。例如:{{ "hi" | capitalize }}

2.4 头信息(front matter)

头信息是YAML中位于文件顶部的两个三点划线之间的片段。头信息用于设置页面变量,例如:

---
my_number: 5
---

那么如何使用这个变量呢?

{{ page.my_number }}

下面让我们用 头信息 来修改 标题。

---
title: Home
---
<!doctype html>
<html><head><meta charset="utf-8"><title>{{ page.title }}</title></head><body><h1>{{ "Hello World!" | downcase }}</h1></body>
</html>

请注意,为了让Jekyll处理您页面上的所有 Liquid 标签,您必须在开头包含

在文件开头加上 头信息(可以是空的)是告诉 Jekyll ,它需要处理这些文件。

---
---

2.5 布局(Layouts)

布局包裹xx的模板。 Layouts 在项目根目录下的 _layouts 的目录中。

项目根目录/_layouts/default.html

<!doctype html>
<html><head><meta charset="utf-8"><title>{{ page.title }}</title></head><body>{{ content }}</body>
</html>

可以看到在 项目根目录/_layouts/default.html 中有两个变量(用 {{ }} 表示),page.title 是从头信息(front matter)中设置的,表示的是页面的标题。content 是使用本 layout.md.html 文件的内容(除掉头信息)

2.6 index 页面

项目根目录/index.html

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

实际上是:

---
layout: default
title: Home
---
<!doctype html>
<html><head><meta charset="utf-8"><title>{{ page.title }}</title></head><body><h1>{{ "Hello World!" | downcase }}</h1></body>
</html>

2.7 about 页面

---
layout: default
title: About
---
# About pageThis page tells you a little bit about me.

http://localhost:4000/about.html 就可以看到 about页面的内容了。

2.8 includes

按照上面操作页面也都能显示,但是有个问题是无法在页面之间导航。 所以需要用到 includes

导航(navigation)应该在每个页面中都有,所以应该将加到 layout中。

通过 include 标签,我们可以在当前文件中使用 _includes 目录中的文件内容。

使用 include

添加了一个Home页面和About页面的导航。

<nav><a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>Home</a><a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>About</a>
</nav>

2.9 数据文件(Data files)

数据文件位于 _data 目录。

将数据和逻辑分离。

_data/navigation.yml

- name: Homelink: /
- name: Aboutlink: /about.html

其他文件可以使用 _data 目录下的文件中的数据。使用方法如下:
在文件 _includes/navigation.html中。

<nav>{% for item in site.data.navigation %}<a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>{{ item.name }}</a>{% endfor %}
</nav>

2.10 Assets

CSS, JS, images 等文件都放在 assets 目录中。
目录结构如下:

.
├── assets
│   ├── css
│   ├── images
│   └── js
...

2.11 Sass文件

是对CSS文件的扩展。具体请看 Jekyll 官方文档吧。Jekyll—assets 文档

2.12 博客文件

博客文章都在 _posts 目录下。文章有特殊的格式要求:年-月-日-文章名.md 或者 年-月-日-文章名.html
只要在该目录下按照规则创建 .md.html 文件,就是写出了一篇博客。

post.url 本篇博客文章的url
post.title 本篇博客文章的title
post.excerpt 本篇博客文章的一个片段,默认为第一段落。

2.13 Collections

Collections与 博客文章类似,不同之处在于 Collections 不用按日期分组。

_config.yml 文件中:

collections:authors:output: true

表示 将 _authors 目录看做一个集合(_config.yml配置文件中 collection 对应的目录是 _collection_name

2.14 Jekyll 主题

有基于Gem的主题,也有远程主题。

基于Gem的主题

在使用基于Gem的主题时,站点的许多目录(如:assets, _layouts, _includes_sass )是存储在主题gem包内的,对外不可见。但,Jekyl 会自动使用。

当主题更新后,在项目根目录中使用如下命令更新主题相关文件。

bundle update

定位主题的gem位置

bundle info --path 主题

3. 配置自己的 Jekyll 站点

我在配置自己的 Jekyll站点时出了一些问题。

我是用的是 minimal-mistakes-jekyll 这个主题,这个主题的功能有很多,按着自己需要的来配置就行。

最尴尬的是配置好了,pushGitHub 之后不能用,显示一块白板。同时我的邮箱提示新邮件,发现是这个主题 GitHub 并不能直接使用,后来就直接将这个主题 fork 了过来,直接在上面进行修改,累死我了。

参考文献

[0] 阮一峰-搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门
[1] minimal-mistakes-jekyll 主题文档
[2] 使用 GitHub, Jekyll 打造自己的免费独立博客
[3] Jekyll 官方文档
[4] Ruby Gems 镜像

对Jekyll的初步了解相关推荐

  1. 搭建ruby + jekyll + github pages

    端午节,花了2天时间学习了下ruby + jekyll + github pages,踩过不少坑,记录下学习笔记. ruby建议是在linux环境下安装的,但是工作电脑是windows比较常见,下面记 ...

  2. 使用Jekyll + GitHub 搭建自己的博客

    中文文档:http://jekyllcn.com 或 https://www.jekyll.com.cn/ 英文文档:https://jekyllrb.com/ 什么是Jekyll?   Jekyll ...

  3. 20年3月27日,Github被攻击。我的GitPage博客也挂了,紧急修复之路,也教会你搭建 Jekyll 博客!

    小傅哥 | https://bugstack.cn 沉淀.分享.成长,专注于原创专题案例,以最易学习编程的方式分享知识,让自己和他人都能有所收获.目前已完成的专题有:Netty4.x实战专题案例.用J ...

  4. Jekyll搭建个人博客 韩俊强的博客

    之前写了一篇HEXO搭建个人博客的教程获得了很好评,有很多读者主动给我打赏,在此感谢. 如果你看过我的文章会发现我现在的博客样式跟之前是有很大的区别的,之前我也是使用 HEXO 搭建的博客,后来发现使 ...

  5. github+jekyll 搭建博客最全教程(一次性完成)

    介绍 Jekyll 是一个简单的博客形态的静态站点生产机器.它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的 ...

  6. Welcome To Jekyll

    博客原文:http://huangyanxiang.com/2017/09/20/welcome-to-jekyll.html 欢迎来到Jekyll, 本文将带你初步领略Jekyll的风采. Jeky ...

  7. Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss

    错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...

  8. TensorRT 7.2.1开发初步

    TensorRT 7.2.1开发初步 TensorRT 7.2.1开发人员指南演示了如何使用C ++和Python API来实现最常见的深度学习层.它显示了如何采用深度学习框架构建现有模型,并使用该模 ...

  9. SOC,System on-a-Chip技术初步

    SOC,System on-a-Chip技术初步 S O C(拼作S-O-C)是一种集成电路,它包含了电子系统在单个芯片上所需的所有电路和组件.它可以与传统的计算机系统形成对比,后者由许多不同的组件组 ...

最新文章

  1. SharePoint 2007 安装与配置
  2. oracle12c安装卡住_windows上安装oracle 12c到69%时卡住不动解决方案
  3. 林鹏:解析P2P金融安全风险
  4. Java集合入门总结
  5. DCMTK:全局类型和常量定义
  6. Oracle的AWR报告分析
  7. Qt中对main.cpp的代码解释
  8. Redis中的管道有什么用?
  9. Java Web入门之tomcat数据库连接池
  10. [svn] 解决SVN冲突攻略(手册)
  11. 教你用命令行扩展VHD的大小
  12. 请教各位前辈一个问题。
  13. UVALive 6181
  14. 【windows10】CMD命令行隐藏窗口运行
  15. 【视频插帧】XVFI: eXtreme Video Frame Interpolation
  16. python怎么创建窗口_python如何设计窗口
  17. 关于RabbitMQ连接不上None of the specified endpoints were reachable的几个原因
  18. SSM框架与Springboot框架的区别
  19. [BZOJ3698]XWW的难题(有源汇上下界最大流+讲解)
  20. “21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)

热门文章

  1. 分享一个挺不错的Git视频教程
  2. html文件用ppt打开,Win10如何打开html文件课件.ppt
  3. 电脑饥荒服务器未响应,《饥荒》联机版常见问题及解决方法一览
  4. 刷题记录--1bit与2bit字符
  5. JVM的一些总结(面试须知)
  6. 数据库连接池怎么用?
  7. 策划好一场活动的要点和方法有哪些?
  8. 心物各东西:基因,文化和心灵
  9. ArcMap批量等分割线流程
  10. Svelte-Ui-Admin基于svelte-ui中后台管理系统|Svelte3+Vite3后台框架