创建Jekyll个人博客

利用Github Pages和Jekyll创建个人博客, 你值得拥有!

Posted by Chopong on May 2, 2019

Table of Contents

创建Jekyll个人博客

一. 申请github帐号

  1. 点击Github, 进行注册(sign up);

  2. 新建仓库(repository), 仓库名为xxx.github.io一般为人名, 正常情况下, 你的博客主页为xxx.github.io, 注意, 如果名称较短, 或者重复, 再或者你的起名方式不符合上面的模式, 你的博客地址将会出奇的长.

  3. 点击右侧的Settings, 找到github pages选择你希望的主题, 结束.

二. 本地运行Jekyll

  1. Jekyll依赖Ruby Gem, 所以如果你需要安装的话, 请先安装ruby.

         sudo apt install g++ ruby ruby-dev

  2. 由于国内网络问题, 使用ruby请换gem国内源

         [sudo] gem sources -l
     [sudo] gem sources --remove http://rubygems.org/
     [sudo] gem sources -a http://gem.ruby-china.com
     [sudo] gem sources -a https://mirrors.tuna.tsinghua.edu.cn/rubygems/

    更新

         [sudo] gem update --system

  3. 安装Jekyll

         [sudo] gem install jekyll jekyll-paginate jekyll-sitemap jekyll-seo-tag

  4. 使用Jekyll

         jekyll doctor
     jekyll server

  5. 在浏览器打开 localhost:4000

三. 创建Jekyll网页

1. 文件框架

文件\文件夹 注释
index.html 主页
_config.yml Jekyll配置文件
_includes 文章资源
_layouts 文章页框架
_posts 文章内容, 必须以日期开头
feed.xml 订阅

2. 深入理解Jekyll

  1. _layouts

    该目录下的页面是”包含”其它内容的关系, 一般是页面框架.

  2. _includes

    该目录下的片段是 “被包含” 的关系, 可以是任何格式的文件, 片段也可以include片段. include的语法: { % include head.html % }

    _layouts和_includes与普通页面的关系图：

    关系图

注意: default.html里访问index.html生成的内容是直接访问content, 而不是page.content或post.content, 这两者的关系大概是前者才是经过处理后的html片段, 而后者是原始的文本, 包含未解析的liquid语法.

  1. _config.yml

    Jekyll站点的配置文件, 可以存储数据, 用于配置Jekyll的插件和运行环境

  2. 创建页面

    • 方式一, 创建xxx.html, 访问地址为/xxx.html

    • 方式二, 创建xxx/index.html, 访问地址为xxx, 没有后缀

  3. Yaml头信息

    每个页面都可以有自己的信息, 覆盖Jekyll和_config.yml的值

---
layout: post
title: 创建Jekyll博客
categories: jekyll github markdown
date: 2019-04-22 20:34:05
---

  1. site变量

    来自_config.yml配置文件和Jekyll内置变量,下面是常用的属性:

变量 解释
site.posts 从新到旧排序的posts文章列表集合
site.category 以目录分类的文章列表
  Map{cate1:[post1, post2], cate2:[post3, post4]}
site.tags 同上，以tags分类的文章列表
  Map{tag1:[post1, post2], tag2:[post3, post4]}
site.XXX _config.yml配置文件中XXX: val的值

  1. page变量

    指代当前页面的变量, 在index.html里使用page, page指的就是index.html这个页面, 常用属性:

变量 注释
page.content 页面源码(含有markdown/liquid等语句)
page.title 页面标题
page.excerpt 页面摘要源码, 可通过_config.yml配置摘要算法
page.url 页面的相对路径
page.date 页面的时间和日期
page.categories 页面的categories数组, /_posts/ruby.md文章
  会把linux和ruby加入categories，和上面的site.categories不同!
page.tags 页面的tags数组
page.path 页面的实际路径(源码路径)

3. liquid语法

Jekyll内变量操作是使用Liquid语法, 主要有：

1). 显示变量的值 : { { 变量名 } }

如果要组成字符串, 可以这样：”字符串头部{ { 变量名 } }字符串尾部”, 也可以使用Filter：{ { "字符串头部" | append : 变量名 | append : "字符串尾部" } }, 如, 显示文章的标题：{ { page.title } }

2). 使用变量的值进行计算

文章的标题计算 { % assign titleAndDate = page.title | append: page.date % }, assign x = y是声明一个变量并赋值, 声明必须赋值！xxx | append: "str"是Liquid语法中的Filter, 可以理解为管道, 也可以简单理解为对象 方法: 参数, `Filter可以连续执行：xxx append: “str1” append: “str2”**

3). if语句

    { % if site.title == "" % }
    { % assign title = "A" % }
    { % elsif site.title == "stepbystep" % }
    { % assign title = "B" % }
    { % else % }
    { % assign title = "C" % }
    { % endif % }

4). for语句

    { % for post in site.posts % }
    { % assign title = post.title % }
    The post title is { { title } }
    { % endfor % }

5). 访问map的key和value

像site.categories其实是一个map，访问分类是linux的文章集合有两种方式:

  • 方式一: site.categories.linux即是分类为linux的posts列表

  • 方式二: for cate in site.categories, cate[0]是linux, cate1是posts列表

注意：如果{ % % }里面的是语句，一行只能有一个而不能有多个

4. 小结

至此, Jekyll的使用, Liquid的语法已经讲述, 接下来就是动手完成自己的主题, 以下是一些点:

  • 加入html, css, js等需要的文件

  • 提取相同的内容到_includes目录

  • 需要复用的页面框架, 比如post文章页, 放到_layouts目录

  • 一些配置字符串, 放在_config.yml文件内

  • 使用Liquid语法在页面中访问site, page等信息组织内容

  • 调整html页面标签的css定制自己的Markdown样式

  • 调整语法高亮的css定制自己的语法高亮颜色值

  • 你可能需要一个MarkdownDemo来测试站点的样式

四. 将Jekyll提交到Github

  1. 其实这一步非常简单, 只需要将上面的所有文件全部上传到github下你在第一步新建的仓库即可.

  2. 如果想更方便的管理, 请查看博客: 使用git.

五. 参考资料