如何在github上搭建自己的博客

如何在github上搭建自己的博客

之前闲暇之余尝试着在github上搭建自己的博客，搭建过程中发现没有自己想象的那么容易，几经波折，好不容易才搭建好了雏形。现在就将在github上构建自己博客的整个流程好好总结一下。

注：本文并非完全原创，在搭建自己博客的时候，我也上网查阅了很多资料，只是网上我所查到的资料或多或少都有这样那样的欠缺。所以，我将这些资料整合在一起，并分享我在构建过程中遇到的问题和解决方法。

另外，在github构建自己博客并非只有一种方法，我整合出来的只是其中的一种。

1.建立一个项目

先在GitHub创建一个项目，名字随意，尽量全部小写字母，避免随后会碰到的URL冲突问题。

1.1 在自己github右上角上，点击+号按钮，在出现的菜单中选择 New repository

1.2 进入到创建仓库页面，给仓库命名并给于描述之后，点击create repository按钮创建仓库

项目创建完毕。

2.安装Git

git是一个免费的、分布式的版本控制工具，或是一个强调了速度快的源代码管理工具。

git的安装地址(http://msysgit.github.io/)

关于git的具体安装步骤可参考http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

关于git的常用命令可参考http://www.bootCSS.com/p/git-guide/

3.clone项目

本地运行Git，随意选个目录，将刚才创建的项目clone下来。

例：

cd /e/bloggit clone https://github.com/stxwd46/EX.github-io.gitcd EX.github-io

4.建立配置文件_config.yml

注意：之后建立的所有文档务必使用UTF-8 无 BOM(隐藏字符) 的编码保存

在项目的根目录下打开git命令行界面，输入命令 >> _config.yml 新建文件_config.yml，填写baseurl: /blogdemo， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径。

例：

baseurl: /EX.github-io

目录结构变为

/EX.github-io    |--　_config.yml

5.建立主页

在根目录下新建文件index.html， 内容如下：

---title: Hello, My Blog---{{ page.title }}

每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线"---"，标记开始和结束，里面每一行设置一种元数据。"title: Hello, My Blog"，表示该文章的标题是"Hello, My Blog"，如果不设置这个值，默认使用嵌入文件名的标题，即"hello world"。

在yaml文件头后面，就是文章的正式内容，{{}}这些是Liquid模板语言,在{{}}里面我们可以使用模板变量。{{ page.title }} 表示“本页面的标题”，因为我们前面设置了title为Hello， My Blog。所以到时候进入到博客首页，title 就会显示相应的文案。

目录结构变成：

/EX.github-io    |--　_config.yml    |--   index.html

6.在_posts内撰写文章，并在首页加入文章列表

现在首页有了，那我们怎么发博文上去呢？

回到项目根目录， 打开git bash，运行mkdir _posts新建一个目录，看名字也知道啦，这里存放你所有的文章。

进入_posts目录，新建一篇文章。注意默认的文件名格式是year-month-day-postTitle这样。比如2015-05-05-my_first_article.md，尽量避免空格或者其他乱七八糟的字符，这个文件名将作为URL的生成依据。文件名的格式可以通过修改_config.yml中的 permalink 属性而改变，默认值为date，也就是我们刚刚创建的文件的样子，具体的规则可以看这里。

如果你发现了我刚才创建的文件后缀名是.md，熟悉GitHub或者StackOverFlow的朋友应该知道Markdown 格式。对于不熟悉前端的人来说，用markdown可以避开HTML，转而使用更加直观的Markdown语法。如果不熟悉Markdown语法也没关系，可以参见这份Markdown 语法说明，应该说是相当易学，并且在熟悉之后非常易用的。而作为一个前端开发者来讲，我还是更倾向于用html。

回到主题，打开刚才创建的文件，输入如下内容：

---title: 我的第一篇文章---# {{ page.title }}## 目录+ [第一部分](#partI)+ [第二部分](#partII)+ [第三部分](#partIII)----------------------------------## 第一部分

这里是第一部分的内容----------------------------------## 第二部分

这里是第二部分的内容----------------------------------## 第三部分

这里是第三部分的内容{{ page.date|date_to_string }}

这段内容中使用了最常用的几种Markdown语法，比如使用 # ，## 表示 HTML 中的<h1></h1>,<h2></h2>。使用[text](link)创建超链接，使用 连续多个-创建水平线（注意：不包括最上端包围title所使用的横线，那里表示一个页面的“头属性”），等等。更多详细的语法可以在之前提到的页面查询，这里不再赘述，总之，这是一种更加贴近真实写作的语法，推荐大家尝试。

页面最后面的那个{{ page.date|date_to_string }}是指显示本页的日期属性，并且转换为可读的字符串形式。同样也是Liquid语法。

OK，第一篇文章就写好了，然后到主页给文章加上入口链接。

打开我们的 index.html 文件，添加内容，变成下面这样：

---title: My Blog---{{ page.title }}{% for post in site.posts %}{{ post.date|date_to_string }} <a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>{% endfor %}

简单解释一下，Liquid标记最主要分为两种，一种是直接输出变量内容，像这样：

{{ page.title }}

另一种则是逻辑命令形式的，像这样：

{% for x in y %} ... {% endfor %}

而刚才写进主页的内容，就是遍历所有post文件，然后逐一显示在页面上，这里需要注意的一点就是在创建文章的超链接时，除了post.url之外，也要注意在前面加上site.url，原因前面也有提到过，我们正在创建的是 PRoject Pages 类型的网站，其最终生成的网址根目录是：username.github.com/projectname，而 post.url 生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。

现在检查一下更改的所有内容，确认不要犯下愚蠢的错误，比如把 “.” 打成 “。“或者单词拼错之类的。

目录结构变为

/EX.github-io    |--　_config.yml    |--   index.html    |--   _posts    |    |--　2015-05-05-my_first_article.md

7.配置SSH keys

为什么要配置ssh keys？因为github和本地代码做推送和拉取时，需要用到ssh的密钥对进行数据加解密，由于github上新建的项目没有添加密钥，所以本地仓库连接不到远程仓库。

那么如何配置ssh keys呢？

7.1 我们需要检查你电脑上现有的ssh key：

cd ~/.ssh

如果提示：No such file or directory 说明你是第一次使用git。

7.2 生成新的ssh keys：

ssh-keygen -t rsa -C "邮件地址@youremail.com"

注意1: 此处的邮箱地址，你可以输入自己的邮箱地址；注意2: 此处的「-C」的是大写的「C」。

按回车后出现

再按一次回车即可。

然后系统会要你输入密码：

Enter passphrase (empty for no passphrase):<输入加密串>Enter same passphrase again:<再次输入加密串>

在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意：输入密码的时候没有*字样的，你直接输入就可以了。

最后看到这样的界面，就成功设置ssh key了：

7.3 添加ssh key到GitHub

在本机设置SSH Key之后，需要添加到GitHub上，以完成SSH链接的设置。

• 1、打开本地C:/Documents and Settings/Administrator.ssh/id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。

• 2、登录你的GitHub个人主页。点击右上角的 Settings进入设置页面，然后点击SSH Keys页面中的Add SSH key按钮

• 3、把你本地生成的密钥复制到里面（key文本框中）， 点击 add key 就ok了

8.发布到GitHub

这个时候我们就可以把页面提交到github上了，到根目录打开git命令行界面

8.1 把刚创建的所有文件添加到本地git库

git add -A

8.2 保持良好的习惯，每次提交都提交添加描述

git commit -m "create my blog"

8.3推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的Project Pages，GitHub规定，只有该分支中的页面，才会生成网页文件。即GitHub仅会将分支gh-pages下的内容进行自动生成操作， 所以本地的 master 分支应推送到远端的 gh-pages 分支

git push origin master:gh-pages

输入账号和密码，账号即你的GitHub账号(不是昵称，是账号名！)，输入密码的时候命令行界面不会有任何的变化，所以在输入密码的时候要谨慎小心。之后按回车即可。

好了，那现在我们要如何查看我们的博客页面呢。打开GitHub，进入到自己博客的仓库，右侧菜单栏有一个setting选项

点击进入之后会看到这个页面

GitHub Pages中显示的链接就是你的博客地址啦。

9.增加模板套装_layouts

其实到第8步博客的构建就已经完成了，只是没有样式的博客实在太难看。GitHub Pages有提供一些主题给我们使用。但作为一个前端开发者，肯定更希望自己给自己的博客布局和创建样式。

回到项目根目录，新建文件夹_layouts，顾名思义，“布局”是也。在_layouts中新建一个最基本的布局文件，姑且命名为default.html好了：

<!DOCTYPE html><html>    <head>      <meta http-equiv="content-type" content="text/html; charset=utf-8" />      <title>{{ page.title }}</title>    </head>    <body>      {{ content }}    </body></html>

首先，charset=utf-8让我们一劳永逸地解决了UTF-8的编码问题，随后指定了正文内容的位置，当然在这里只是一个最简单的内容，在body内仅有一个 {{ content }} 标签，你可以根据自己的喜好对页面进行任何改动，只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章，只要在头属性上加一句就好：

---title: xxoolayout: default.html---

我们当然还可以把这个结构变得更灵活一些，比如继续新增两个模板分别叫做l_post.html与l_index.html，他们首先引用default.html，但在其基础上做出一定的修改。然后首页使用l_index模板，而所有的post文件则使用l_post模板，等等等等，请随意发挥。但始终记得加上{{ content }}标签

目录结构变为

/EX.github-io    |--　_config.yml    |--   index.html    |--   _posts    |    |--　2015-05-05-my_first_article.md    |--   _layouts    |    |--　default.html

再次推送到GitHub即可。

这样，我们就已经构建好了一个最简单的blog。之后你们就可以开始为自己的博客添砖加瓦了。

10.问题汇总

　　10.1 推送到GitHub之后个人主页的contributions没有提交记录

　　Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。

　　如何查看自己的名称和邮箱呢。回到GitHub个人主页，点击右上角的setting图标

　　进入之后Personal settings菜单栏下的Profile页面中，Name即为你的名字

　　但邮箱不是Name下面的Public email，很多人在这里被误导了。邮箱是E