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

简介: 很多人会制作自己的主页,页面美观简洁,一直很在意是怎么做的。最近公司需要做个文档库的主页,就研究了一些开源的工具,后面发现了jekyll(读杰克尔),将纯文本转换为静态博客网站。

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

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


一、Ruby


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


58.jpg


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

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


59.jpg


二、切换source源


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

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

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

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

1) ruby-china

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

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


60.jpg


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

 

2) taobao

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

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


61.jpg


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

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


62.jpg


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


63.jpg


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



64.jpg


三、安装jekyll


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


gem install jekyll


65.jpg66.jpg


四、启动


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

输入指令,

jekyll serve --watch


67.jpg


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

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


68.jpg


五、wdm


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

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

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

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


69.jpg


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



700.jpg


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

70.jpg


再执行install指令。


71.jpg


六、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?


72.jpg


七、自动刷新页面


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下载

73.jpg


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

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

75.jpg


4)运行

执行运行指令:


bundle exec guard start


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

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


76.jpg


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


77.jpg


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

 

相关文章
|
4月前
|
数据库
基于PHP+MYSQL开发制作的趣味测试网站源码
基于PHP+MYSQL开发制作的趣味测试网站源码。可在后台提前设置好缘分, 自己手动在数据库里修改数据,数据库里有就会优先查询数据库的信息, 没设置的话第一次查询缘分都是非常好的 95-99,第二次查就比较差 , 所以如果要你女朋友查询你的名字觉得很好 那就得是她第一反应是查和你的缘分, 如果查的是别人,那不好意思,第二个可能是你。
68 3
|
5月前
|
前端开发
[巨详细]安装HBuilder-X教程
【6月更文挑战第6天】下载HBuilder-X 官方网址:https://www.dcloud.io/ 点击网址 ,打开官网
146 1
|
6月前
|
JavaScript 搜索推荐 前端开发
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
233 0
|
6月前
|
资源调度 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第9章 VitePress 的扩展与插件(2024 最新版)
《VitePress 简易速速上手小册》第9章 VitePress 的扩展与插件(2024 最新版)
426 0
|
资源调度 JavaScript
十分钟教会你如何使用VitePress搭建及部署个人博客站点
十分钟教会你如何使用VitePress搭建及部署个人博客站点
1060 0
|
JSON 小程序 数据可视化
微信小游戏制作工具打包发布相关的一些问题
当前有两种发布方式,一种是发布到社区,一种是发布小游戏平台。 发布到社区非常的简单,点击功能区中的的“预览&分享”按钮,打开预览分享对话框,左侧可以直接用手机微信扫码体验,右侧的为发布到社区。
202 0
|
Web App开发 JavaScript 算法
快速制作一个chrome插件
在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更多是它丰富的扩展在吸引我,那么大家有没有想过如何自己来开发一个Chrome浏览器插件呢?是不是有的同学会觉得Chrome浏览器插件的制作难度会很大呢?今天就让我来带你们看看一个简单的Chrome浏览器插件的编写过程,并给大家制作一个简单的插件模板,大家可以通过模板来进行快速开发。
346 0
快速制作一个chrome插件
|
JSON 前端开发 JavaScript
用jekyll制作高大上的网站(二)——实际应用
最近公司要制作个文档库,直接就可以将jekyll应用到实际中。 模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考。 模版使用的CSS是Bootstrap v3.2.0版本的。为了省时点,我就直接将Bootstrap官网中的CSS和JS拉了下来。
用jekyll制作高大上的网站(二)——实际应用
|
缓存 JavaScript 搜索推荐
体验Hexo框架快速搭建博客网页
Hexo 是一个快速、简洁且高效的博客框架。在几秒内,即可利用靓丽的主题生成静态网页。
297 1
体验Hexo框架快速搭建博客网页
|
Web App开发 编解码 IDE
这么香的Chrome插件,你都安装了吗?
工欲善其事必先利其器,今天长话短说,介绍13个敏捷、高效的Chrome插件 根据使用方式,本人将其划分为三大类: 开发者工具 日常效率工具类 浏览器管理类
这么香的Chrome插件,你都安装了吗?
下一篇
无影云桌面