Tech

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

2016-09-21  本文已影响0人  sunnygarden

觉得能自己设计自己的博客是一件很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,有问题欢迎留言讨论,有错误也请不吝赐教。

上一篇下一篇

猜你喜欢

热点阅读