部分内容取自Jekll的官方文档
What’s GitHub
我在上篇博文里写了Git的教程,其中有一部分介绍如何使用远程库,而GitHub就是目前全球使用最广泛的Git远程库。
What’s Jekyll
Jekll可以理解为是一个工具。什么工具呢?生成博客的工具。它能将你按一定格式写的内容转变为html的页面,方便你生成你的博客。
“Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。” ——来自官方的解释
Jekyll的安装
本教程适用于Linux,Unix或者Mac OS X
首先你需要确保你电脑上有Ruby,RubyGems。博主是用Mac的,所以介绍一下Mac上怎么安装这两个东西,其他两个系统我就爱莫能助了。在Mac上的操作很容易,你只需下载并安装Xcode就可以了。
安装Jekyll仅需一条bash命令:
bash
$ gem install jekyll
如果无法安装,你可以试一下如下命令:
bash
$ sudo gem install jekyll
如果还无法安装,因为情况太多,博主也不全部都了解,这里就介绍一下常见错误,其他情况就请自行百度吧。
如收到以下报错,原因即为没安装bundler:
/Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler (LoadError) from /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require' from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:34:in `require_from_bundler' from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>' from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `load' from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `<main>' from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval' from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'
解决方法:执行以下命令安装bundler
$ gem install bundler
而且一定要将其更新到最新:
$ bundler update
再进行安装:
$ bundle install
如果很长时间都没有安装成功的提示的话,你可以尝试修改gem的sourse:(或者翻墙)
$ gem sources --remove https://rubygems,org/ $ gem sources -a https://gems.ruby-china.org/
然后再次执行bundle install即可
Jekyll的基本结构目录
Jekyll也可以理解为一种语言,于是,按照博主的意志,我喜欢在实践之前学习一些基本理论知识。那么就到了我们的基本理论普及环节了~
基于Jekyll的网站的目录结构一般如下一般:
.
├── _config.yml
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| ├── post.html
| └── page.html
├── _posts
| └── 2016-10-08-welcome-to-jekyll.markdown
├── _sass
| ├── _base.scss
| ├── _layout.scss
| └── _syntax-highlighting.scss
├── about.md
├── css
| └── main.scss
├── feed.xml
└── index.html
接下来介绍一下它们的功能:
Jekyll环境配置
创建博客:
$ jekyll new <Blog name>
启动本地服务:
$ cd <Blog name> //进入博客目录
$ jekyll server //启动本地服务,ctrl+c停止服务
这时打开http://localhost:4000就可以看到你新建的博客了
创建页面
编写相应的html文件即可创建相应页面,html的放置位置有两种选择:
.
|-- _config.yml
|-- _includes/
|-- _layouts/
|-- _posts/
|-- _site/
|-- about.html # => http://example.com/about.html
|-- index.html # => http://example.com/
└── contact.html # => http://example.com/contact.html
或者
.
├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
| └── index.html # => http://example.com/about/
├── contact/
| └── index.html # => http://example.com/contact/
└── index.html # => http://example.com/
撰写博客
在_posts文件夹下,建立相应的markdown文本文件即可,记得文件的名字一定要是如下格式:year-month-day-name.md.
文本文件的内容如下:
---
layout: post
title: "Welcome to Jekyll!"
date: 2016-10-16 11:29:08 +0800
categories: jekyll update
---
正文...
将编写完成的博客部署到GitHub远程端
首先,创建一个GitHub仓库,名字为:.github.io
再将本地的博客文件全部上传到这个远程库。在网址里输入.github.io 你想要的博客是不是出现在了你的面前~
感谢惠读