Jekyll静态网站的维护

Published: July 17, 2017 by fan (Last updated: 2017-08-04)

Categories:
Server 5

Jekyll维护

Jekyll维护

Jekyll网站内容维护的学习路线：

了解网站目录
学习如何编写和发布文章(Post帖子)
学习如何使用草稿

Jekyll网站功能维护涉及到的内容：

配置评论
配置分享按钮
使用Rake
自行编码实现tag和Category

内容基本来自Jekyll中文网站的文档。这里只是介绍学习步骤。

补充：另发现了一个不错的教程 Jekyll开发中文手册-极客学院Wiki

一些基本概念，在此了解：搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门

YAML 语言教程
YAML 是专门用来写配置文件的语言，非常简洁和强大，远比 JSON 格式方便。

Jekyll网站目录结构

参考：目录结构

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site
├── .jekyll-metadata
└── index.html

进阶：48 个你需要知道的 Jekyll 使用技巧 - David Zhang

post相关

撰写博客 - Jekyll • 简单静态博客网站生成器

_post目录下可以新建子目录，不会产生负面影响。

使用草稿

草稿是没有日期的文章。它们是你还在创作中而暂时不想发表的文章。想要开始使用草稿，你需要在网站根目录下创建一个名为 _drafts 的文件夹。

为了预览你拥有草稿的网站，运行带有 --drafts 配置选项的 jekyll serve 或者 jekyll build。此两种方法皆会将该草稿的修改时间赋值给草稿文章，作为其发布日期，所以你将看到当前编辑的草稿文章作为最新文章被生成。

Front Matter 头信息

Front Matter 被翻译成了"头信息"

头信息 - Jekyll • 简单静态博客网站生成器
 Front Matter - Jekyll • Simple, blog-aware, static sites

一个头信息：

---
layout: post
title: "A Full and Comprehensive Style Test"
description: "Test post for style"
date: 2016-08-15
tags: [test, style]
comments: true
share: true
category: 单个分类
---

多个分类: 如果在固定链接中包含了:category，那么多个分类会产生多级目录。

categories: [test, sample]

Sample Link Post 简单的链接帖

下面就是整个post的内容，它仅仅表示一个链接。当点击标题查看该post时就会进入相关链接页面。

---
layout: post
title: Sample Link Post
description: "This theme supports link posts, made famous by John Gruber. To use, just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done."
tags:
  - sample post
  - link post
comments: true
link: 'http://aweekj.github.io/Kiko-plus'
---

配置Disqus评论

注册Disqus账号，选择将Disqus安装到网站。

。。。之后平台选择 Jekyll，然后就会提供相关方法：只需要将comments: true添加到Front Matter，

1.Add a variable called comments to the YAML Front Matter and set its value to true. A sample front matter might look like:

---
layout: default
comments: true
# other options
---

2.In between a and a tag, copy and paste the Universal Embed Codein the appropriate template where you'd like Disqus to load.

Note: Comments can be disabled per-page by setting comments: false or by not including the comments option at all

如果你的jekyll主题支持Disqus，则替换_config.yml文件中的id值：

# Disqus
disqus:
id:               "你的用户名"

有些主题配置Disqus的方式不同：

disqus:
  shortname: 
  public_key:

Shortname: Your website shortname is fandean.

This is used to uniquely identify your website on Disqus. It cannot be changed.(Shortname用于在Disqus中唯一标识你的网站，且不可更改)

What's a shortname?

public_key: 类似于 SqM3TGVGvUM6YB1GRlHE7j5VHN6bjcls9BFqdrcY0ks4yippJEUsNtHuVY8fm6fu (该Key已被改动)

pathawks/jekyll-disqus-comments: A system for syncing Disqus comments to Jekyll

在此页面查看或创建公钥：API - Disqus

另一个评论工具

HyperComments

效果展示：用GitHub+Jekyll搭建个人博客

配置addthis的分享按钮

AddThis - Get more likes, shares and follows with smart website tools

分享按钮的样式有多种，并且很美观：比如 Floating、Inline、Expanding、Banner。

<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595fc12cbd5b5138"></script>

your Profile ID: ra-595fc12cbd5b5138

Jekyll 添加 tag 或 Category

tag：标签； category：分类

Tags In Jekyll

Use Tags and Categories in your Jekyll based Github Pages without plugins · Codinfox

深入 Jekyll - David Zhang

使用Jekyll在Github上搭建个人博客（文章分类索引） - 说学逗唱 - SegmentFault

使用Rake生成Jekyll文章模板

Rake让Jekyll写博更优雅 - 晚晴幽草轩

以Rake一键生成Jekyll文章模版，一键预览效果，一键发布等等；Rake让Jekyll写博更优雅。

如果使用VS Code还可使用相关插件来生成文件头部的 Front Matter 头信息

Jekyll页面无法正常显示的各种问题

特殊符号的问题

| 引发的血案：

由于在md文件中大量使用了 右键该项目 | 添加新项 | 选择“文本文件”这种形式的语句表示操作步骤，导致jekyll解析错误，页面无法正常显示。

还有一次是在表格中使用了

session="true|false"

标题问题

仅使用 Alt + /作为标题，也导致解析错误，页面无法正常显示。

图片问题

为图片添加说明会导致页面无法正常显示，示例：

![](https://emojipedia-us.s3.amazonaws.com/thumbs/160/google/80/party-popper_1f389.png "添加说明")

图片不能显示在下一行：

在本地时，有时有问题，有时又没有问题。真正部署到Github 上再验证。

Party Popper emoji on Google Android 7.1：     

![](https://emojipedia-us.s3.amazonaws.com/thumbs/160/google/80/party-popper_1f389.png)

表格显示不正常

状态码用于表示服务器对请求的处理结果，它是一个三位的十进制数。响应状态码分为5类：  
| 状态码     | 含义                                       |
| :------ | :--------------------------------------- |
| 100~199 | 表示成功接收请求，要求客户端继续提交下一次请求才能完成整个处理过程 |

修改：加一个空行

状态码用于表示服务器对请求的处理结果，它是一个三位的十进制数。响应状态码分为5类：  

| 状态码     | 含义                                       |
| :------ | :--------------------------------------- |
| 100~199 | 表示成功接收请求，要求客户端继续提交下一次请求才能完成整个处理过程 |

使用了不支持的语法

```seq

```

标题和内容之间最好有空行

这个不确定

hh:mi:ss

改为

`hh:mi:ss`

Jekyll 维护起来真的很烦，特别是在导入的文章大量不能正常显示的情况。而且有时更改了文章，还必须重新启动服务才有反应。

Kramdown配置

Jekyll kramdown配置 - JavaChen Blog

将 GitHub Pages 从 Redcarpet 切换到 kramdown — 码志

Jekyll配置Markdown代码高亮

Syntax kramdown

kramdown和markdown较大的差异比较

脚注

示例：

This page was generated by GitHub Pages using the Cayman theme by Jason Long. 【Droidplugin by DroidPluginTeam 】

Jekyll主题中使用开源库

这里只是作为一个小白看到 Jekyll 主题中可以使用开源库而感到开心。

比如：jekyll-clean-dark主题，使用了下面的开源库:

This theme includes the following files :

js/bootstrap.min.js - bootstrap
css/bootstrap.min.css - bootstrap
js/jquery.min.js - jquery