通过 jekyll 构建 github pages 博客实战笔记

jekyll 搭建教程

jekyll 搭建教程

Gem

安装 Ruby，请访问 下载地址。

Jekyll

Jekyll 是一个简单且具备博客特性的静态网站生成器。

Jekyll 中文文档

极客学院中文文档

使用以下命令安装 Jekyll。

$ gem install jekyll
1

在中国可能需要使用代理软件。然后，请等待并学习如何使用它。

或者，您可以使用 rails 替代 Jekyll。

如果您使用的是 Mac，请使用以下命令。

$ sudo gem install jekyll
1

• Git

您需要了解如何使用 Git。

Git 文档

In Windows

有时候工作需要，会使用 windows 系统。如果对于 blog 进行编辑，想看到效果十分麻烦。因此尝试在 windows 下安装 jekyll.

Install Ruby

一、Download

Download the fit installer for your computer;

二、Install

安装时勾选上 Add Ruby executables to your PATH;

三、Version

命令行输入如下

$ ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]
1
2

Install DevKit

一、Download

Download the fit installer for your computer;

选择匹配的软件。本次选择 DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe,
For use with Ruby 2.0 to 2.3 (x64 - 64bits only)

二、UnZip

下载并解压文件至路径如D:\Devkit下：

三、Run

$   cd d:\Devkit

[D:\Devkit]$ ruby dk.rb init
[INFO] found RubyInstaller v2.3.3 at D:/Ruby23-x64

Initialization complete! Please review and modify the auto-generated
'config.yml' file to ensure it contains the root directories to all
of the installed Rubies you want enhanced by the DevKit.
1
2
3
4
5
6
7
8

查看 config.yml 应该有如下内容

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
- D:/Ruby23-x64
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四、Review & Install

[D:\Devkit]$ ruby dk.rb review
Based upon the settings in the 'config.yml' file generated
from running 'ruby dk.rb init' and any of your customizations,
DevKit functionality will be injected into the following Rubies
when you run 'ruby dk.rb install'.

D:/Ruby23-x64

[D:\Devkit]$ ruby dk.rb install
[INFO] Updating convenience notice gem override for 'D:/Ruby23-x64'
[INFO] Installing 'D:/Ruby23-x64/lib/ruby/site_ruby/devkit.rb'
1
2
3
4
5
6
7
8
9
10
11

Install Jekyll

一、Ensure gem has install

[D:\Devkit]$ gem -v
2.5.2
1
2

二、Install jekyll

Problem

• Error: Permission denied - bind(2) for 127.0.0.1:4000

bind localhost:4000 failed

use

    $ netstat -ano
    $ tasklist /svc /FI "PID eq ${pid}"
1
2

pid is the result of thread who occupy localhost:4000; Use task manager to kill this thread;

• Please add the following to your Gemfile to avoid polling for changes:
  gem ‘wdm’, ‘>= 0.1.0’ if Gem.win_platform?

gem ‘wdm’, ‘>= 0.1.0’ if Gem.win_platform?

I have tried times, but also failed. Luckily, jekyll is still work well.

• jekyll-paginate

Configuration file: /Users/houbinbin/blog/houbb.github.io/_config.yml
  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
jekyll 3.1.3 | Error:  jekyll-paginate
1
2
3

solve method.

$ sudo gem install jekyll-paginate

1
2

• 谷歌文件加载慢

fonts.googleapis.com加载慢解决办法

我是直接将semantic引用此文件的地方注释掉了。

TOC

TOC

把这个添加到文件中，就可以生成目录。

* any list
{:toc}
1
2

分页

base page zh_CN

最多页数限制

分页功能插件使得 paginator liquid 对象具有下列属性：

Search

nice query

SEO

掌心 SEO

Rang SEO

优化 jekyll 站点的 SEO 技巧

博客写好之后，直接搜索基本搜索不到。

双边括号

特殊符号，比如使用 vue 学习的时候，就会用到双边花括号，但是这个是 jekyll 的内置符号。

解决方案如下：

{% raw %}
{% comment %} 这里是各种包含奇怪花括号 {{{0}}} 的地方 {% endcomment %}
{% endraw %}
1
2
3

TODO

文章置顶

has done!

多说

sitemap

• 报错

$ gem install jekyll-sitemap
ERROR:  Could not find a valid gem 'Jekyll-sitemap' (>= 0), here is why:
          Unable to download data from https://gems.ruby-china.org/ - bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz)
1
2
3

• 解决

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
1

日志

https://gems.ruby-china.com/ added to sources
source https://rubygems.org/ not present in cache
1
2

• 重新执行

sudo gem install jekyll-sitemap
1

日志

Fetching: jekyll-sitemap-1.2.0.gem (100%)
Successfully installed jekyll-sitemap-1.2.0
Parsing documentation for jekyll-sitemap-1.2.0
Installing ri documentation for jekyll-sitemap-1.2.0
Done installing documentation for jekyll-sitemap after 0 seconds
WARNING:  Unable to pull data from 'https://gems.ruby-china.org/': bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz)
1 gem installed
1
2
3
4
5
6
7

google/baidu 收录

• 查看

site:https://houbb.github.io/
1

如果提示说：找不到和您查询的“site:https://houbb.github.io/”相符的内容或信息，说明未被收录。

如果搜索结果中你第一眼就看到了你的博客站点，说明已被收录，不用再继续看下面的内容了。

博客书写规范和心德

写了大概3年多的博客，回首看收获了很多。

为了以后博客的更好管理，规定如下标准。

标题标准

时间：2022-05-29

发现 search 无法工作，debug 发现标题如果出现 "，会导致 json 的解析失败。

url

统一采用:

yyyy-MM-dd-${category}-${order}-name-${order}.md
1

所有名称统一使用小写的形式。

所有同一个类型的博客，放在一起形成一个系列。

除非确定一定不会扩展的内容，建议还是学习所有的知识都是从 00-overview 开始。

tag

常见的 tag 规定如下：

overview  概览
quick-start 快速开始
why-so-fast 为什么速度这么快
why-choose 为什么选择这个技术
project-architecture 项目架构
in-action 实战
summary 总结
sh 新知识(stay-hungry)
sf 旧知识(stay-foolish)
1
2
3
4
5
6
7
8
9

技术分类则根据实际需要

一遍文章的行文

作为技术文章，建议有以下几个部分：

1. 开篇：介绍技术的背景，实际的业务场景

2. 概念理论：

3. 实战测试：

4. 拓展发散：

5. 总结归纳：

参考资料

• seo

http://vdaubry.github.io/2014/10/21/SEO-for-your-Jekyll-blog/

https://crispgm.com/page/48-tips-for-jekyll-you-should-know.html

Jekyll自动生成站点地图

如何让谷歌和百度搜索到自己GitHub上的博客

• Jekyll SEO Tag

https://github.com/jekyll/jekyll-seo-tag

• sitemap

http://faso.me/notes/2013/07/27/jekyll-sitemap-without-plugin/index.html

• ruby

https://www.jianshu.com/p/60f3707cb3ce?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

GitHub 博客-- Jekyll–代码高亮，Liquid 转义字符