这是背景图片

教程:在 Windos 上使用 Jekyll


安装 Jekyll

很顺利,没有想象中的那么难,可能是因为版本更新已经把问题都解决了吧。

第一步:安装环境

登录官网,下载安装包; 如果不知道下载那个好的话,可以按照页面右侧的推荐,选择“Ruby + Devkit 2.7.1-1(x64)”进行下载。

2021.03.25更新:推荐下载已更改为“Ruby+Devkit 2.7.2-1 (x64)”。

下载完成后,双击运行安装程序。执行默认安装,在“是否安装 MSYS2”界面时选择确认安装。

安装完成后会弹出新的对话框,提示“是否安装MYSY2”,按回车键执行默认安装;

等待安装完后,再按回车键,对话框会自动关闭。

至此,jekyll需要的环境就安装完成了。

第二步:安装 Jekyll

点击“开始菜单”,在“最近添加”一栏可以看到出现了一个新的项目“Start Command Prompt with Ruby”, 这就是我们以后要用来运行 Jekyll 的工具了;现在打开它,并运行以下命令:

gem install jekyll bundler  # 安装 Jekyll 和 bundler、gems

gem jekyll new myblog   # 建立站点“myblog”
    
cd myblog   # 转到站点目录
    
bundle exec jekyll serve(s)    # 运行站点

接着打开浏览器,输入网址 “http://localhost:4000” 就可以看到新网站了。

到此,Jekyll 的安装就完成了。

创建 Jekyll 主题

第一步:添加一篇文章

打开文章所在的文件夹 _posts,复制其中的示例文章,并重新命名。

文章命名遵循的格式为:年-月-日-标题.MARKUP;在这里,年是 4 位数字,月和日都是 2 位数字,扩展名则代表了这篇文章是用什么格式写的。

示例:

2020-07-23-how-to-use-jekyll-on-windows.md

回到浏览器刷新页面,会发现多了一篇同名文件,但路径却不相同;路径和我们文件名一致的就是我们新添加的文章了。

第二步:修改文章内容

修改文章标题

通过编辑器查看文章内容,我们可以发现在文章顶部发现存在这样的内容:

layout: post
title:  "Welcome to Jekyll!"
date:   2020-07-23 11:52:49 +0800
categories: jekyll update

这一部分内容称为 “YAML 头信息(YAML front- matter)”, 涉及到的变量大概有以下这些:

变量 描述
layout 指定使用的模板文件名称;该模板文件位于 _layouts 目录下。
title 文章标题
excerpt 文章摘要;默认设置下摘要为文章第一段的内容,推荐用一句话概括文章内容。
author 文章作者
date 文章日期。该日期会覆盖文章名字中的日期,这样就可以用来保障文章排序的正确。
日期的具体格式为 YYYY-MM-DD HH:MM:SS +/-TTTT ;这里的“时,分,秒和时区”都是可选的。
permalink 文章URL,设置后可覆盖默认的URL格式。
published 文章状态,设置 false 后可隐藏该文章。
category
categories
归属分类。若存在多个分类,则可以指定为YAML列表或相互之间用空格分隔开。
tag
tags
文章标签。若存在多个标签,则可以指定为YAML列表或相互之间用空格分隔开。

注1:以上变量都可以在网站根目录下的配置文件 _config.yml 中设置默认值,具体方法请参考文档《配置》

注2:
1. 对于变量 categoriestags,请参考这里《标签和类别》
2. tag(单数形式)后面的字符串,中间有空行也算是一个,示例:tag: classic hollywood,标签为“classic hollywood”。
3. tags(复数形式)后面的字符串,中间有空行则算为多个,示例:tags: classic hollywood,标签为“classic”和“hollywood”。

OK,现在我们已经了解了 “YAML 头信息(YAML front- matter)”的规则, 那么接下来就尝试改一下吧。修改如下:

layout: post
title:  如何在Windos上安装jekyll
date:   2020-07-23 13:05 +0800
categories: jekyll
tags:   jekyll

返回页面刷新一下看看,发现页面标题已经更改过来了。

修改文章内容

接下来是修改文章内容,当前是这个样子的:

修改日期,使其显示中文

说到这,咱们会发现网站当前目录下没有和模板相关的东西,那么要去哪里改呢?

答案:要去主题那里改。

建议:先复制一下原文件,然后再去修改;如忘记备份,可通过这里下载原版文件。

继续之前打开的命令行窗口,按照提示,使用快捷键 Ctrl+C 关闭服务器。

然后运行命令 bundle info --path minima (“minima”为当前使用的默认主题名称)得到当前主题的所在地址:C:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/minima-2.5.1。

参考文档:《覆盖主题默认值》

根据之前获得的信息(YMAL头信息),我们可以知道当前文章内容页使用的模板文件名是 post,存放于 _layouts 文件夹中;所以我们接下来要编辑的文件就是 “post.html”

其中关于“日期”的部分内容如下:

让我们修改一下:

运行命令 bundle exec jekyll s ,重新启动 Jekyll 服务,然后刷新浏览器,检查效果。

可以看到日期已经改过来了(就是日期和月份弄错了^_^)。那么接下来就按照自己想要的样子大刀阔斧的进行改造吧。

注1:相关使用和注意事项,请参考《官网文档》以及默认主题提供的范例。

注2:_layouts 目录下有个 default.html 文件可以看看。

修改 CSS 样式

  1. 参考上一步,修改页面结构:将模板文件覆盖到对应文件,并用 jekyll 的语法(直接搜索“ jekyll 语法”即可)替换相应部分的代码。
  2. 修改样式:将 css、js、img 等文件移动到相应的 _scss 和 assets 目录下,并在 “_includes/header.html” 中修正路径。
  3. 关于代码高亮,可以参考《高亮代码介绍》短名称列表
    1. 这个不是自动的,需要你先生成配置样式;然后手动添加到网站才能使用;
    2. 我这里没管它,直接复制一个喜欢的网站上的高亮样式,添加到网站上使用;
    3. 如果你没有喜欢的样式,可以点击这里查看默认的 rouge 样式有哪些。

最终成品如下:

卸载 jekyll

吐槽:百度搜到的一些文章的卸载命令是之所以不管用,是因为单词 uninstall 少了一个字母 n

# 正确的
gem uninstall jekyll

# 错误的
gem unistall jekyll

正文结束,如有错误或者遗漏请点击屏幕下方右侧的“发现错误”告诉我。