使用jekyll在github上搭建个人博客

觉得能自己设计自己的博客是一件很cool的事情,也是一个程序员该有的素养,哈哈,其实就是觉得好玩,而且现在的各类博客网站广告太多,整个页面给人感觉不够清爽,就想自己设计一个属于自己的博客页面,正好这段时间有短暂的连续空闲时间,就试着捣腾了一下。过程不太难,但由于我刚接触到这块,还是花了不少时间的,现将大概步骤记录如下。
  搭建博客的过程主要参考了这篇博文:http://blog.hiddenwangcc.com/archives/2454,大家可以对照着这篇博文搭建。
在这里列出必不可少的几个步骤:
1.注册github帐号
2.注册属于自己的域名
3.folk一个网站样式扒下来作为自己的样式。
这里借鉴了别人的样式,后续可以慢慢改进,进化成自己的风格。
注意将folk下来的github.io库的名称改为user.github.io,其中user为你自己注册的Github的用户名,必须一样。
4.在浏览器地址栏输入:http://user.github.io,将其中的user替换为你自己的Github用户名即可
5.将域名和网站绑定到一起:
(1)新建CNAME文件,文件内容即为自己的域名,例如,若想通过http://sunnygarden.top访问,只需在CNAME文件中输入sunnygarden.top即可。
(2)打开自己申请的域名的域名管理,在域名管理系统中添加新的子域名,首先先把子域名处留空,然后默认是用IP/IPv6的方式,将ip地址指向103.245.222.133(这是github.io的数字域名)
(3)完成后点击“重启NDNS服务器”即可。等上一段时间后即可访问啦!
  是不是很简单?这是我根据该教程搭建好的博客:http://sunnygarden.top,目前只是雏形,还在继续完善中,欢迎大家访问。
  要是在搭建过程中有问题,仔细看看上面几步是不是都完成了。在搭建完后我还遇见了一个坑,按照教程搭建好了以后,等了半个小时,还是不能访问,浏览器缓存也清过了,还是不可以,各种折腾无果,结果第二天再访问发现就可以了。。这延时。。
  博客雏形搭建好以后,博文怎么更新呢?别人怎么评论呢?于是我又继续深入研究了一下。
  GitHub Pages为了提供对HTML内容的支持,选择了Jekyll作为模板系统,Jekyll是一个强大的静态模板系统,作为个人博客使用,基本上可以满足要求,也能保持管理的方便,这是我学习jekyll的网站:http://jekyll.bootcss.com/,我们不需要详细知道每一个知识点,只需要在遇见问题时查阅即可,里面的介绍文档相当详细。
在这里总结一些jekyll相关的要点:
1、本地安装jekyll
  本地安装jekyll主要是为了测试,如果不需要本地测试的话就不用安装了,直接将编辑好的源文件上传到github就可以显示网站内容了。
Windows上安装jekyll的步骤:
(1)安装Ruby:Ruby下载地址,可以根据推荐安装2.2.X的稳定版
(2)安装Gem:Gem下载地址,可直接进到相应目录下执行 ruby setup.rb 指令进行安装
(3)安装jekyll,可直接执行指令 gem install jekyll 进行安装
2、创建本地博客目录并开启服务
  在希望创建博客的目录下执行指令jekyll new 指令,这里创建了myblog作为本地博客目录,并在创建的目录下开启jekyll服务:

~ $ jekyll new myblog
~ $ cd myblog
~/myblog $ jekyll serve

服务开启后可在浏览器中敲人:http://localhost:4000进行本地预览,这样本地的改动可以直接本地浏览,便于修改页面。
3、jekyll网站的目录结构
一个基本的 Jekyll 网站的目录结构一般是像这样的:
.
├── _config.yml (保存配置数据)
├── _drafts (存放未发布的文章)
|├── begin-with-the-crazy-ideas.textile
|└── on-simplicity-in-technology.markdown
├── _includes (包含部分,可在布局或文章中方便重用)
| ├── footer.html
| └── header.html
├── _layouts(布局,即包裹在文章外部的模板)
| ├── default.html
| └── post.html
├── _posts(存放发布的文章。文件格式必须要符合:YEAR-MONTH-DAY-title.MARKUP)
| ├── 2007-10-29-why-every-programmer-should-play-nethack.markdown
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├──** _data(存放格式化好的网站数据)
| └── members.yml
├── _site(存放生成页面,一般放入.gitignore文件中)
└── index.html
从该结构中可以看出来,我们每次更新的文章都是在
_posts**文件夹下。
对于将本地文件发布到github上我们还需要掌握Git的基本用法:
1、安装Git
点击Git下载地址会自动下载Git安装包。
2、创建代码仓库
安装好Git之后,我们一般习惯使用Git Bash输入命令进行各种操作,
(1)打开Git Bash配置自己的身份:

git config --global user.name "Amy"
git config --global user.email "amy@gmail.com"

配置完成后通过相同指令来查看是否配置成功,只需要去掉最后的名字和邮箱地址:

git config --global user.name
git config --global user.email

(2)克隆user.github.io项目到本地
到github上找到自己的user.github.io项目,复制项目的URL,


执行git clone命令将github上的个人博客项目复制到本地

git clone https://github.com/sunnygarden/sunnygarden.github.io.git

3、提交本地代码到github

对本地代码修改完毕后,执行add指令添加文件,例如:

git add index.html  //提交本目录下的index.html文件
git add _posts   //提交本目录下的_posts文件夹下的所有文件
git add .    //提交本目录下的所有文件

文件添加完毕后执行commit操作来提交一下,例如;

git commit -m "my first commit"   //-m后接的内容为本次提交的描述信息,用来方便标识

执行完add和commit操作后只是在本地版本库中添加提交,并没有同步到远程版本库,也就是Github上,因此需要执行push操作来同步,执行以下指令:

git push origin master

Git 默认使用origin来标识所克隆的原始仓库,上面的语句表示将本地的master分支推送到origin的master分支,如果后者不存在,则会被新建。需要注意的是,每次更新之前如果远程版本库有更改,需要执行git pull命令来与本地仓库合并,否则会提示错误信息:error:failed to push som refs to …
  Git的命令很多,这里只涉及到常用的一些命令,用法也不完全,网上有很多用法教程可以参考学习,这里不再赘述。
  看到这里,博客更新应该都会了,那么怎么评论呢?其实现在有许多很方便的第三方评论模块的产品,比如Disqus多说都是现在主要使用的,这两种网上使用教程也很多,使用起来也很容易,引用一些代码模版就可以了,大家可以自己去搜索,这里也不啰嗦了。
  博客的雏形搭建好了,还有很多需要优化和更新的地方,贵在坚持吧,欢迎大家关注我的github和简书,目前我自己搭建的博客还一片荒芜,哈哈,没事可以戳着看看:http://sunnygarden.top,有问题欢迎留言讨论,有错误也请不吝赐教。

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

推荐阅读更多精彩内容