采用Jekyll + github + pygments构建个人博客的最终说明

2016年12月30日16:28:35
该文章已经有些久远。随着各自软件的更新迭代,目前安装jekyll以及构建博客相对更加简单。这篇文章只是希望能作个参考,能帮到您当然最好。以及如果看客您感觉这个文章不是太合适的话,还请不要太在意细节。


文章主题目录:

  1. 构建github个人博客库:username.github.io
  2. 安装jekyll相关内容
  3. 修改configuration file以及建立自己的对应网页
  4. 安装相关插件,比如markdown解析包、代码高亮包pygments、mathjax相关修改等,以让博客支持自己的大多数写作需求
  5. 本地编译预览,没有问题后上传至github

1. 构建github个人博客库:username.github.io

不管怎么样去建立这个博客,首先必须在 github 上有这样的一个库,其名称为 username.github.io,username就是每个github用户的用户ID,只有这样名称的库才能被github用于链接到个人博客。
链接的代码就是:

git remote set-url origin git@github.com:*******/********.github.io.git

2. 安装jekyll相关内容

jekyll 是 Ruby 的一个gem包。安装稍显繁琐,主要顺序如下:

2.1 下载安装ruby

这里下载的ruby版本为1.9.3,由于大陆墙掉了官方给的Ruby下载网址,所以百度这个版本的下载即可。注意安装路径不能包含中文和空格,就 c://ruby 蛮好。

2.2 安装 Devkit for Ruby 1.9.3

可到此处下载。并且在cmd.exe中运行如下代码:

cd devkit // 目的是将当前目录转移到devkit解压路径
ruby dk.rb init
ruby dk.rb install

P.S. 安装过程中记得全部勾选 add to the path,将其位置添加到系统变量中,并且在安装完成后,使用如下代码查询安装版本号确认安装成功(显示版本号即为安装成功):

ruby -v

2.3 安装 gem 以及 jekyll 包

https://ruby.taobao.org/
gem下载合适的gem安装包并安装,注意点同上。同时记得这个网站,里面包括了所有的gem功能包,很好狠强大;
安装完gem后也记得查看版本号以及安装完成状态。
然后安装 jekyll,通过

gem install jekyll // 安装jekyll
gem install kramdown // markdown语言解析包
gem install pygments.rb // 代码高亮包
gem install liquid // 这个包我不知道,但是好像有用
// 还有些别的包,看需要来安装啦

其中,高亮包需要python2.6或2.7的环境,因此还需要安装python,所幸在使用某些gem包的时候,可能会出现 Application runtime error的问题,这个时候也需要安装 Node.js 来提供一个使用环境(maybe),也需要安装python,因此就早点安装了更好。

3. 修改configuration file以及建立自己的对应网页

完成上述操作后,就可以进入博客的成型步骤了。首先需要建立自己的文件档案,也就是博客的硬件来源。有两种方案:

3.1 自己建立

可以自己通过如下代码建立,会在当前目录下产生一个jekyll默认模板文件夹,里面包含了主要的文件内容,将其整体拷贝到自己的仓库中即可。

jekyll new (name) 

3.2 fork别人

但是更好的方式可能是这种,因为建立一个漂亮的博客是每一个bloger最希望的事,但是可能刚开始入手会有点难,从0开始的话需要安装主题、自己做前段开发是件很考验编程水平和艺术水平的事,不妨可以在刚开始接触的时候先套用别人的模板,等自己对大致使用方法和流程了解后,再在其基础上或自己从0开始构建自己心中最完美的博客。
网上有很多牛人提供了漂亮的主题以及博客模板,因此可以通过github fork,然后将名字改为自己的username.github.io;然后clone到本地(注意路径不能包含中文,因为jekyll在建立运行时对中文不识别导致不成功)。

3.3 修改相应文件建立自己的blog

库中所包含的主要文件及文件夹有:

  1. 文件夹_layouts:用于存放模板的文件夹,
  2. 文件夹_posts:用于存放博客文章的文件夹
  3. 文件夹css:存放博客所用css的文件夹,比如主题文件以及高亮文件都是放在此处的
  4. .gitignore:可以删掉,后面会将项目添加到git项目,所以这个不需要了
  5. _coinfig.yml:jekyll的配置文件,里面可以定义相当多的配置参数,具体配置参数可以参照其官网
  6. index.html:项目的首页
  7. _includes:用于存放一些固定的HTML代码段,文件为.html格式,可以在模板中通过liquid标签引入,常用来在各个模板中复用如 导航条、标签栏、侧边栏之类的在每个页面上都一样不变的内容,需要注意的是,这个代码段也可以是未被编译的,也就是说也可以使用liquid标签放在这些代码段中

通过修改配置文件_coinfig.yml以及post和layouts就可以实现主要blog的建立和修改。

4. 安装相关插件,比如markdown解析包、代码高亮包pygments、mathjax相关修改等,以让博客支持自己的大多数写作需求

4.1 markdown解析包 kramdown

通过gem安装后,需要在配置文件 _coinfig.yml 中添加该项:

markdown: kramdown
kramdown:
  input: GFM

4.2 代码高亮包 pygments

安装后,首先需要一个 .css 文件,但是我也不清楚怎么在windows下生成这个文件,也就是从网上找到的一个,且其来源为此,并且名字成为 highlight.css,存放目录为 ./assets/css以及./_site/assets/css两个文件夹,然后同样需要在配置文件中做如下修改:

highlight: true

并且需要对样式进行链接,需要修改生成网页的模板或通用头文件,进入本地库目录 ./_includes/header.html,然后添加下句:

<link rel="stylesheet" href="/assets/css/highlight.css">
//其中 /assets/css/ 为该文件所在位置

在使用代码时,需要在符合markdown的语法基础上,在代码主体前后添加两句话,举例如下:

{% highlight c++ linenos %}
{
    cout<<endl;
    cout<<"HAHAHA"<<endl;
    cout<<"I am Hahaha"<<endl;
}
{% endhighlight %}

4.3 使用mathjax呈现公式

虽然kramdown是支持mathjax语法的,但是为了使网页可以使用mathjax,还需要作如下修改,可参考此处,同样到库 ./_includes/header.html,添加如下语句,有的文章里面给出的添加内容没有这么多,但是多多益善吧,仅仅信之。

5. 本地编译预览,没有问题后上传至github

5.1 本地编译预览

使用命令建立并在当地可预览当前的网页状态,网址为:http://localhost:4000/ ,如果有问题则继续修改,没有就可以进行下一步了。

jekyll build 
jekyll serve

5.2 通过github将本地库的改动提交到网上

所使用的命令为:

git add . // 如果没有新加文件可以不用运行此句
git commit -am '描述内容'
git push (-u origin master) // 括号中内容可加可不加

如果没有提示错误的话,一切顺利,就可以去网站:http://username.github.io 查看属于自己的个人博客啦!~~

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

推荐阅读更多精彩内容