用Github搭建个人博客
由 Ghostzhang 发表于 2014-09-04 14:30
上个月26号下午开始，原先博客的服务器宕机了，虽然一直觉得过段时间就会好的，不过一连3天都没恢复，开始有点忍不住了，内容还是好多的，没了多可惜啊，在公司登录不了管理后台，想从数据库把内容搞出来也做不到，如果是文件就好了，哭~~。虽然一直以来对Git1还停留在使用图形界面软件的程度，但还是想试试用GitHub2怎么折腾出一个博客出来。
搜索了关于github建站的文章后，看了前人各种安装node、ruby等天书般的命令就头大，最后还是选择了相对简单的hexo3，也在win7上成功搭建，教程见最下方。不过hexo的模板修改起来不太容易，看不懂，也就意味着只能用别人做好的theme，对于想要自己定制theme的同学来说，并不太适合。
这时候，阿成同学又出现了，提到另一个方法，就是利用github已支持的jekyll，按要求建目录、文件，然后直接传到github对应的项目中就可以了，github会自动解析模板并显示，此方法优点就是只需要安装git就可以了，模板的自由度高，但缺点也很明显，就是本地无法预览，不过这问题不大。
下面就总结下我使用的方法，希望能帮到有用github搭建个人博客的同学。
##站点
先看看阮一峰的《搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门》，看完对整个站点应该就有了一个大概的认识。如果你跟着他一步步做下来，无意外的话就能看到一个最简单的博客了。
目录结构
/ username.github.com
/ _layouts #框架文件
|-- default.html
/ _posts #要发布的文章放这里
|-- 2014-09-02-hello-world.html
|-- index.html
|-- _config.yml #配置文件站点已经建成，好像也没写下去的必要了。可是说好的美肤呢？不急，先来看看相关的语言。
###相关语言
在开始做皮肤之前，我们先来搞清楚模板还能做什么，像公共的头部、底部、导航什么的，这些在上面并没有提到，可是做为一个模板引擎，怎么都得支持吧。
在jekyll templates中可以看到，是支持include的，只需要在根目录下创建一个名为_includes的目录，把页面片放到这个目录中，然后用下面的语法加载对应的页面片文件即可：
{% include footer.html %} #加载名为 footer.html 的文件到当前位置
{% include footer.html param="value" %} #也可传参数到页面片文件中，在footer.html文件中使用{{ include.param }}引用对应的值目录结构
/ username.github.com
/ _layouts #框架文件
|-- default.html
/ _posts #要发布的文章放这里
|-- 2014-09-02-hello-world.html
/ _includes #如果需要用到页面片可以建这个目录
|-- footer.html
/ _data #自定义的数据内容
|-- links.yml
|-- index.html
|-- _config.yml #配置文件 于是，我们可以用同样的方法建立导航、头部之类的公用代码，然后放到_includes目录中，在需要的位置引用。
###相关插件
做为一个技术博客，常用会需要展示代码，有几种方式可以让我们在页面中展示所需的代码片断或者Demo效果。
####代码展示
#####直接展示
由于Github是支持使用Markdown的，所以我们可以使用Markdown的代码展示方式，具体可以看Markdown中的CODE BLOCKS部分。
#####高亮展示
对于代码的阅读体验，当然能高亮显示会更好些，jekyll也支持相应的代码高亮显示，像这样：
{% highlight 代码类型 %}
代码放这里
{% endhighlight %}支持的代码类型可以在List of supported languages and lexers查到。
#####第三方平台
代码展示可以选择类似cssdeck.com的服务，同类的还有jsfiddle、RunJS等。以csdeck为例，创建一个demo后，选择Share菜单上中间的 “Embed on your webpage (blogs, articles, etc.) “，会得到类似下面的一段代码：
<pre class="_cssdeck_embed" data-pane="output" data-user="ghostzhang" data-href="zaalj4cz" data-version="0"></pre>
<script async src="http://cssdeck.com/assets/js/embed.js"></script>我们可以把这段代码放到文章中，用来显示代码的效果。
为了引用更方便，这时我们就可以利用上面提到的include功能了，在 “_include” 目录下创建一个名为 “code.html” 的文件，内容如下：
<pre class="_cssdeck_embed" data-pane="output" data-user="换成你的用户名" data-href="{{ include.id }}" data-version="{{ include.v }}"></pre>
<script async src="http://cssdeck.com/assets/js/embed.js"></script> 注意里面的include.id、include.v，用于接收传进来的参数值，然后当我们要引用cssdeck上的代码时，只需要用下面的方式即可：
{% include demo.html id="zaalj4cz" v="0" %} #这里将id为zaalj4cz和版本为0两个参数传给include的页面片，即code.html再利用Sublime Text的Snippet，自定义一个代码片段，就可以更快的输入了，可以这样做：
- Tools > New Snippet…
- 内容见下方的Snippet代码
- 保存到Packages4目录中的任意位置，建议为 “/Packages/User/Snippet/”。
Snippet代码
<snippet>
<content><![CDATA[
{% highlight ${1:text} ${2:linenos }%}
${3:{% raw %\}
$0
{% endraw %\}}
{% raw %\}
$0
{% endraw %\}}
{% endhighlight %}
]]></content>
<!-- tabTrigger：定义快捷字符，可通过快捷字符+tab的方式快速输入 -->
<tabTrigger>co</tabTrigger>
<!-- scope：定义snippet在哪类文件中生效，这里指定了markdown类型 -->
<scope>text.html.markdown</scope>
</snippet>保存位置
|-- Packages
|-- User
|-- Snippet
|-- jekyll-code.sublime-snippet####添加RSS
要方便定阅，可以添加RSS输出到我们的站点上，大体分为三步：
1.修改设置文件
name: 站点名称
description: 站点说明
url: 站点URL2.在github上有一个jekyll-rss-feeds的项目，下载你需要的RSS文件放到站点根目录下
3.然后在页面的<head>区加上RSS的<link>即可，像
<link href='/feed.xml' rel='alternate' type='application/atom+xml' />详细可看《RSS for Jekyll blogs》这篇文章。
####评论系统
网上有几个可以嵌入到静态站点的评论系统，像多说、友言、畅言等等，还有Jekyll模板里默认使用的DISQUS。
安装都非常简单，申请账号，获取代码，然后修改几个参数（以多说为的代码为例）：
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{{ page.id }}" data-title="{{ page.title }}" data-url="{{ site.url }}{{ page.url }}"></div>
<!-- 多说评论框 end -->把上面的代码放到文章页模板的下面即可。
##编写文章
Markdown 有多个实现, Github, 以及国内很多社区都是使用 GFM 包括 Python China, Ruby China, SegmentFault 都用了 GFM 语法，有 Node 模块 marked 支持 GFM 的渲染，GFM 和原始 Markdown 的区别可以看轻量级标记语言了解更多。
除了Markdown之外，还可以用Textile语法来写，我原先使用的博客系统Textpattern就是使用这种语法。
###编辑器（Sublime Text）
知道编写的格式之后，有以有很多的编辑器可以选择，这里以Sublime Text为例，安装几个相关的插件，也可以把Sublime Text变成一个Markdown的编辑器。
####安装插件
先安装传说中的插件管理Package Control，非常简单，进入Sublime Text，按ctrl+~打开控制台，将对应的代码复制进输入框，回车然后等待完成，重启Sublime Text后会在 “Preferences” 菜单下看到 “Package Control”，说明安装成功。
SUBLIME TEXT 2
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')SUBLIME TEXT 3
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)然后就可以通过Package Control来安装下面的插件了，按ctrl+shift+p，找到 “Package Control: Install Package”，然后在搜索里输入插件名，回车即可，安装完成后不需求重启即可使用。
- Markdown Editing
- SublimeTmpl
- Markdown Preview
####设置
#####Sublime Text
修改保存文件时的默认后缀形式
- 新建一个空白文件，设置文件类型为 “Syntax - Markdown”
- 然后 “Preferences > Setting - more > Syntax Specific - User” 会打开 “Markdown.sublime-settings”，然后将下面的内容保存（文件名应该是：Packages/User/Markdown.sublime-settings）
{
"extensions": [ "md" ]
}#####Markdown Editing
在 “Preferences > Package Settings > Markdown Editing > Markdown GFM Settings - User” 里可以修改Makdown Editing的编辑界面和输出格式等等。
#####SublimeTmpl
在 “Packages/User/SublimeTmpl/templates/” 下增加一个模版文件：
|-- Packages
|-- User
|-- SublimeTmpl
|-- templates
|-- markdown.tmpl内容如下：
---
layout: article
title: ${1:文章标题}
date: ${date}
tags: $2
---
# {{ page.title }}
$0然后在 “Preferences > Package Settings > SublimeTmpl > Settings - Menu” 里加上
[
{
"id": "file",
"children":
[
{
"caption": "New File (SublimeTmpl)",
"children":
[
{
"caption": "Markdown",
"command": "sublime_tmpl",
"args": {
"type": "markdown"
}
},
......在 “Preferences > Package Settings > SublimeTmpl > Settings - Commands” 里加上
{
"caption": "Tmpl: Create Markdown", "command": "sublime_tmpl",
"args": {"type": "markdown"}
}在 “Preferences > Package Settings > SublimeTmpl > Settings - User” 里加上
{
"markdown": {
"syntax": "Packages/MarkdownEditing/Markdown.tmLanguage"
},
"attr": {
"author": "Ghostzhang" ,
"email": "lovej1bz@gmail.com",
"link": "http://blog.cssforest.org"
}
}#####Markdown Preview
修改设置文件 “Preferences > Package Settings > Markdown Preview > Settings - User” ，加入
{
"enabled_parsers": ["markdown"],
"github_mode": "gfm",
"enabled_parsers": ["github"],
"build_action": "browser"
}然后在编辑Markdown文件时，按下Ctrl+B即可在本地浏览器进行简单的预览了。
###其它Markdown免费编辑器
Windows 平台
Linux 平台
Mac 平台
在线编辑器
浏览器插件
- MaDe (Chrome)
##常用git命令
1 2 3 4 5 6 7 | git clone git@github.com:heiniuhaha/heiniuhaha.github.com.git//本地如果无远程代码，先做这步，不然就忽略 cd .ssh/heiniuhaha.github.com//定位到你blog的目录下 git pull origin master //先同步远程文件，后面的参数会自动连接你远程的文件 git status //查看本地自己修改了多少文件 git add .//添加远程不存在的git文件 git commit * -m "what I want told to someone" git push origin master //更新到远程服务器上 |
扫一扫
4052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
