[17年重整版]Jekyll搭建个人博客

这是基于githubpage使用Jekyll工具搭建的博客效果:曾思勇的博客

博客截图.jpg

一、Jekyll是什么

Jekyll是一款静态网站生成工具,允许用户使用HTML、Markdown或Textile通过模块的方式建立所需网站,然后通过模板引擎Liquid(Liquid Templating Engine)来运行或者生成对应的静态网站文件。因为GitHub的渲染引擎默认为Jekyll,所以Jekyll在GitHub上使用较多,通过GitHub搭建自己的博客一般都是使用Jekyll。

Jekyll是一款静态网站生成工具,雨荨用户使用HTML、Mardown或Textile通过模块的方式简历所需网站,然后通过模版引擎Liquid来运行或者生成对应的静态

因为Jekyll是一款基于Ruby的插件,必须先配置Ruby开发环境,需要Pygments代码高亮引擎,所以需配置Python开发环境**

二、安装Ruby

  1. ** 安装包下载页面 **

  2. 在 “RubyInstallers” 部分,选择某个版本点击下载
    例如, Ruby 2.2.4-p230-(x64) 是适于64位 Windows 机器上的安装包。

    Ruby安装包.png

  3. 通过安装包安装
      最好保持默认的路径 C:\Ruby22-x64, 因为安装包明确提出 “请不要使用带有空格的文件夹 (如: Program Files)”。
       勾选 “Add Ruby executables to your PATH”,这样执行程序会被自动添加至 PATH 而避免不必要的头疼。

    安装目录设置.png

  4. 打开一个命令提示行并输入ruby -v检测 Ruby 是否成功安装(注意命令行要重新开启)

    检测Ruby版本.png

  5. ** 打开一个命令提示行并输入gem -v来检测 gem 是否存在**

    检测gem版本.png

三、安装 DevKit

DevKit 是一个在 Windows 上帮助简化安装及使用 Ruby C/C++ 扩展如 RDiscount 和 RedCloth 的工具箱。 详细的安装指南可以在程序的wiki 页面 阅读。

  1. ** 安装包下载页面 **

  2. 下载同系统及 Ruby 版本相对应的 DevKit 安装包。 例如,DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe 适用于64位 Windows 系统上的 Ruby 2.0.0及以上的版本

    选择DevKit 版本.png

  3. 运行安装包并解压缩至某文件夹,如 C:\DevKit

  4. 通过初始化来创建 config.yml 文件。在命令行窗口内,输入下列命令:
    cd “C:\DevKit” ruby dk.rb init

    初始化.png

  5. 通过记事本打开该目录下config.yml,于末尾添加如下代码,保存后退出
    - C:\Ruby22-x64

  6. 回到命令行窗口内,审查(非必须)并安装。
    ruby dk.rb review ruby dk.rb install

四、安装 Jekyll

1.确保 gem 已经正确安装(在2.2.4版本的ruby会自动安装)
2.安装 Jekyll gem

安装 Jekyll gem.png

gem install jekyll

  • 如果报错参照解决办法
    证书验证
  • 其他报错请参考文末的常见错误及解决方法

3.安装jekyll-paginate,在命令行里输入
gem install jekyll-paginate

gem install jekyll-paginate.png

如遇到以下错误,说明网络不通:

ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ECONNRESET: An existing connection was forcibly closed by the remote host.

4.该方法如果不行请先继续下面操作

五、安装 Python

  1. python下载地址

  2. 下载合适的 Python windows 安装包,Python 2.7.6 Windows Installer

  3. 安装

  4. 添加安装路径 (如: C:\Python27) 至 PATH。(不懂可百度添加环境变量)

    添加环境变量.png

  5. 检验 Python 安装是否成功
    python –V

    检验 Python 安装是否成功.png

  6. 安装 ‘Easy Install’

  • 详细安装指南 (需要梯子)
  • 对于 Windows 7以上的机器,百度查找 ez_setup.py 文件后复制内容保存到本地,例如,至C:\。 然后从命令行使用 Python 运行此文件:
    python “C:\ez_setup.py”
  • 添加 ‘Python Scripts’ 路径 (如: C:\Python27\Scripts) 至 PATH
    添加 ‘Python Scripts’ 路径到环境变量.png

七、安装 Pygments

  1. 确保 easy_install 已经正确安装
    easy_install --version
    输出示例:
    setuptools 3.1
  2. 使用 “easy_install” 来安装 Pygments
    easy_install Pygments
    安装 Pygments

八、启动 Jekyll

按照Jekyll中文文档 的步骤

  1. 先进入一个你想要存储博客的文件夹中
  2. jekyll new myblog
  3. cd myblog
  4. jekyll serve
    生成的 myblog文件夹内容.png

一个新的 Jekyll 博客可以被建立并在 localhost:4000 浏览。即在浏览器地址框输入 localhost:4000 或者 127.0.0.1:4000

我新建的Jekyll网页.png

九、套用优秀的博客模版

详细教程请查看我的另外一篇博文[17年重整版]GithubPages + Jekyll搭建个人博客

  • ** 挑选“模版” **
    Jekyll项目的wiki页面给出了大量优秀的风格各异的网站,这里以 Zhijun Kang为例讲解。
    点击Zhijun Kang,会跳出他的博客首页
    返回github进入wiki页,点击Zhijun Kang右边的source链接,进入到作者的模版仓库。
    操作演示.png

在右边有绿色的克隆代码到本地按钮,通过ZIP下载到本地


Paste_Image.png

下载后解压得到模版的网页站点文件夹


模版网页的站点文件夹.png

十、使用jekyll serve命令部署本地服务

打开命令行进入到模板文件夹目录下,执行命令
jekyll serve
如果你配置jekyll环境不完全,可能会出现许多未知错误
下图为正确配置jekyll环境后会发生的错误提示

错误提示1.png

原因: 没有安装 bundler ,所以接下来执行安装 bundler 命令
gem install bundler

Paste_Image.png

如果报错,尝试更换源,注意众多博客中的源都没有更新
更换源的步骤如下

$ gem sources  //查看当前源
$ gem sources --remove http://ruby.taobao.org/
$ gem sources -a http://gems.ruby-china.org/
$ gem sources -l
建议添加源为http://gems.ruby-china.org/.png

命令行显示当前ruby源

*** CURRENT SOURCES ***
http://gems.ruby-china.org/

接下来执行
bundle install

安装过程中出现错误提示:在安装redcarpet时出现错误

错误提示2.png

请用一下指令安装该程序至成功再重新安装bundle
gem install redcarpet

如下图显示redcarpet已经安装成功


redcarpet安装成功.png

再次运行 bundle install 直到提示成功(未知错误请参考文末解决方法)

再次运行 bundle install .png

执行jekyll server

错误提示3.png

错误信息中有提示:尝试在你要输入的命令前添加 bundle exec

在jekyll server 命令前添加 bundle exec

如上图所示,在本地启动jekyll sever成功,现在即可在浏览器通过
http://localhost:4000 或者 http://127.0.0.1:4000/ ,访问拷贝的博客模版。

本地启动模版网页.png

十一、将模版修改为自己的内容

  • 修改博客名,博客简介等个人信息内容 :
      使用编辑器打开本地仓库中的 _config.yml 文件,按照里面的注释修改为自己的内容。

  • 修改博客文章内容
      打开本地仓库的 _posts 文件夹。默认博文都将放在这里,写新博文只需要新建一个标准文件名的文件,在文件中编写文章内容。 比如_posts 文件夹里有一篇 2016-03-23-hello-world.markdown,你的文件命名也要严格遵循 年-月-日-文章标题.文档格式 这样的格式,尤其要注意月份和日期一定是两位数,尽量不要出现中文。推荐使用Markdown语言写文章,windows下推荐MarkdownPad这个软件编写Markdown文本,web中使用简书。

  • 提交修改
      修改好内容后按照更新仓库版本的方法重新提交本地仓库中的内容到github的远程仓库,关闭浏览器再次刷新 http://localhost:4000 或者 http://127.0.0.1:4000/ 就可以生效修改了 。

十二、博客部署到远端

详细教程请查看我的另外一篇博文[17年重整版]GithubPages + Jekyll搭建个人博客  
  这里讲的是部署到 Github Page, 创建一个 github 账号,然后创建一个跟你账户名一样的仓库,如我的 github 账户名叫 zengsiyong,我的 github 仓库名就叫 zengsiyong.github.io,创建好了之后,把刚才建立的 myBlog 项目 push 到 username.github.io仓库里去(username指的是你的github用户名),检查你远端仓库已经跟你本地 myBlog 同步了,然后你在浏览器里输入 username.github.io ,就可以访问你的博客了。

十三、总结

所以通过配置jekyll环境,我们就可以通过在站点文件夹中运行 jekyll server命令并通过 http://localhost:4000 查看我们对网页做出的修改,修改满意后再push到 github 远程仓库,在外网通过 github page username.github.io访问自己的博客。

错误汇总:

1.使用ruby2.0.0等较旧的版本时,可能会出现如下错误,解决方法是进入ruby安装文件夹,点击卸载,重新下载例如本博客使用的ruby2.2.4版本安装。

ruby旧版本导致的错误.png

2.如果jekyll serve命令执行出现如下错误,就必须重新执行
install bundle和gem bundle install两条命令直至成功

bundle安装失败的错误.png

3.出现如下错误时,应按照正文中的方式步骤重新做一遍


未知错误请重新配置环境.png

参考文档

[1]windows安装jekyll
[2]Jekyll中文文档
[3]使用Github Pages建独立博客
[4]亢志军博客
[5]独立博客一小时快速搭建

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容