用Github搭建个人博客

来源：互联网发布：libreoffice数据库编辑：程序博客网时间：2024/06/08 07:06

用Github搭建个人博客

由 Ghostzhang 发表于 2014-09-04 14:30

上个月26号下午开始，原先博客的服务器宕机了，虽然一直觉得过段时间就会好的，不过一连3天都没恢复，开始有点忍不住了，内容还是好多的，没了多可惜啊，在公司登录不了管理后台，想从数据库把内容搞出来也做不到，如果是文件就好了，哭~~。虽然一直以来对Git¹还停留在使用图形界面软件的程度，但还是想试试用GitHub²怎么折腾出一个博客出来。

搜索了关于github建站的文章后，看了前人各种安装node、ruby等天书般的命令就头大，最后还是选择了相对简单的hexo³，也在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的服务，同类的还有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代码
保存到Packages⁴目录中的任意位置，建议为 “/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”，然后在搜索里输入插件名，回车即可，安装完成后不需求重启即可使用。

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: articletitle: ${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 平台

MarkdownPad
MarkPad

Linux 平台

ReText

Mac 平台

在线编辑器

Markable.in
Dillinger.io

浏览器插件

MaDe (Chrome)

##常用git命令

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

0 0