本文旨在记录Jekyll配置的全过程

环境配置

要求环境

  • NodeJS
  • Ruby (2.4.0或者更高)
  • RubyGems

安装过程

安装NodeJS

首先安装 NodeJS ，由于NodeJS版本较多，考虑到版本切换和配置复杂，这里先安装NodeJS版本管理器NVM。

  1. 下载并运行脚本：

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

  2. 添加环境：

    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

  3. 重新载入环境

    source ~/.bashrc

  4. 验证安装

    command -v nvm

然后再安装NodeJS

  1. 安裝最新版的 Node.js

    nvm install node

  2. 或者安装指定版本的 Node.js

    nvm install 6.14.4 # 安装Node 6.14.4版本

  3. 测试 Node.js

    node -v

安装Ruby

  1. 安装 Ruby (RubyGem集成在Ruby内)

    sudo apt-get install ruby-full build-essential zlib1g-dev

  2. 配置 RubyGem 安装路径（避免以root用户安装）

    echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
    echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
    echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc

  3. 重新载入环境

    source ~/.bashrc

至此 Jekyll 依赖的环境配置完毕。

安装Jekyll

  1. 安装 Jekyll 和 bundler gems.

    gem install jekyll bundler

  2. 测试 Jekyll

    jekyll help

至此 Jekyll 安装完成。

新建一个Jekyll网页

  1. 建立一个新的 Jekyll 网页，并且保存在目录./myblog下

    jekyll new myblog

  2. 进入目录./myblog

    cd myblog

  3. 编译网页并且创建一个本地网页服务器用于测试

    bundle exec jekyll serve

  4. 在浏览器中输入http://服务器IP:4000就可以预览页面

进阶

目录结构

首先要了解 Jekyll 网站的目录结构，具体的的配置信息请参考https://www.jekyll.com.cn/docs/structure/

.
├── _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        # 主页

如果你像我一样懒，不太想去研究HTML、CSS、JS之类的，我们大可直接下载个模版来修改，只要注明引用出处就好了。这里我借用了黄玄大佬的模版https://github.com/Huxpro/huxpro.github.io/ 。

我们把他的模版Clone下来，然后去修改_config.yml内的各种参数就可以使用了。附上我自己的_config.yml供参考。

# Site settings
title: Road's Blog
SEOTitle: Road's Blog | 生活日常：好物、装机、diy、黑苹果、mini主机 | 这里是 @大马路叫Road 的个人博客，与你一起发现更大的世界。
header-img: img/home-bg.jpg
email: malu@road001.cn
description: "生活日常：好物、装机、diy、黑苹果、mini主机 | 这里是 @大马路叫Road 的个人博客，与你一起发现更大的世界。"
keyword: "马路, @大马路叫Road, Road‘s Blog, 博客, 个人网站, 好物, 装机, diy, 黑苹果, mini主机, Hackintosh, macOS"
url: "https://blog.malu.tech"              # your host, for absolute URL
baseurl: ""                             # for example, '/blog' if your blog hosted on 'host/blog'

# Publish posts or collection documents with a future date.
future: true

# SNS settings
RSS: false
weibo_username:     superlulula
zhihu_username:     ma-lu-58
github_username:    Road-tech
facebook_username:  malu.tech
linkedin_username:  路-马-8ab580116

# Build settings
# from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead.
highlighter: rouge
permalink: pretty
paginate: 10
exclude: ["less","node_modules","Gruntfile.js","package.json","README.md","README.zh.md"]
anchorjs: true                          # if you want to customize anchor. check out line:181 of `post.html`
# If you have timezone issue (e.g. #68) in China, uncomment to use this:
#timezone: CN  

# Gems
# from PR#40, to support local preview for Jekyll 3.0
# make sure you have this gem installed
# `$ gem install jekyll-paginate`
plugins: 
  - jekyll-paginate
  - jekyll-sitemap

# Markdown settings
# replace redcarpet to kramdown,
# although redcarpet can auto highlight code, the lack of header-id make the catalog impossible, so I switch to kramdown
# document: http://jekyllrb.com/docs/configuration/#kramdown
markdown: kramdown
kramdown:
  input: GFM                            # use Github Flavored Markdown !important
  syntax_highlighter_opts:
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

# Disqus settings
disqus_username: blog-malu-tech

# Netease settings
#netease_comment: false

# Analytics settings
# Baidu Analytics 
ba_track_id: 

# Google Analytics
ga_track_id: ''            # Format: UA-xxxxxx-xx
ga_domain: malu.tech

# Sidebar settings
sidebar: true                           # whether or not using Sidebar.
sidebar-about-description: "喵喵喵？<br>Miao？"     # For the next quantum leap<br>离开世界之前，一切都是过程"
sidebar-avatar: /img/100.png      # use absolute URL, seeing it's used in both `/` and `/about/`

# Featured Tags
featured-tags: true                     # whether or not using Feature-Tags
featured-condition-size: 1              # A tag will be featured if the size of it is more than this condition value

# Progressive Web Apps
chrome-tab-theme-color: "#000000"
service-worker: true

# MathJax rendering for layout:page (e.g. post preview)
page-mathjax: false

# Friends
# friends: [
#     {
#     #     title: "Su",
#     #     href: "http://su.gallery/"
#     # },{
#         title: "乱序",
#         href: "http://mida.re/"
#     },{
#         title: "Sherry Wu",
#         href: "https://xuechundesign.github.io"
#     }
# ]

安装插件

如果是直接套用大佬们的模版，那常用的插件一般都会集成了。但是如果想要安装额外的插件，如我想安装jekyll-sitemap来方便Google来抓取我的网页：（安装的方法有很多种，这里介绍一种）

  1. 在 Gemfile里添加gem 'jekyll-sitemap'

  2. 编辑_config.yml文件，在plugins:项目里添加插件：

    #_config.yml
    plugins: 
      - jekyll-paginate
      - jekyll-sitemap   #新添加的插件

  3. 然后执行bundle install即可完成安装。

编写博文

上文可知_posts目录下面是存放发布的文章的，Jekyll对格式有两个要求：

  1. 文章的文件名需要按照YEAR-MONTH-DAY-title.md进行命名。

  2. 文字开头必须包含YAML信息块。在YAML信息块要包含layout，标题，副标题，日期等信息。部分插件也需要在这里进行设置，如一些公式插件。

    ---
    layout:     post                                       # 使用的布局（不需要改）
    title:      懒人升级！自动判断上下班+导航+放歌            # 标题 
    subtitle:   捷径(快捷指令)简易教程                      # 副标题
    date:       2020-12-20                                 # 时间
    author:     Road                                     # 作者
    header-img: img/iOSOneButtonNavigation&play-05.JPG    # 这篇文章标题背景图片
    catalog: true                                         # 是否归档
    tags:                                                # 标签
        - 捷径
        - 快捷指令
        - 一键导航
        - CarPlay

    ---

运行网站

其实Jekyll最佳的归宿就应该是部署到Github Pages，因为Jekyll最初的开发者就是Github的创始人，而且很多Jekyll的开发者也是GitHub的员工，所以我们能看到Jekyll宛如GitHub的亲儿子般的存在。Jekyll部署到Github Pages支持自动生成页面，也就是可以把整个源码推送上去让Github来生成，可以说是又便宜又好用了。

但是因为各种原因(墙、HTTPS、百度爬不到等)我并不想放在GitHub上，而是希望放在自己的小服务器上。然而不少的教程会告诉你用官方的server指令，然后绑定一下端口域名就好了，也就是：

jekyll serve

或者是简写：

jekyll s

甚至还有教你添加更多选项的，如端口-p --port、后台运行-B --detach、检测到代码变动自动编译网页-w --watch, 如：

jekyll s -p 80 --detach --watch

更多的配置选项可以参考Configuration Options | Jekyll • Simple, blog-aware, static sites

当然事实上 --watch不能与--detach共用，会提示：

Auto-regeneration: disabled when running server detached.

也会有大佬给出解决方案，可以参考https://helloworldkb.com/6623314/jekyll服务%22-watch”不能与%22-detach”结合使用

可是我认为直接用官方的内置的web服务器来当正式上线的服务器是不妥的，毕竟这个内置的web服务器只是用来本地测试的(虽然我讲不出哪里不妥)。所以我认为更好的做法应该是把编译出来的文件交给专业的web服务器托管（如Apache、 Nginx 、IIS）。

记录一些指令

初期用自带的测试web服务器发布网页时用的网页，不推荐使用！

  • 可以使用命令将网站生成到目标文件夹：

    jekyll build --destination <destination>
    # => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

  • 启动服务器：

    bundle exec jekyll serve --host 0.0.0.0 --port 80 --detach 
    #后台启动测试服务器，端口设置为80
    setsid jekyll serve --host 0 --watch --force_polling &>/dev/null </dev/null &
    #后台启动测试服务器，并且发现变动时自动更新（不稳定，服务很容易）

  • 停止服务器 

    sudo pkill -f jekyll