用jekyll制作高大上的网站(一)——安装与配置

简介:

很多人会制作自己的主页,页面美观简洁,一直很在意是怎么做的。

最近公司需要做个文档库的主页,就研究了一些开源的工具,后面发现了jekyll(读杰克尔),将纯文本转换为静态博客网站。

 

一、Ruby

jekyll提供了很多现成的主题可以使用,里面有很多高大上的款式。

官网上面有专门一节是介绍安装的,不过在实际安装中还是会有一些问题。

需要有下载Ruby环境,选最新的那个版本即可,官网上面安装列中有一个RubyGems,但Ruby1.9.1 以后版本已经自带了,所以无需额外下载。

 

二、切换source源

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。

有两张方法,一种是切换到淘宝,另外一种是切换到ruby-china,网上大部分的教程都是用淘宝的。

在用淘宝的后老是会出现认证错误,后面上google查问题,发现淘宝的已经不维护了,详见《Ruby China的RubyGems 镜像上线

我把两种方法都记录了一下,

1) ruby-china

将source改成“https://gems.ruby-china.org/”,在打开的页面中,会告诉你几个指令。

由于我先用了taobao的source,所以这里remove的是淘宝的。

ruby-china中说道:“如果遇到 SSL 证书问题,你又无法解决,请直接用 http://gems.ruby-china.org 避免 SSL 的问题。”

 

2) taobao

将source改成“https://ruby.taobao.org/”,在打开的页面中,会告诉你几个指令。

如果在输入指令出错的话,如下图所示,就是要让你下载下载证书文件

然后放到某个位置,输入指令set,“D:\Ruby23-x64\cacert.pem”就是文件的具体路径

set SSL_CERT_FILE=D:\Ruby23-x64\cacert.pem

也可以将“SSL_CERT_FILE”设置为环境变量,这样就不用每次都要输入设置的指令。

不知为何,后面我加载包的时候,就是会出现问题,囧,也许是我做了什么操作导致的,额额额。

 

三、安装jekyll

在输入安装指令后,就会看到默认安装了14个包。

gem install jekyll

 

四、启动

主题列表中选了两个,Minimal MistakesJekyll Clean。前者页面比较全但相对比较复杂,后者页面少但很简洁。

输入指令,

jekyll serve --watch

在显示的文字中有一句让你安装“wdm”,会在下面介绍。

在页面中输入“http://localhost:4000/jekyll-clean/index.html”后就能看到页面了。

 

五、wdm

从 v2.4.0 开始,Jekyll 本地部署时,会相当于以前版本加 --watch 一样,监听其源文件的变化。

而 Windows 似乎有时候并不会奏效,若你碰到,可安装 wdm (Windows Directory Monitor ) 来改善这个问题。

如果要安装“wdm”得要先安装“Devkit”,在打开的网站中下载后,会让你解压到某个文件夹,接下来就是进入到这个文件夹中。

执行指令“ruby dk.rb init”。

再执行指令“ruby dk.rb install”,不过提示我先去修改“config.yml”中的路径。

config.yml文件就在解压出来的文件中。

 

再执行install指令。

 

六、Gemfile文件

Gemfile是一个用于描述gem之间依赖的文件。gem是一堆Ruby代码的集合,它能够为我们提供调用。

Gemfile是可通过Bundler创建。

gem install bundler
bundle init
bundle install

Gemfile文件中设置的内容如下:

source "https://rubygems.org"

gem "jekyll-paginate"
gem "kramdown"
gem "jekyll-watch"
gem "wdm", "~> 0.1.0" if Gem.win_platform?

 

七、自动刷新页面

1)修改Gemfile文件

gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'

要添加三个包,执行“bundle install”,如果执行出错,那就一个一个加吧。

 

2)创建guard配置文件

执行指令,将会生成一个Guardfile文件。

guard init

生成的Guardfile文件内有一些代码,在代码的最后添加如下代码:

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

 

3)添加livereload插件

安装Live Reload Extension,如果是chrome,就到Chrome Web Store下载

安装成功后,在右上角可以看到一个小按钮

如果是运行状态,那么会自动添加一个js文件引用:

 

4)运行

执行运行指令:

bundle exec guard start

这里注意一下,livereload要先关闭。

运行上面指令,当出现下面的内容后,再运行livereload。

然后会出现“connected”连接了,接下来修改内容就会自动刷新页面了。

试用后发现,有时候会刷新不成功,还是原来的样子,看来某些地方还需要改进。

 

demo下载

http://download.csdn.net/detail/loneleaf1/9508074

 

参考资料:

Fixing SSL_connect error while installing Ruby Gems on Windows

Gemfile 详解

Bundler 的作用及原理

gem install SSL 错误

Windows 下搭建Jekyll离线部落格环境

Setting Up LiveReload With Jekyll

Using Live Reload with Jekyll



    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/5448570.html,如需转载请自行联系原作者



相关文章
|
5月前
|
数据库
基于PHP+MYSQL开发制作的趣味测试网站源码
基于PHP+MYSQL开发制作的趣味测试网站源码。可在后台提前设置好缘分, 自己手动在数据库里修改数据,数据库里有就会优先查询数据库的信息, 没设置的话第一次查询缘分都是非常好的 95-99,第二次查就比较差 , 所以如果要你女朋友查询你的名字觉得很好 那就得是她第一反应是查和你的缘分, 如果查的是别人,那不好意思,第二个可能是你。
69 3
|
7月前
|
开发框架 前端开发 搜索推荐
分享97个框架模板PHP源码,总有一款适合你
分享97个框架模板PHP源码,总有一款适合你
126 2
|
Ubuntu Python
全网最简约的Vscode配置Anaconda环境(百分百成功)
全网最简约的Vscode配置Anaconda环境(百分百成功)
16082 0
全网最简约的Vscode配置Anaconda环境(百分百成功)
|
容器
如何在微信小游戏制作工具中快速的制作一个血条?
如图,添加了两个血条的图片,一个当作背景,一个当作前景,并且把这两个图片放到了一个“血条1”容器中,另外增加了一个“打你丫的”按钮,用来模拟攻击,点击“打你丫的”按钮,血条就会掉血。
181 0
|
搜索推荐 开发工具 Android开发
更“大”的微信小游戏制作工具
为什么这么久都不开发新功能了呢?因为人手和资源有限。这个可能跟很多人想的不一样,这个不是微信的产品吗?腾讯公司会没人没资源?大公司的实际情况可能还真跟很多人想的不一样。微信小游戏制作工具背后的团队不大,甚至比你想要的还要小,而且团队除了需要负责这个工具的维护之外,还有很多其它的事情需要处理。
278 0
|
JSON 小程序 数据可视化
微信小游戏制作工具打包发布相关的一些问题
当前有两种发布方式,一种是发布到社区,一种是发布小游戏平台。 发布到社区非常的简单,点击功能区中的的“预览&分享”按钮,打开预览分享对话框,左侧可以直接用手机微信扫码体验,右侧的为发布到社区。
205 0
|
Web App开发 JavaScript 算法
快速制作一个chrome插件
在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更多是它丰富的扩展在吸引我,那么大家有没有想过如何自己来开发一个Chrome浏览器插件呢?是不是有的同学会觉得Chrome浏览器插件的制作难度会很大呢?今天就让我来带你们看看一个简单的Chrome浏览器插件的编写过程,并给大家制作一个简单的插件模板,大家可以通过模板来进行快速开发。
352 0
快速制作一个chrome插件
|
Web App开发 JavaScript 网络安全
用jekyll制作高大上的网站(一)——安装与配置
很多人会制作自己的主页,页面美观简洁,一直很在意是怎么做的。 最近公司需要做个文档库的主页,就研究了一些开源的工具,后面发现了jekyll(读杰克尔),将纯文本转换为静态博客网站。
用jekyll制作高大上的网站(一)——安装与配置
|
JSON 前端开发 JavaScript
用jekyll制作高大上的网站(二)——实际应用
最近公司要制作个文档库,直接就可以将jekyll应用到实际中。 模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考。 模版使用的CSS是Bootstrap v3.2.0版本的。为了省时点,我就直接将Bootstrap官网中的CSS和JS拉了下来。
用jekyll制作高大上的网站(二)——实际应用
|
Web App开发 Kubernetes JavaScript
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得
近日,微软上线了一个新的开源网站。这不是微软唯一的开源网站,但却代表了新的起点。网友表示:这次真的拥抱开源了!从「恨」到「爱」,微软与开源有着一段长达30年的故事。
161 0
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得