1. 搭建Jekyll环境

linux下jekyll的安装非常简单,这里主要讲一下windows下的jekyll的安装过程

这是一台刚刚装完系统的win10系统,它什么都没有,让我们从零开始。

1.1 Install Ruby and the Ruby DevKit

Jekyll是使用ruby语言进行开发的,所以我们第一步需要安装ruby以及ruby相关的开发工具

你可以在 官网 下载我们所需要的安装包和开发工具

教程用的是 rubyinstaller-2.2.3-x64DevKit-mingw64-64-4.7.2-20130224-1432-sfx

ruby 的安装需要注意一点,就是将ruby的可执行文件加入到环境变量的PATH中,如下图,将其勾上,然后安装即可。

接下来我们安装 Ruby DevKit,双击我们刚才下载的DevKit-mingw64-64-4.7.2-20130224-1432-sfx,将其解压到某个文件夹下,这里我选择的是C:\RubyDevKit,解压完毕后,我们以此输入如下命令

cd C:\RubyDevKit

ruby dk.rb init

ruby dk.rb install

最后我们可以用gem -vruby -v 来确认一下ruby和gem是否已经安装成功,如果安装过程中有什么问题,可以关闭cmd,再以管理员权限打开cmd尝试重新操作。

1.2 Change the Gem's sources

我们用gem sources查看原始的gem源,发现是https://rubygems.org/ ,这意味着什么呢,,在这个CCFHQ的阻拦下,很多网站你是无法访问的,那我们更换一个国内的源吧。

gem sources --remove https://rubygems.org/ 将原始的源删掉

gem sources -a https://ruby.taobao.org/ 添加taobao的源

gem sources -u 更新缓存

好了,现在我们的gem可以放心使用了,妈妈再也不用担心我翻不了墙了。

1.3 Install the Jekyll

终于,我们可以安装jekyll了,只需要一调命令即可

gem install jekyll

经过些许的等待,我们成功安装了Jekyll,使用jekyll -v,我们看到目前的最新版本已经是jekyll 3.1.0,这里稍微强调一下,这个版本和之前的2.x. x版本有些许不一样,可能在后面_config.yml的写法上可能有差异,不过没关系,这并不影响我继续前进。

1.4 Build your first blog

至此,我们Jekyll 安装完毕。。。。

我们赶紧来测试一下。。。你期待已久的博客马上诞生。

这里我把当前工作目录切换到desktop

使用jekyll new firstblog命令,我们在桌面创建出了一个firstblog文件夹,是的,这个就是你博客源文件存放的地方。

我们进入这个目录cd firstblog,并jekyll serve

打开浏览器,输入http://127.0.0.1:4000/,是的,你看到了你用jekyll原生的模板创建出来的博客,你成功了,你的第一个blog。

另外,不需要本地测试时,使用ctrl+c关闭端口哦。

你现在可以进入firstblog这个文件夹下,查看下模板都生成了些什么。

是的,这里有若干个文件夹,和一些配置文件,这里我简要说明一下,

_includes_layouts 文件夹分别保存着一些html文件,而post文件夹,用来存放你要发布的文章,一般我们习惯用markdown来写博客,而jekyll是完全支持的。当然还有一个至关重要的文件_config.yml,这个文件用于设置站点的若干信息,非常重要。更多的细节,请参看官网。

1.5 Install a Syntax Highlighter

实际上前面你可以看到,jekyll3.x版本没有自带wdm,那么我们用gem install wdm装一个吧。

上面我们成功生成了一个模板,现在我们需要继续改进。

作为一名coder,,我想代码高亮一定是我们所必要的。so。。我们需要一个代码高亮插件。

jekyll 原生的代码高亮是rouge,这里,我们使用一个叫Pygments代码高亮插件,它是基于Python的,所以在这之前我们需要先安装Python。

1.5.1 Install Python

如果是python2.7.9以前的版本,除了安装Python,你可能还需要安装 pip,但是这之后的版本,安装Python的同时会自动安装pip,这里我选择的是最新版本python-2.7.11.amd64,所以我跳过了这一步,但是你记得在Python安装完毕后通过命令python -m pip install --upgrade pip将pip升级至最新版本。

安装时请务必把Python加入到环境变量PATH中,如果你忘记了,请手动添加。记得安装完毕后重启一次计算机。在命令行输入Python -V 可以查看当前版本,同时也确认Python成功安装。

1.5.2 Install Pygments

先执行python -m pip install Pygments

再执行gem install pygments.rb

这样 pygments 就装好了。

然后我们打开前面说到的_config.yml文件,在里面添加一行highlighter: pygments,这样我们就将默认的高亮换成了pygments

我们自己写一篇post来测试吧

将写好的post命名为20xx-xx-xx-xx-xx.md的形式,如2014-06-30-manacher-algorithm.md,并放入_posts文件夹下。

我们再次jekyll serve,可以看到,pygments代码高亮测试成功

1.6 Using MathJax with Jekyll

作为一名acmer,恐怕数学公式是你必须要用到的,那么,我们用mathjax,使得我们的博客支持LaTex数学公式,,那是不是很美妙啊。。。哈哈。

我们打开_includes文件夹中的head.html文件。

加入如下代码

{% highlight c++ %}

{% endhighlight%}

上面的代码是引用了mathjax的js,下面还处理的 $ ,这样我们可以通过使用 $ 在行内插入公式,使用$$ 在行间插入公式

我们的博客就支持数学公式啦,等什么,再写一篇post来测试吧。

beautiful,LaTex,大爱!!!

至此,基本的设置,告一段落,更多惊喜请参考jekyll官方网站

2. 用Github展示你的博客

这里,再次说明,Ubuntu下,自带Python,安装jekyll几行命令可以搞定,安装pygments一行命令搞定,安装git也是一行命令可以搞定。

所以这里还是讲windows端的安装,其他命令行下的操作,windows与linux几乎是一样的。

2.1 安装git

官网下载git for windows,直接安装即可。

以下所有的操作,均在git(windows端的git bash)下进行,不再使用前面用到的cmd命令行了

2.2 使用Github

首先我们注册一个Github帐号。

这里我的帐号昵称是cainiaonidongde

2.2.1 配置ssh

  1. 设置Git的user name和email:

    git config --global user.name "cainiaonidongde"

    git config --global user.email "842212859@qq.com"
  2. 查看是否已经有了ssh密钥:cd ~/.ssh

    如果没有密钥则不会有此文件夹,有则备份删除,你第一次玩github是肯定没有的
  3. 生成密钥:

    ssh-keygen -t rsa -C “842212859@qq.com” 按3个回车,密码为空。很明显能看到这里用的是RSA的加密体制,所以生成的文件必然有两个,一个公钥,一个私钥,不了解的同学记得去学习数论哦。再次cd ~/.ssh,ls之后你会发现两个文件,就是刚才说的,公钥(id_rsa.pub)和私钥
  4. 在github上添加一个ssh密钥,这要添加的是id_rsa.pub文件里面的内容。
  5. 测试:

    ssh -T git@github.com

    最后一行显示Hi cainiaonidongde! You've successfully authenticated, but GitHub does not provide shell access.,没错,我们成功了。

2.2.2 Create a new repository

这时候,我们创建一个新的仓库

这里仓库的名字必须为你github的名字+github+io,即yourname.github.io



我将当前工作目录切换到桌面。cd Desktop/

  1. 然后将我们创建的仓库克隆下来,当然,目前里面什么都没有

    git clone https://github.com/cainiaonidongde/cainiaonidongde.github.io.git
  2. 这时候你看到桌面上出现了一个文件夹cainiaonidongde,我们把firstblog下的所有文件复制过去。
  3. 切换到cainiaonidongde.github.io文件夹 cd cainiaonidongde.github.io/
  4. git add . 添加所有文件
  5. git commit -m "my new blog" 提交修改信息
  6. git push origin master push到远程仓库

另外这里使用https协议的在push时需要输入帐号密码,若改成ssh则可以不用输入,具体方法可以自行百度谷歌。

2.3 Just enjoy it

现在,我们在浏览器中输入http://cainiaonidongde.github.io/,查看我们的博客。



嗯,非常棒,,我们,成功了!!

3. 关于linux

linux下搭建非常简单,就是依次安装gem,jekyll,git。。然后就该怎么搞怎么搞就行了。

4. 参考文献

Run Jekyll on Windows

Installation

Git SSH Key 生成步骤

jekyll

Jekyll + Github 搭建属于你的静态博客的更多相关文章

  1. Github Pages和Hexo创建静态博客网站

    Github Pages和Hexo创建静态博客网站 安装Node.js 本人是window环境,所以下载window版. 下载地址:https://nodejs.org/en/download/ 下载 ...

  2. 用GitHub Pages搭了个静态博客

    经过周末两天折腾,终于在GitHub Pages上用Hugo搭了个静态博客. 链接:https://xusiwei.github.io/ @ruanyf 曾经在博客里提到过"喜欢写Blog的 ...

  3. 如何用 windows+github搭建一个优美的hexo博客

    1.Hexo简单介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 风一般的速度Hexo基于Nod ...

  4. 搭建自己的技术博客系列(一)使用 hexo 搭建一个精美的静态博客

    1.安装 Git 和 nodejs https://hexo.io/zh-cn/docs/

  5. 使用Github Pages和Hexo构建个人博客

    Github Pages可以创建免费的静态站点,支持自带主题.支持自制页面等,并且可以使用Jekyll或者Hexo等静态博客框架进行管理. 独立博客是博客园等博客平台之外的一个良好补充,相比使用虚拟主 ...

  6. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  7. Github、Jekyll 搭建及优化静态博客方法指南

    尝试自己写 Blog 的人,一般会经历三个阶段. 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客. 第三阶段,觉 ...

  8. jekyll+github搭建个人博客总结

    jekyll+github搭建个人博客 经过一天多的折腾,终于算是搭建好了自己的个人博客,看到有些社区评论说:在windows下用jekyll搭建静态博客,简直就自讨苦吃,但是都到一半了,有什么办法呢 ...

  9. Windows上使用jekyll+github搭建免费博客

    jekyll+github搭建个人博客 (一)下载Ruby (二)安装jekyll (三)开启jekyll服务器 (四)使用github展示博客 一.下载Ruby Ruby,一种简单快捷的面向对象(面 ...

随机推荐

  1. browserCaps与浏览器功能设置

    使用 Web.config 文件中的 browserCaps 元素来定义浏览器的行为在 .NET Framework 2.0 中被否决,但仍受支持.此元素中的数据与浏览器定义文件 (.browser) ...

  2. 【Win10开发】Toast通知——前台激活

    上篇文章我们将了大体的Toast通知的模板及实例展示,那么,这篇文章就来讲讲Toast的前台激活. 首先是xaml界面,很简单,我们放一个Button和TextBlock,TextBlock用来显示T ...

  3. Visual Studio中安装viemu后,vim vax 快捷键大全

    高效率移动 在插入模式之外 基本上来说,你应该尽可能少的呆在插入模式里面,因为在插入模式里面VIM就像一个“哑巴”编辑器一样.很多新手都会一直呆在插入模式里面,因为这样易于使用.但VIM的强大之处在于 ...

  4. Python获取中国证券报最新资讯

    # -*- coding: utf-8 -*- import urllib from bs4 import BeautifulSoup from time import time from time ...

  5. Java--通过Spring AOP进行事务管理

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. 能力素质模型咨询工具(Part 2)

    核心能力素质模型数据库 1. 工作态度 通用 (1)热爱本职工作,对工作充满信心 (2)在没有明确的规定或领导指示的情况下,能够积极主动地承担职责范围内的各项工作,并能够积极地配合其他同事/部门工作 ...

  7. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  8. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  9. js的闭包概念

    一.变量的作用域要懂得闭包,起首必须懂得Javascript特别的变量作用域.变量的作用域无非就是两种:全局变量和局部变量.Javascript说话的特别之处,就在于函数内部可以直接读取全局变量. J ...

  10. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q102-Q104)

    Question  102   You are designing a Windows application that accesses information stored on a ShareP ...