Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。
上面的翻译站点已经提供了详细的搭建介绍,通过「快速搭建指南:http://jekyllcn.com/docs/quickstart/ 」可以快速基于Jekyll完成站点搭建。本文将基于个人博客 https://blog.bihe0832.com/ 的迁移来讲下iMac搭建Jekyll本地环境 及迁移。
安装Jekyll等插件可以参考官网提供的「安装文档 http://jekyllcn.com/docs/installation/」来安装。由于系统默认Ruby安装过程中容易出现各种问题,因此建议自定义安装新的Ruby。关于卸载及重装 Ruby 和 Jekyll的详细内容,可以参考文章「iMac搭建Jekyll本地环境 https://blog.bihe0832.com/imac-jekyll.html 」和 「 iMac上RubyGems相关的问题汇总 https://blog.bihe0832.com/imac_gem.html」。以下为简单的安装事例:
➜ blog git:(master) ✗ gem install jekyll
Fetching mercenary-0.3.6.gem
……
25 gems installed
➜ blog git:(master) ✗ gem install github-pages
Fetching addressable-2.5.2.gem
……
62 gems installed
➜ blog git:(master) ✗
这部分相对负责,可以参考文章 使用 Jekyll 搭建技术博客并部署到 CentOS 服务器
这部分内容可以参考官网提供的「快速指南 http://jekyllcn.com/docs/quickstart/」来创建一个简单的站点并根据配置自定义你的站点风格。我选择直接从Github下载我的博客相关的内容(对应地址为:https://github.com/bihe0832/bihe0832.github.io)
对于基于Jekyll的静态站点的目录结构,可以参考官网提供的「目录结构http://jekyllcn.com/docs/structure/」,下面为个人博客目录结构的简单介绍:
.
├── 404.html :404页面
├── CNAME :Github Pages的域名配置
├── LICENSE :开源协议
├── _config.yml :博客相关的配置信息
├── _includes :部分重用子页面
├── _layouts :页面布局
├── _posts :文章内容
├── _site :Jekyll 生成静态页面目录
├── index.html : 博客首页页面格式
├── pages :一些特殊的静态页面
├── public : 博客相关的资源,包括css、js、以及所有图片
├── search : 博客搜索功能相关代码
├── sitemap.txt :站点地图
└── sitemap.xml :站点地图
当文章写完以后,你可以先通过本地 build 验证构建没有问题。在项目根目录直接命令行运行 ` jekyll build ` 即可查看构建结果
➜ blog git:(master) ✗ jekyll build
Configuration file: /github/blog/_config.yml
Source: /github/blog
Destination: /github/blog/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 5.437 seconds.
Auto-regeneration: disabled. Use --watch to enable.
➜ blog git:(master) ✗
如果构建没有报错,你就可以选择将构建结果 _site
部署到你的服务器。如果想在本地查看效果,在项目根目录直接命令行运行 ` jekyll server ` 即可
➜ blog git:(master) ✗ jekyll server
Configuration file: /github/blog/_config.yml
Source: /github/blog
Destination:/github/blog/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 4.1 seconds.
Auto-regeneration: enabled for '/github/blog'
Server address: http://127.0.0.1:4000
Server running... press ctrl-c to stop.
然后在浏览器打开 http://127.0.0.1:4000 即可查看效果