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. NetCore 阿里大于发送短信

    使用阿里大于API发送短信,但阿里没有提供NetCore 的API,自己看了下源码重写了发短信这个部分 public class MessageSender { private readonly st ...

  2. webControls与客户端脚本路径

    网上有用的资料不多,在一本电子书中摘抄了内容如下 webControls配置节只有一个clientScriptsLocation属性,此属性用于指定ASP.NET客户端脚本的默认存放路径.这些文件是包 ...

  3. Asp.net mvc返回Xml结果,扩展Controller实现XmlResult以返回XML格式数据

    我们都知道Asp.net MVC自带的Action可以有多种类型,比如ActionResult,ContentResult,JsonResult……,但是很遗憾没有支持直接返回XML的XmlResul ...

  4. 装饰模式 - Decorator 和 外观模式 - Facade

    装饰模式 Decorator,不改变接口但动态给对象加入责任,所需功能按顺序串联起来控制,比生成子类灵活. 外观模式 Facade,让接口更简单.为子系统中的一组接口提供一个一致的界面. 参考:

  5. EF架构~EF异步改造之路~仓储接口的改造~续

    回到目录 返回异步与并行目录 在写完仓储接口的改造改造后,总觉得有个代码的坏味道,这种味道源于它的DRP,即重复的代码太多了,即异步操作和同步操作其实只是在insert,update和delete上有 ...

  6. 在DirectShow中支持DXVA 2.0(Supporting DXVA 2.0 in DirectShow)

    这几天在做dxva2硬件加速,找不到什么资料,翻译了一下微软的两篇相关文档.并准备记录一下用ffmpeg实现dxva2,将在第三篇写到.这是第二篇.,英文原址:https://msdn.microso ...

  7. 使用NPOI读取Excel到DataTable

    一.NPOI介绍: 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写.NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office ...

  8. 【linux草鞋应用编程系列】_4_ 应用程序多线程

    一.应用程序多线程     当一个计算机上具有多个CPU核心的时候,每个CPU核心都可以执行代码,此时如果使用单线程,那么这个线程只能在一个 CPU上运行,那么其他的CPU核心就处于空闲状态,浪费了系 ...

  9. hdu-2063-二分图最大匹配

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. php实现设计模式之 装饰模式

    <?php /* * 装饰模式:在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. * * 角色 * 抽象构件(Compone ...