github page+jekyll搭博客初体验

div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding: 8px 10px 0; font: 13.34px/1.4 helvetica, arial, freesans, clean, sans-serif; width: 452px; background-color: #fff }
div.oembedall-githubrepos .oembedall-body { background: -webkit-gradient(linear,left top,left bottom,from(#FAFAFA),to(#EFEFEF)); border-top: 1px solid #EEE; margin-left: -10px; margin-top: 8px; padding: 5px 10px; width: 100% }
div.oembedall-githubrepos h3 { font-size: 14px; margin: 0; padding-left: 18px; white-space: nowrap }
div.oembedall-githubrepos p.oembedall-description { color: #444; font-size: 12px; margin: 0 0 3px }
div.oembedall-githubrepos p.oembedall-updated-at { color: #888; font-size: 11px; margin: 0 }
div.oembedall-githubrepos ul.oembedall-repo-stats { border: medium none; float: right; font-size: 11px; font-weight: 700; padding-left: 15px; position: relative; z-index: 5; margin: 0 }
div.oembedall-githubrepos ul.oembedall-repo-stats li { border: medium none; color: #666; display: inline-block; list-style-type: none; margin: 0 !important }
div.oembedall-githubrepos ul.oembedall-repo-stats li a { background-color: transparent; border: medium none; color: #666 !important; background-position: 5px -2px; background-repeat: no-repeat; border-left: 1px solid #DDD; display: inline-block; height: 21px; line-height: 21px; padding: 0 5px 0 23px }
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a { border-left: medium none; margin-right: -3px }
div.oembedall-githubrepos ul.oembedall-repo-stats li a:hover { background: none no-repeat scroll 5px -27px #4183C4; color: #FFF !important; text-decoration: none }
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a:hover { }
ul.oembedall-repo-stats li:last-child a:hover { }
span.oembedall-closehide { background-color: #aaa; cursor: pointer; margin-right: 3px }
div.oembedall-container { margin-top: 5px; text-align: left }
.oembedall-ljuser { font-weight: 700 }
.oembedall-ljuser img { vertical-align: bottom; border: 0; padding-right: 1px }
.oembedall-stoqembed { border-bottom: 1px dotted #999; float: left; overflow: hidden; width: 730px; line-height: 1; background: none repeat scroll 0 0 #FFF; color: #000; font-family: Arial, Liberation Sans, DejaVu Sans, sans-serif; font-size: 80%; text-align: left; margin: 0; padding: 0 }
.oembedall-stoqembed a { color: #07C; text-decoration: none; margin: 0; padding: 0 }
.oembedall-stoqembed a:hover { text-decoration: underline }
.oembedall-stoqembed a:visited { color: #4A6B82 }
.oembedall-stoqembed h3 { font-family: Trebuchet MS, Liberation Sans, DejaVu Sans, sans-serif; font-size: 130%; font-weight: 700; margin: 0; padding: 0 }
.oembedall-stoqembed .oembedall-reputation-score { color: #444; font-size: 120%; font-weight: 700; margin-right: 2px }
.oembedall-stoqembed .oembedall-user-info { height: 35px; width: 185px }
.oembedall-stoqembed .oembedall-user-info .oembedall-user-gravatar32 { float: left; height: 32px; width: 32px }
.oembedall-stoqembed .oembedall-user-info .oembedall-user-details { float: left; margin-left: 5px; overflow: hidden; white-space: nowrap; width: 145px }
.oembedall-stoqembed .oembedall-question-hyperlink { font-weight: 700 }
.oembedall-stoqembed .oembedall-stats { background: none repeat scroll 0 0 #EEE; margin: 0 0 0 7px; padding: 4px 7px 6px; width: 58px }
.oembedall-stoqembed .oembedall-statscontainer { float: left; margin-right: 8px; width: 86px }
.oembedall-stoqembed .oembedall-votes { color: #555; padding: 0 0 7px; text-align: center }
.oembedall-stoqembed .oembedall-vote-count-post { font-size: 240%; color: #808185; display: block; font-weight: 700 }
.oembedall-stoqembed .oembedall-views { color: #999; padding-top: 4px; text-align: center }
.oembedall-stoqembed .oembedall-status { margin-top: -3px; padding: 4px 0; text-align: center; background: none repeat scroll 0 0 #75845C; color: #FFF }
.oembedall-stoqembed .oembedall-status strong { color: #FFF; display: block; font-size: 140% }
.oembedall-stoqembed .oembedall-summary { float: left; width: 635px }
.oembedall-stoqembed .oembedall-excerpt { line-height: 1.2; margin: 0; padding: 0 0 5px }
.oembedall-stoqembed .oembedall-tags { float: left; line-height: 18px }
.oembedall-stoqembed .oembedall-tags a:hover { text-decoration: none }
.oembedall-stoqembed .oembedall-post-tag { background-color: #E0EAF1; border-bottom: 1px solid #3E6D8E; border-right: 1px solid #7F9FB6; color: #3E6D8E; font-size: 90%; line-height: 2.4; margin: 2px 2px 2px 0; padding: 3px 4px; text-decoration: none; white-space: nowrap }
.oembedall-stoqembed .oembedall-post-tag:hover { background-color: #3E6D8E; border-bottom: 1px solid #37607D; border-right: 1px solid #37607D; color: #E0EAF1 }
.oembedall-stoqembed .oembedall-fr { float: right }
.oembedall-stoqembed .oembedall-statsarrow { background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3"); background-repeat: no-repeat; overflow: hidden; background-position: 0 -435px; float: right; height: 13px; margin-top: 12px; width: 7px }
.oembedall-facebook1 { border: #1A3C6C solid 1px; padding: 0; font: 13.34px/1.4 verdana; width: 500px }
.oembedall-facebook2 { background-color: #627add }
.oembedall-facebook2 a { color: #e8e8e8; text-decoration: none }
.oembedall-facebookBody { background-color: #fff; vertical-align: top; padding: 5px }
.oembedall-facebookBody .contents { display: inline-block; width: 100% }
.oembedall-facebookBody div img { float: left; margin-right: 5px }
div.oembedall-lanyard { background-attachment: scroll; background-color: transparent; background-image: none; border-bottom-width: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; color: #112644; display: block; float: left; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 16px; height: 253px; line-height: 19px; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; max-width: none; min-height: 0; outline-color: #112644; outline-style: none; outline-width: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; position: relative; text-align: left; vertical-align: baseline; width: 804px }
div.oembedall-lanyard .tagline { font-size: 1.5em }
div.oembedall-lanyard .wrapper { overflow: hidden; clear: both }
div.oembedall-lanyard .split { float: left; display: inline }
div.oembedall-lanyard .prominent-place .flag:active,div.oembedall-lanyard .prominent-place .flag:focus,div.oembedall-lanyard .prominent-place .flag:hover,div.oembedall-lanyard .prominent-place .flag:link,div.oembedall-lanyard .prominent-place .flag:visited { float: left; display: block; width: 48px; height: 48px; position: relative; top: -5px; margin-right: 10px }
div.oembedall-lanyard .place-context { font-size: .889em }
div.oembedall-lanyard .prominent-place .sub-place { display: block }
div.oembedall-lanyard .prominent-place { font-size: 1.125em; line-height: 1.1em; font-weight: 400 }
div.oembedall-lanyard .main-date { color: #8CB4E0; font-weight: 700; line-height: 1.1 }
div.oembedall-lanyard .first { width: 48.57%; margin: 0 0 0 2.857% }
html { height: 100% }
body { margin: 0 !important; padding: 5px 20px 26px !important; background-color: #fff; font-family: "Lucida Grande", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Lucida Sans Unicode", Helvetica, Arial, sans-serif; font-size: .9em }
br,h1,h2,h3,h4,h5,h6 { clear: both }
hr.page { background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC") repeat-x 0 0; border: 0 none; color: #ccc; height: 3px; padding: 0 }
hr.underscore { border: 0 none !important; height: 30px; padding: 0 }
body>:first-child { margin-top: 0 !important }
img.plugin { }
iframe { border: 0 }
figure { }
kbd { border: 1px solid #aaa; background-color: #f9f9f9; background-image: linear-gradient(top,#eee,#f9f9f9,#eee); padding: 1px 3px; font-family: inherit; font-size: .85em }
.oembeded .oembed_photo { display: inline-block }
img[data-echo] { margin: 25px 0; width: 100px; height: 100px; background: #fff url("../img/ajax.gif") no-repeat center center }
.spinner { display: inline-block; width: 10px; height: 10px; margin-bottom: -.1em; border: 2px solid rgba(0,0,0,.5); border-top-color: transparent }
.spinner::after { content: ""; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 0; border: 4px solid transparent; border-bottom-color: rgba(0,0,0,.5) }
p.toc { margin: 0 !important }
p.toc ul { padding-left: 10px }
p.toc>ul { padding: 10px; margin: 0 10px; display: inline-block; border: 1px solid #ededed }
p.toc li,p.toc ul { list-style-type: none }
p.toc li { width: 100%; padding: 0; overflow: hidden }
p.toc li a::after { content: "." }
p.toc li a::before { content: "• " }
p.toc h5 { text-transform: uppercase }
p.toc .title { float: left; padding-right: 3px }
p.toc .number { margin: 0; float: right; padding-left: 3px; background: #fff; display: none }
.markdown { padding: 20px }
.markdown a { text-decoration: none; vertical-align: baseline }
.markdown a:hover { text-decoration: underline }
.markdown h1 { font-size: 2.2em; font-weight: 700; margin: 1.5em 0 1em }
.markdown h2 { font-size: 1.8em; font-weight: 700; margin: 1.275em 0 .85em }
.markdown h3 { font-size: 1.6em; font-weight: 700; margin: 1.125em 0 .75em }
.markdown h4 { font-size: 1.4em; font-weight: 700; margin: .99em 0 .66em }
.markdown h5 { font-size: 1.2em; font-weight: 700; margin: .855em 0 .57em }
.markdown h6 { font-size: 1em; font-weight: 700; margin: .75em 0 .5em }
.markdown h1+p,.markdown h1:first-child,.markdown h2+p,.markdown h2:first-child,.markdown h3+p,.markdown h3:first-child,.markdown h4+p,.markdown h4:first-child,.markdown h5+p,.markdown h5:first-child,.markdown h6+p,.markdown h6:first-child { margin-top: 0 }
.markdown hr { border: 1px solid #ccc }
.markdown p { margin: 1em 0 }
.markdown ol { list-style-type: decimal }
.markdown li { display: list-item; line-height: 1.4em }
.markdown blockquote { margin: 1em 20px }
.markdown blockquote>:first-child { margin-top: 0 }
.markdown blockquote>:last-child { margin-bottom: 0 }
.markdown blockquote cite::before { content: "— " }
.markdown .code { }
.markdown pre { overflow: auto }
.markdown pre code { display: block }
.markdown pre>code { border: 1px solid #ccc; white-space: pre; padding: .5em; margin: 0 }
.markdown code { border: 1px solid #ccc; padding: 0 5px; margin: 0 2px }
.markdown img { max-width: 100% }
.markdown table { padding: 0; border-collapse: collapse; border-spacing: 0 }
.markdown table tr td,.markdown table tr th { border: 1px solid #ccc; margin: 0; padding: 6px 13px }
.markdown table tr th { font-weight: 700 }
.markdown table tr th>:first-child { margin-top: 0 }
.markdown table tr th>:last-child { margin-bottom: 0 }
.markdown table tr td>:first-child { margin-top: 0 }
.markdown table tr td>:last-child { margin-bottom: 0 }
.markdown em.underline { font-style: normal; text-decoration: underline }
.markdown strong.highlight { color: #000; padding: 0 5px; background-color: #fdffb6 }
import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);.haroopad { padding: 20px; color: #222; font-size: 15px; font-family: "Roboto Condensed", Tauri, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", AppleSDGothicNeo-Medium, "Segoe UI", "Malgun Gothic", Verdana, Tahoma, sans-serif; background: #fff }
.haroopad a { color: #3269a0 }
.haroopad a:hover { color: #4183c4 }
.haroopad h2 { border-bottom: 1px solid #e6e6e6; line-height: 1.7em }
.haroopad h6 { color: #777 }
.haroopad hr { border: 1px solid #e6e6e6 }
.haroopad blockquote>code,.haroopad h1>code,.haroopad h2>code,.haroopad h3>code,.haroopad h4>code,.haroopad h5>code,.haroopad h6>code,.haroopad li>code,.haroopad p>code,.haroopad td>code { color: #000; background-color: #feecdd; border: 1px solid #efdfd0 }
.haroopad pre>code { font-size: 1em; font-family: Consolas, Inconsolata, Courier, monospace; letter-spacing: -1px; font-weight: 700 }
.haroopad blockquote { border-left: 4px solid #e6e6e6; padding: 0 15px; color: #777 }
.haroopad table { background-color: #fafafa }
.haroopad table tr td,.haroopad table tr th { border: 1px solid #e6e6e6 }
.haroopad table tr:nth-child(2n) { background-color: #f2f2f2 }
.hljs { display: block; padding: .5em; background: #fdf6e3; color: #657b83 }
.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.hljs-template_comment,.lisp .hljs-string { color: #93a1a1 }
.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title { color: #859900 }
.hljs-command,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula { color: #2aa198 }
.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal { color: #268bd2 }
.haskell .hljs-type,.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number { color: #b58900 }
.clojure .hljs-title,.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string { color: #cb4b16 }
.hljs-deletion,.hljs-important { color: #dc322f }
.hljs-link_label { color: #6c71c4 }
.tex .hljs-formula { background: #eee8d5 }
footer { position: fixed; font-size: .8em; text-align: right; bottom: 0; margin-left: -25px; height: 20px; width: 100% }

github page+jekyll搭建博客

第一次就写一下，自己在github上利用github page这个功能搭建博客的过程也算是一个教程吧。第一次写有什么不对的地方请大家指正啦。

准备工作

首先想要使用github page搭建一个博客你需要一些准备，也就是一些储备知识。你先要了解git的基本用法，这里推荐一些廖雪峰的博客，感觉写的很好很适合入门，我也是从他那里入门的。廖雪峰的git教程 然后去github的官网申请一个账号，然后我们就可以同时利用git强大的功能和github提供的服务来写博客了

克隆远程仓库

首先在github上新建一个仓库叫做yourusername.github.io记得吧yourusername替换成你的用户名。为什么要建这样一个仓库呢，因为github默认把这个当作github page。当然你也可以用其他的，其实每个项目都可以有一个静态页面，这里我用的就是默认的了。然后使用git clone....这个命令把项目克隆到本地，后面接的是你项目的地址。写博客就是在这个里面了。

搭建本地环境

官方使用的博客工具是jekyll，我用的也是这个。不过正如github上所写的，因为windows不是官方支持的平台所以比较麻烦。官方推荐用的是Chocolatey来安装jekyll，这是一个类似与apt-get这一类的软件包管理器。Chocolatey的安装方法在它的官网上有，十分的简单。chocolatey官网安装 记得也管理员的身份运行命令提示符，不然的话会安装失败。然后安装官方的教程配置环境。之后按照官方的文件配置环境就可以了。官方文档 这应该是最简单的方法了，也官方推荐的方法，当然你也可以手动安装。当初我因为网络的一些原因安装不了chocolatey，就是手动安装的。

尝试写博客

环境搭建好了就可以写博客了，你可以通过在git bash也可以在命令提示符里输入jekyll new loge这个命令来生成一个博客文件夹在所在的目录（还是感觉用git bash好一点）。结构大致是这样的：

1. 文件夹_layouts：用于存放模板的文件夹，里面有两个模板，default.html和post.html

2. 文件夹_posts：用于存放博客文章的文件夹，里面有一篇markdown格式的文章—2014-01-27-welcome-to-jekyll.markdown

3. 文件夹css：存放博客所用css的文件夹

4. .gitignore：可以删掉，后面会将项目添加到git项目，所以这个不需要了

5. _coinfig.yml：jekyll的配置文件，里面可以定义相当多的配置参数，具体配置参数可以参照其官网

6. index.html：项目的首页

根据的你的实际需要创建你需要的文件夹。

使用jekyll server -watch这个命令就可以在本地的浏览器查看一下效果了，-watch命令可以让你的修改实时的显示出来。至于具体的过程我也在学习中就不误人子弟了，你可以去jekyll的官网上看教程，也可以看网上别人的教程。中文官网当然在学习了基本的一些方法之后想要有一个漂亮的博客就可以去使用一下别人写好的模版了。然后根据自己的需要去改造了，在这个过程中不断的学习进步。这些模板在github上有很多，官方的网站上也有。主题官网链接

配置自己的个性化博客域名

github的默认博客域名是yourusername.github.io。想要一个个性化的域名的话也很简单。首先你要买一个域名，如果你是高校的学生的话可以去抢一下腾讯云的学生优惠资格，在上学期间每年可以有一个.cn的域名，一个月1元就可以有一个云服务器了。腾讯云 有了自己的域名之后先在解析里添加一个cname记录把你的域名向yourusername.github.io这个域名，然后在你的博客的根目录，也就是youusername.github.io这个文件夹里添加一个CANME文件在里面写上你的个性化域名。然后把它提交到远程仓库就可以了了，等解析完成了之后。在地址栏输入你的个性化域名就可以看到自己的博客了。

有兴趣的话可以去我的博客看一下，现在还是很简陋啦，也是直接借用别人的模板没做什么修改，附上链接尹傲雄的博客

generated by haroopad