简单说,只需要三步,就可以在 Github 搭建起一个博客:

  1. 在 Github 上建一个名为 xxx.github.io 的库;
  2. 把看中了的 Jekyll 模板 clone 到本地;
  3. 把这个模板 push 到自己的库;

下面为了从头展示如何用 Git + Github + Jekyll 搭建博客。

  一、在 Github 创建名为 username.github.io 的库

  按照 Github Pages 上的说明,首先要创建一个新的库,把它命名为 username.github.io。博客搭建成功后,这就是该博客的访问网址。

库名的第一部分需要与用户名一致才能生效。所以如果你的用户名是 MichaelMaoMao,库的名字就是MichaelMaoMao.github.io。

 

  关于「Initialize this repository with a README」这个选项是在初始化库的时候创建一个关于该库的说明,huangziwei建议不要勾选,自己提交一个,我为了省事勾选了,

如果你没有勾选,可以以后创建

  第一步完成,创建好了库,但是里面空空的,没什么东西,下面就要用到git工具向仓库存放主页和其他文件啦。

如果对git不熟悉的童鞋,可以参考 git教程,也可以在终端中输入 git help 命令来查看所有的命令。  

  如果你之前没有勾选README,现在可以打开终端,

  cd 到桌面,然后复制一下你库的地址:

  然后clone到桌面

  git clone https://github.com/username/username.github.io.git

  进入本地库

  cd username.github.io.git

  输入以下命令创建一个README.md:

  echo "# username.github.io" >> README.md

  git add README.md

  git commit -m "first commit"

  git push origin master

 

二、选择模板

  jekyllthemes.org 上有很多Jekyll模板,寻找自己喜欢的。我用的模板是 Skinny Bones,  这部分huangziwei讲的很清楚,我就直接用他的解释吧(他创建的库名是hyaojia):

首先,我们把 Scribble 这个库 clone 到本地:

$ git clone https://github.com/hyaojia/scribble.git

把名为 scribble 的文件夹改名为 hyaojia.github.io (不必要,理由跟之前一样,只是为了比较好找),只需要下面这行命令(mv 是移动文件夹的命令,可是也能用来重命名文件。

我明白,一开始这很难理解):

$ mv scribble hyaojia.github.io

然后我们可以进入现在叫 hyaojia.github.io 的文件夹里:

$ cd hyaojia.github.io

三、把博客托管到 Github Pages

  一般而言,克隆了别人的模板,第一件事要做的就是修改 _config.yml 里的个人信息。在 scribble 这个模板中,修改的地方不多,只需要把导航栏相关的连接修改成自己的就可以了,

比如 Blog 的 url 改成 http://hyaojia.github.io,邮件和 Github 帐号改成自己的帐号。

只要修改过文件,我们就需要重复 git add 和 git commit 这两步:

$ git add .
$ git commit -m 'modified _config.yml'

git add . 里的一点,指把当前目录所有修改过的文件都加到 Staged Area 去。

前面我们说过 git remote -v。因为我们直接 clone 了别人的库,所以 clone 下来的文件夹里,已经登记了模板作者的远程库信息:

$ git remote -v
origin https://github.com/muan/scribble.git (fetch)
origin https://github.com/muan/scribble.git (push)

我们要把 origin 的地址改成我们之前创建的 username.github.io 库的地址:

$ git remote set-url origin https://github.com/username/username.github.io.git
$ git remote -v
origin https://github.com/username/username.github.io.git (fetch)
origin https://github.com/username/username.github.io.git (push)

现在已经变成我们自己的了。

最后输入

$ git push -u origin master

如果没有绑定 SSH key,一般会要求输入用户名和密码。输入后则会出现

Counting objects: 268, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (187/187), done.
Writing objects: 100% (268/268), 224.02 KiB | 0 bytes/s, done.
Total 268 (delta 76), reused 268 (delta 76)
To https://github.com/hyaojia/hyaojia.github.io.git
* [new branch] master -> master

代表成功推送。现在在浏览器输入网址 http://username.github.io,则可以看到博客的样子了。

如果没有修改模板的需求,利用 Git + Github + Jekyll 搭建博客大概就是这样子。写文章,只需要在 _post/ 文件加中,加入带有 YAML 头信息(YAML front matter)

的 markdown 文件,然后 push 到 Github,就会被自动渲染成 HTML。比如,增加一篇名为 My First Post 的博客,在本地创建一个文件名带有日期的 markdown 文

件 2015-04-20-my-first-post.md(里面要写好头信息):

---
layout: post
title: My First Post
--- 这是我的第一篇博客

最后按上述方法(git add / git commit / git push)推送到 Github,就大功告成了。

四、添加评论

  一个博客少不了交流,如果你想让别人评论,可以选择将评论托管给Disqus。

  4.1 访问Disqus注册帐号,并验证邮箱;

   4.2 登录后点击Add Disqus To Site ,

  填写所连接博客的名字,选择一个disqus的url (最好和你的用户名一致,方便查看):

  

  4.3 然后在你本地github.io文件里修改_config.yml配置文件,在disqus_shortname:后面添加你的disqus名称:

  

  4.4 最后修改好之后,add, commit, push到github, 过一会刷新一下就可以看到下面的评论区了。enjoy,  ;)

  附上我刚建好的小站, 欢迎留言: http://michaelmaomao.github.io

参考链接:

  1. huangziwei的博客, 很耐心的教程.

  2. isnowfy做一个博客theme.

  3. 搭建Disqus评论区.

  4. git教程.

  5. 如何搭建一个独立博客

在github上搭建博客(使用Jekyll)的更多相关文章

  1. 利用Octopress在Github上搭建博客及后续问题总汇

    首先贴一下我的新博客地址: http://findingsea.github.io 用Octopress在GitHub上搭建博客已经不是什么新鲜事了,网上的教程也多了去了,大题的方法什么都差不多,这篇 ...

  2. 基于Hexo且在GitHub上搭建博客

    title: 基于Hexo且在GitHub上搭建博客 Welcome to Fofade's Blog! 搭建初衷 大大小小,大学两年,玩了很多,也学了很多. 回首望之,曾经不知道的,现在是知道了,但 ...

  3. 在github上搭建博客的问题

    最近想到要建立一个自己的博客,以便记录自己在学习中遇到的问题.发现github免费提供空间,正好可以利用它来搭建自己的博客.毕竟github pages免费空间,不限制流量,每次的博客改动和博客模板的 ...

  4. 在Github上搭建博客

    貌似还是这个链接最靠谱呀 http://my.oschina.net/nark/blog/116299   如何利用github建立个人博客:之一 在线编辑器http://markable.in/ed ...

  5. 使用Jekyll在Github上搭建博客

    最近在玩github,突然发现很多说明网站或者一些介绍页面全部在一个域名是*****.github.io上. 好奇!!!真的好奇!!!怎么弄的?我也要一个~~~ 于是去网站上查询了一下,找到了http ...

  6. 用Jekyll在github上写博客——《搭建一个免费的,无限流量的Blog》的注脚

    本来打算买域名,买空间,用wordpress写博客的.后来问了一个师兄,他说他是用github的空间,用Jekyll写博客,说很多人都这么做.于是我就研究了一下. 比较有价值的文章有这么几篇: htt ...

  7. 用Jekyll在github上写博客

    用Jekyll在github上写博客——<搭建一个免费的,无限流量的Blog>的注脚 本来打算买域名,买空间,用wordpress写博客的.后来问了一个师兄,他说他是用github的空间, ...

  8. 利用github page搭建博客

    为什么选择GitHub Pages? 很多人用 wordpress,你为什么要用 github pages 来搭建? 1.github pages有300M免费空间,资料自己管理,保存可靠: 2.学着 ...

  9. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

随机推荐

  1. Android常用Manager整理

    Android中常用Manager: ActivityManager,FragmentManager,PackagerManager, DownloadManager,ConnectivityMana ...

  2. Windows环境下Android NDK环境搭建

    前面介绍Windows下Android 开发环境配置,主要是面向JAVA开发环境,对只做APK上层应用开发人员来讲,基本够用了,由于Linux系统的权限限制和Android封装架构限制,很多涉及底层设 ...

  3. C# Get Desktop Screenshot ZZ

    I found this feature while looking inside Graphics class and since it was so simple to use, I decide ...

  4. Oracle 12c最新特性

    9 Pluggable Databases This section provides details on the Pluggable Databases (PDB) metrics. 9.1 Da ...

  5. HDOJ/HDU 1087 Super Jumping! Jumping! Jumping!(经典DP~)

    Problem Description Nowadays, a kind of chess game called "Super Jumping! Jumping! Jumping!&quo ...

  6. HDOJ 1004题 Let the Balloon Rise strcmp()函数

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  7. Bzoj 2789: [Poi2012]Letters 树状数组,逆序对

    2789: [Poi2012]Letters Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 278  Solved: 185[Submit][Stat ...

  8. codeforces 358D

    题目链接:http://codeforces.com/contest/358/problem/D #include<cstdio> #include<iostream> #in ...

  9. hdoj 1896 Stones【优先队列】

    Stones Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Subm ...

  10. DirectShow Filter 开发典型例子分析 ——字幕叠加 (FilterTitleOverlay)1

    本文分析一下<DirectShow开发指南>中的一个典型的Transform Filter的例子:字幕叠加(FilterTitleOverlay).通过分析该例子,我们可以学习到Direc ...