Jekyll + Github 搭建属于你的静态博客

1. 搭建Jekyll环境

linux下jekyll的安装很是简单,这里主要讲一下windows下的jekyll的安装过程
这是一台刚刚装完系统的win10系统,它什么都没有,让咱们从零开始。css

enter image description here

1.1 Install Ruby and the Ruby DevKit

Jekyll是使用ruby语言进行开发的,因此咱们第一步须要安装ruby以及ruby相关的开发工具
你能够在 官网 下载咱们所须要的安装包和开发工具
教程用的是 rubyinstaller-2.2.3-x64DevKit-mingw64-64-4.7.2-20130224-1432-sfxhtml

ruby 的安装须要注意一点,就是将ruby的可执行文件加入到环境变量的PATH中,以下图,将其勾上,而后安装便可。python

enter image description here

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

最后咱们能够用gem -vruby -v 来确认一下ruby和gem是否已经安装成功,若是安装过程当中有什么问题,能够关闭cmd,再以管理员权限打开cmd尝试从新操做。c++

enter image description here

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 更新缓存git

enter image description here

好了,如今咱们的gem能够放心使用了,妈妈不再用担忧我翻不了墙了。github

1.3 Install the Jekyll

终于,咱们能够安装jekyll了,只须要一调命令便可
gem install jekyll
通过些许的等待,咱们成功安装了Jekyll,使用jekyll -v,咱们看到目前的最新版本已是jekyll 3.1.0,这里稍微强调一下,这个版本和以前的2.x. x版本有些许不同,可能在后面_config.yml的写法上可能有差别,不过不要紧,这并不影响我继续前进。shell

enter image description here

1.4 Build your first blog

至此,咱们Jekyll 安装完毕。。。。
咱们赶忙来测试一下。。。你期待已久的博客立刻诞生。
这里我把当前工做目录切换到desktop
使用jekyll new firstblog命令,咱们在桌面建立出了一个firstblog文件夹,是的,这个就是你博客源文件存放的地方。
咱们进入这个目录cd firstblog,并jekyll serve
打开浏览器,输入http://127.0.0.1:4000/,是的,你看到了你用jekyll原生的模板建立出来的博客,你成功了,你的第一个blog。windows

enter image description here

enter image description here

另外,不须要本地测试时,使用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成功安装。

enter image description here

1.5.2 Install Pygments

先执行python -m pip install Pygments
再执行gem install pygments.rb
这样 pygments 就装好了。
而后咱们打开前面说到的_config.yml文件,在里面添加一行highlighter: pygments,这样咱们就将默认的高亮换成了pygments

咱们本身写一篇post来测试吧

enter image description here

将写好的post命名为20xx-xx-xx-xx-xx.md的形式,如2014-06-30-manacher-algorithm.md,并放入_posts文件夹下。
咱们再次jekyll serve,能够看到,pygments代码高亮测试成功

enter image description here

1.6 Using MathJax with Jekyll

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

咱们打开_includes文件夹中的head.html文件。
加入以下代码
{% highlight c++ %}

{% endhighlight%}

上面的代码是引用了mathjax的js,下面还处理的 $ ,这样咱们能够经过使用 $ 在行内插入公式,使用$$ 在行间插入公式
咱们的博客就支持数学公式啦,等什么,再写一篇post来测试吧。

enter image description here

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.,没错,咱们成功了。

enter image description here

2.2.2 Create a new repository

这时候,咱们建立一个新的仓库
这里仓库的名字必须为你github的名字+github+io,即yourname.github.io

enter image description here
enter image description here

我将当前工做目录切换到桌面。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/,查看咱们的博客。

enter image description here
enter image description here

嗯,很是棒,,咱们,成功了!!

3. 关于linux

linux下搭建很是简单,就是依次安装gem,jekyll,git。。而后就该怎么搞怎么搞就好了。

4. 参考文献

Run Jekyll on Windows
Installation
Git SSH Key 生成步骤
jekyll

相关文章
相关标签/搜索