利用github搭建属于自己的博客


##相关知识准备


  • 熟悉基本的Git操作,windows下面掌握Git的图形化操作工具会更加方便,linux下我一直使用的是命令交互的方式如果正在看这篇博文的你有什么好的工具记得推荐我:)。

  • 熟悉基本的MarkDown语法,windows下我推荐MdCharm,linux下我推荐Remarkable,Mac OS(我买不起……)就不推荐了;

  • 熟悉jekyll基本框架原理,只需要知道大体的框架原理即可,能够在以后做定制和集成插件的时候能够得心应手,要是喜欢可以顺便看一看ROR框架蛮不错的;

##搭建步骤


  1. 注册一个GitHub账号,不再多说了,注册地址GitHub官网
  2. 安装Git,不在详细说过程,windows狂点下一步,linux一条命令搞定,具体细节请查看Git官网
  3. 登陆Github账户,创建一个博客空间,这一步其实更简单,只需要在Github上面创建一个名字为YourName.github.io其中YourName为你的GitHub的账号名,所以一个账号只能创建一个博客空间,至此你可以获取该项目到本地了;
  4. 创建完毕后你可以在YourName.github.io这个工程里面添加你的网站了,Github默认会在下面寻找index.html页面,你要是感兴趣他的为工作方式请移步Github Pages ;
  5. 当然了,如果你是自带光环的WEB前端工程师,你就可以不在看剩下的内容了,请享受你的私人网站吧,我这里要说的是采用第三方的模板Jekyll,没错就是采用别人的模板,什么是模板?请出门左转自行Google或者Baidu,比如说你觉得我这个模板比较中意,那就到我的Github主页,Clone我的博客项目然后本着尊重作者的意图,请一定要删除博主原有的个人配置信息和博文,然后就可以尽情的享受了;
  6. 若有任何问题,或者觉得步骤不够详细的可以随时给我发邮件,交流;

##插件集成


该博客的模板最初并非本人原创,在此向原作者致敬,该模板采用jekyll框架,经过简单的个人定制而成,很值得称赞的是为了小白们的方便,里面集成了很多的第三方插件,比如评论系统多说,百度统计功能等等,通过简单地配置文件配置即可完成功能的集成,比如本博客的评论系统就是采用的多说插件,并且也添加了百度统计的功能,如下图:
我是图片


>
多说盒子自定义样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}
#ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}
#ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}
#ds-thread {padding-left:30px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}
#ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;}
#ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}
#ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important}
#ds-thread .ds-avatar a:hover {border-color:#de5a4e}
#ds-thread .ds-avatar > img {margin:2px 0 0 2px}
#ds-thread #ds-reset .ds-replybox {box-shadow:none;}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; }
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;}
#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; }
#ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);
-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;}
.ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
#ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}
#ds-thread #ds-reset .ds-comment-body p{color:#787968}
#ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}
#ds-thread #ds-reset #ds-hot-posts {border:0}
#ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}
#ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}
#ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;}
#ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;}
#ds-reset #ds-bubble .ds-user-name{padding-left:13px;}

daodaoliang wechat
点击上面图片后用微信扫描,你就能认识一个有趣的灵魂了呀。
Fork me on GitHub