用Github搭建个人博客

Ghostzhang 发表于

上个月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 #配置文件

站点已经建成,好像也没写下去的必要了。可是说好的美肤呢?不急,先来看看相关的语言。

相关语言

在开始做皮肤之前,我们先来搞清楚模板还能做什么,像公共的头部、底部、导航什么的,这些在上面并没有提到,可是做为一个模板引擎,怎么都得支持吧。

  • YAML 一个几乎所有编程语言都支持的易读的数据序列化标准。
  • jekyll
  • Liquid Ruby的一个模板引擎库。

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的服务,同类的还有jsfiddleRunJS等。以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.idinclude.v,用于接收传进来的参数值,然后当我们要引用cssdeck上的代码时,只需要用下面的方式即可:


{% include demo.html id="zaalj4cz" v="0" %} #这里将id为zaalj4cz和版本为0两个参数传给include的页面片,即code.html

再利用Sublime Text的Snippet,自定义一个代码片段,就可以更快的输入了,可以这样做:

  1. Tools > New Snippet…
  2. 内容见下方的Snippet代码
  3. 保存到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: 站点URL

2.在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”,然后在搜索里输入插件名,回车即可,安装完成后不需求重启即可使用。

设置

Sublime Text

修改保存文件时的默认后缀形式

  1. 新建一个空白文件,设置文件类型为 “Syntax - Markdown”
  2. 然后 “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 平台

在线编辑器

浏览器插件

常用git命令

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 //更新到远程服务器上

参考文章

Sublime

hexo

Git

  1. Git Linus Torvalds写的分布式版本管理系统,用与管理Linux的开发。

  2. GitHub 一个提供Git托管服务的网站。

  3. hexo 一个快速,简单和功能强大的博客,基于node.js。

  4. 可以在菜单 “Preferences > Browse Packages…” 找到目录的位置。

评论列表