Skip to content

使用Jekyll

Jump to bottom
Wang Xiaolu edited this page Jul 25, 2019 · 6 revisions

Jekyll是运行在Ruby平台上的程序，所以：

  • 首先搭建Jekyll工作环境
  • 然后安装Jekyll工具
  • 全部安装成功后，使用Jekyll工具

搭建Jekyll工作环境（2019-07版）

时隔两年，再次搭建Jekyll环境，发现之前的步骤已不再适用最近的ruby版本了，现在的步骤要简单很多。

提前说明：下述步骤基于window10系统

  1. 下载 Ruby & Ruby Development Kit (下载网址：http://rubyinstaller.org/downloads/ )，我选择的是Ruby+Devkit 2.5.5-1 (x64)
  2. 按照安装指引一步步安装即可，最后的指引面板上有个提示，记得勾选允许ridk install，这步是必需的，如果想用gems安装依赖的话
  3. 上述步骤结束后，打开命令行工具，执行 gem install jekyll bundler
  4. 运行jekyll -v检查是否安装成功

搭建Jekyll工作环境

提前说明：下述步骤基于window10系统

  1. 安装 Ruby & Ruby Development Kit (下载网址：http://rubyinstaller.org/downloads/ )
  2. 切换到Devkit的安装目录下，然后执行 ruby dk.rb init
  3. ruby dk.rb install
  4. gem sources --add http://gems.ruby-china.org/ --remove http://rubygems.org/
  5. gem install jekyll
  6. gem install bundler

注释

  • dk.rb我认为是devkit ruby的缩写
  • DevKit 是windows平台下编译和使用本地C/C++扩展包的工具。它就是用来模拟Linux平台下的make, gcc, sh来进行编译
  • DevKit 与gem的安装和更新有关，也就是说dk.rb的初始化和安装与gem有关
  • 修改gem下载源地址是为了避免出现SSL问题
  • gem install jekyll bundler是同时安装jekyll和bundler的指令
  • 安装bundler是为了运行jekyll，直接运行jekyll可能会报错，通过bundle exec jekyll正常执行
  • 到此，环境已经搭建完成

利用Jekyll建站（快速上手版）

  • 切换至username.github.io目录下
  • jekyll new .
  • 打开Gemfile配置文件，添加gem 'wdm', '>= 0.1.0'代码（如果电脑系统是windows的话，否则跳过这一步）
  • 在Gemfile中删除gem "jekyll",增加gem "github-pages"（使用github pages服务）
  • 执行bundle install指令
    • 这个过程可能很慢，建议换源，使用国内镜像
  • bundle exec jekyll serve
  • 浏览博客网站：http://localhost:4000

利用Jekyll建站（基础详解版）

当jekyll new .时，Jekyll网站自动搭建，如下所示：

.(username.github.io)
├── _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
├── _site `Jekyll build`生成的网站，在上传到github上时应忽略
├── css 网站样式
|   ├── main.css
|   └── reset.css
├── _config.yml 网站配置文件
├── index.html 网站首页
├── Gemfile 项目配置文件
├── README.md 版本项目文档
└── .gitignore

除此之外 ，可自行按照网站目录树，手动创建所需文件。

说明

  • jekyll new .自动创建的文档和上述目录树并不完全一样
  • _config.yml是Jekyll网站的配置文件（内含网站相关信息，例如域名、作者、邮编、分页等等），而Gemfile是项目的配置文件（内含项目开发所需依赖项和下载源等），是利用gem进行包管理时必须的配置文件
  • _layouts、_includes内文档均为html类型，采用Liquid模板语言进行编写
  • 确保username.github.io仓库中的目录结构和配置文件符合Jekyll官方文档的定义和要求

当满足：

  • 网站目录符合文档规范
  • Gemfile配置文件完成

运行Jekyll生成网站：

  1. bundle install
  2. bundle exec jekyll serve
  3. 浏览博客网站：http://localhost:4000

参考资料

Clone this wiki locally