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

news/2024/5/17 12:04:17/文章来源:https://blog.csdn.net/weixin_34082854/article/details/89758810

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

最近公司需要做个文档库的主页,就研究了一些开源的工具,后面发现了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 dowatch /.*/ignore /^_site/
endguard 'livereload' dowatch /.*/
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,如需转载请自行联系原作者



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_809415.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站运维探讨和心得(转载)

2019独角兽企业重金招聘Python工程师标准>>> 看到一篇不错的心得体会;相信我们做技术的都会有或多或少的担忧自己的未来职业发展: 今天看到一篇心得体会,转过来和大家一起探讨一下: 一、什么是大型网站运维? 首先明确…

计算机安全知识百度,seo百度_计算机专业基础知识包括哪些内容? 计算机网络与安全基础知识...

可选中1个或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个问题。我是计算机专业的,它分为软件和硬件,硬件电路基础,电子电路,电脑组装,CPU 芯片。显卡。声卡。微机接口;软件c…

动态网站设计——笔记

rowspan 使用时 逐一使用可以避免多出一行 脑子多运动一点 clospan 合并行 一样的 <table style"width: 100%;"><tr><td rowspan"3"><img alt"" src"images/Screenshot_2022_0416_184734.png" style"heigh…

服务器被黑了做非法网站,网站被黑如何处理

日常生活中&#xff0c;偶尔会遇到网站被恶意植入非法信息的可能&#xff0c;那么遇到这种情形我们要以什么样的方式来判断网站是否被黑了呢&#xff1f;一、以下就是网站被黑的处理方法&#xff1a;1.可以联系主机提供商&#xff0c;对方做出应对。2.处理一些被修改过的文件。…

php url优化,PHP SEO优化之URL优化方法

PHP SEO优化之URL优化方法复制代码 代码如下:function getSeoVersion($phrase) {return preg_replace(/[^a-z0-9_-]/i, , strtolower(str_replace( , -, trim($phrase))));}// example usage:echo getSeoVersion("German cars are amazing.");时间&#xff1a; 2011-…

企业网站需要什么样内容才能满足和吸引到用户?

当今互联网发展趋势锐不可当&#xff0c;网速从2g即将迈向5g&#xff0c;随着用户的口味复制多变&#xff0c;“内容为王”应运而生逐渐被认可。既然内容那很重要&#xff0c;那企业建站过程如何进行网站内容建设呢&#xff1f;那企业网站又需要什么样内容才能满足和吸引到用户…

你的PPT花费的时间总是很多吗?这5个网站让你效率提高五倍以上

你做幻灯片的时候花费的时间是不是很多呢&#xff1f;是不是想要做一份适合职场的专业PPT总是要费尽心思呢&#xff1f;接下来我就要给大家介绍五个网站&#xff0c;绝对能让你效率提高五倍以上&#xff01;一、求字体网如果你觉得PPT自带的字体太单调了&#xff0c;想要应用新…

【pink老师--前端经典面试题】mouseover与mouseenter的区别。

mouseover与mouseenter都是上鼠标经过事件&#xff0c;在鼠标经过时触发。两者有什么区别呢 看下面代码演示。 代码的意思是父盒子里面有一个小盒子。给父盒子绑定mouseover事件&#xff0c;按道理给父盒子 绑定的事件&#xff0c;应该只有父盒子执行才对&#xff0c;但事实并…

前端进阶(做网站必备)----SEO网站优化

SEO汉译为搜索引擎优化&#xff0c;是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名 的方式&#xff0c;换而言之就是优化后能更容易被用户搜索到。 主要从三方面优化 1、title网站标题 优化建议&#xff1a; 网站名-网站介绍。 2、description网站说明 优化建…

【仿小米商城网站】html+css 源码和效果图

导航栏鼠标经过样式&#xff1a; 侧边栏鼠标经过样式&#xff1a; 主体部分&#xff1a; 底部区域&#xff1a; 想要源码的可以留言评论哦

《网站说服力——营销型网站策划》

《网站说服力——营销型网站策划》 基本信息 作者&#xff1a; 谢松杰 出版社&#xff1a;电子工业出版社 ISBN&#xff1a;9787121221255 上架时间&#xff1a;2014-1-18 出版日期&#xff1a;2014 年1月 开本&#xff1a;16开 页码&#xff1a;352 版次&#xff1a;1-1 所…

Firefox 66 发布,阻止网站自动播放声音

开发四年只会写业务代码&#xff0c;分布式高并发都不会还做程序员&#xff1f; Firefox 66 发布了&#xff0c;此版本在桌面版中带来的新特性包括&#xff1a; Firefox 现在阻止网站自动播放声音&#xff0c;如果需要可以单独调整改进的搜索体验&#xff1a; 当打开许多选项…

网站服务器p2p更新需要多久,《彩虹六号》更新计划 将升级服务器并移除P2P功能...

《彩虹六号&#xff1a;围攻(Rainbow Six:Siege)》2.2.2更新补丁将在2017年8月9日于全平台实装。将添加最低两名玩家即可游戏的自定义比赛专属服务器、猎杀恐怖分子模式专属服务器以及其他方面的调整&#xff0c;同时在官方公告育碧透露了接下来游戏的一系列部署计划。在公告中…

kali下Burpsuite对网站后台注入php木马

先给kali浏览器设置代理 后面输入你的端口号 打开后&#xff0c;先关闭拦截 因为i我们只要拦截重要的就行了 接下来打开浏览器 访问我们搭建的网站 这时在点击开始拦截就可以了 右键空白 send to repeater 送往中继器 因为中继器是可以改包的 然后你切换到Burp的中继器 你就…

抖音怎么在电脑上看_抖音直播网站怎么复制到电脑,电脑版抖音直播步骤?

编辑&#xff1a;胥伟易社嗨&#xff01;大家好&#xff0c;我是易社&#xff0c;今天给大家分享的标题是&#xff1a;“抖音直播网站怎么复制到电脑&#xff0c;电脑版抖音直播步骤”&#xff0c;话不多说&#xff0c;往下看&#xff01;1.首先在手机上打开抖音&#xff0c;点…

python astype category_python数据分析实例:python抓取课工厂网站数据和分析

在线教育网站学习&#xff0c;是很多人利于闲余时间进行充电的一种选择。本篇文章利用python抓取在线教育网站课工场课程页面的数据,进行简要分析。通过使用requests库对课工场课程列表页进行抓取。通过BeautifulSoup对课工场课程列表页面进行解析&#xff0c;并从中获课程名称…

如何防止通过url攻击_什么是CC攻击,如何防止网站被CC攻击的方法总汇

CC攻击&#xff08;Challenge Collapsar&#xff09;是DDOS&#xff08;分布式拒绝服务&#xff09;的一种&#xff0c;也是一种常见的网站攻击方法&#xff0c;攻击者通过代理服务器或者肉鸡向向受害主机不停地发大量数据包&#xff0c;造成对方服务器资源耗尽&#xff0c;一直…

如何评定一个搜索引擎的好和坏_如何判断一个网站SEO优化的好坏

在对网站seo优化时通常要分析竞争对手&#xff0c;那如何判断一个网站SEO优化的好坏呢&#xff1f;以下列出的就是判断一个网站SEO优化好坏的标准&#xff0c;通过这些能看出这个网站SEO优化的质量。1、关键词与网站的内容是否息息相关?2、关键词是否是搜索引擎查询中常用的词…

Domolo SEOHelper 多么乐SEO工具:璀璨登场

Domolo SEOHelper 多么乐SEO工具&#xff1a;璀璨登场 六大功能&#xff1a;1、PageRank 批量查询 &#xff0c; 现在的工具只能查一个网页&#xff0c;没有批量查询&#xff0c;现在您可以批量查询了&#xff1b;2、网站 keywords , description , title 收割机&#xff0c; …

干货 | 如何搭建小型视频点播网站

视频点播是二十世纪90年代在国外发展起来的&#xff0c;英文称为“Video on Demand”&#xff0c;所以也称为“VOD”。顾名思义&#xff0c;就是根据观众的要求播放节目的视频点播系统&#xff0c;把用户所点击或选择的视频内容&#xff0c;传输给所请求的用户。视频点播业务是…