用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月前
|
JSON 小程序 数据可视化
微信小游戏制作工具打包发布相关的一些问题
当前有两种发布方式,一种是发布到社区,一种是发布小游戏平台。 发布到社区非常的简单,点击功能区中的的“预览&分享”按钮,打开预览分享对话框,左侧可以直接用手机微信扫码体验,右侧的为发布到社区。
64 0
|
8月前
|
Web App开发 JavaScript 算法
快速制作一个chrome插件
在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更多是它丰富的扩展在吸引我,那么大家有没有想过如何自己来开发一个Chrome浏览器插件呢?是不是有的同学会觉得Chrome浏览器插件的制作难度会很大呢?今天就让我来带你们看看一个简单的Chrome浏览器插件的编写过程,并给大家制作一个简单的插件模板,大家可以通过模板来进行快速开发。
166 0
快速制作一个chrome插件
|
搜索推荐 前端开发 JavaScript
搭建 VuePress 站点必做的 10 个优化
在搭建这样一个博客后,其实还有很多的优化工作需要做,本篇我们来盘点一下那些完成基础搭建后必做的 10 个优化。
216 0
搭建 VuePress 站点必做的 10 个优化
|
JSON 前端开发 JavaScript
用jekyll制作高大上的网站(二)——实际应用
最近公司要制作个文档库,直接就可以将jekyll应用到实际中。 模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考。 模版使用的CSS是Bootstrap v3.2.0版本的。为了省时点,我就直接将Bootstrap官网中的CSS和JS拉了下来。
用jekyll制作高大上的网站(二)——实际应用
|
Web App开发 JavaScript 网络安全
用jekyll制作高大上的网站(一)——安装与配置
很多人会制作自己的主页,页面美观简洁,一直很在意是怎么做的。 最近公司需要做个文档库的主页,就研究了一些开源的工具,后面发现了jekyll(读杰克尔),将纯文本转换为静态博客网站。
用jekyll制作高大上的网站(一)——安装与配置
|
Web App开发 Kubernetes JavaScript
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得
近日,微软上线了一个新的开源网站。这不是微软唯一的开源网站,但却代表了新的起点。网友表示:这次真的拥抱开源了!从「恨」到「爱」,微软与开源有着一段长达30年的故事。
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得
|
负载均衡 数据可视化 JavaScript
还在手写 Nginx 配置?试试这款可视化配置神器,太强了!
Nginx 是前后端开发工程师必须掌握的神器。
104 0
还在手写 Nginx 配置?试试这款可视化配置神器,太强了!
|
缓存 索引
入坑 docsify,一款神奇的文档生成利器!(2)
入坑 docsify,一款神奇的文档生成利器!
234 0
入坑 docsify,一款神奇的文档生成利器!(2)
|
Java Linux 数据安全/隐私保护
入坑 docsify,一款神奇的文档生成利器!(1)
入坑 docsify,一款神奇的文档生成利器!
258 0
入坑 docsify,一款神奇的文档生成利器!(1)
相关产品
云迁移中心
推荐文章
更多