How to build your own blog on github_html/css_WEB-ITnose

I tried to build my own blog on github in my spare time. During the process, I found that it was not as easy as I thought. After many twists and turns, I finally built the prototype. Now I will summarize the entire process of building your own blog on github.

Note: This article is not completely original. When I was building my own blog, I also checked a lot of information online, but the information I found online was more or less lacking in one way or another. So, I'm putting this material together and sharing the problems I encountered during the build process and how I solved them.

In addition, there is not only one way to build your own blog on github, what I integrated is just one of them.

1. Create a project

First create a project on GitHub with a random name, using all lowercase letters as much as possible to avoid URL conflicts that may be encountered later.

1.1 In the upper right corner of your github, click the button and select New repository in the menu that appears

1.2 Enter the create warehouse page, name the warehouse and give After the description, click the create repository button to create the repository

The project is created.

2. Install Git

Git is a free, distributed version control tool, or a source code management tool that emphasizes speed.

git installation address (http://msysgit.github.io/)

For specific installation steps of git, please refer to http://jingyan.baidu. com/article/90895e0fb3495f64ed6b0b50.html

For common git commands, please refer to http://www.bootcss.com/p/git-guide/

3.clone project

Run Git locally, select a directory at will, and clone the project you just created.

Example:

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

4. Create the configuration file _config.yml

Note: All documents created later must be used UTF-8 encoding without BOM (hidden characters) is saved

Open the git command line interface in the root directory of the project, enter the command >> _config.yml Create a new file _config.yml and fill in the baseurl :/blogdemo, blogdemo is your project name, this line specifies the root path of the entire website.

Example:

baseurl: /EX.github-io

The directory structure becomes

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

5. Create a homepage

Create a new file index.html in the root directory with the following content:

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

The head of each article must have a yaml file header to set some metadata . It uses three dashes "---" to mark the beginning and end, and each line in it sets a kind of metadata. "title: Hello, My Blog" means that the title of the article is "Hello, My Blog". If this value is not set, the title embedded in the file name will be used by default, that is, "hello world".

After the yaml file header, there is the official content of the article. {{}} These are the Liquid template language. In {{}} we can use template variables. {{ page.title }} means "the title of this page", because we set the title to Hello, My Blog earlier. So when you enter the blog homepage, the title will display the corresponding copy.

The directory structure becomes:

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

6. Write an article in _posts and add the article list to the homepage

Now there is Okay, so how do we post a blog post?

Go back to the project root directory, open git bash, and run mkdir _posts to create a new directory. You will know it by looking at the name. All your articles will be stored here.

Enter the _posts directory and create a new article. Note that the default file name format is year-month-day-postTitle. For example, 2015-05-05-my_first_article.md, try to avoid spaces or other random characters. This file name will be used as the basis for URL generation. The format of the file name can be changed by modifying the permalink attribute in _config.yml. The default value is date , which is what the file we just created looks like. The specific rules can be found here.

If you noticed that the file suffix I just created is .md, friends who are familiar with GitHub or StackOverFlow should know the Markdown format. For those who are not familiar with the front-end, using markdown can avoid HTML and instead use the more intuitive Markdown syntax. It doesn’t matter if you are not familiar with Markdown syntax. You can refer to this Markdown syntax description. It should be said that it is quite easy to learn and very easy to use after becoming familiar with it. As a front-end developer, I still prefer to use html.

Go back to the topic, open the file you just created, and enter the following content:

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

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

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

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

这段内容中使用了最常用的几种Markdown语法，比如使用 # ，## 表示 HTML 中的 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a , c1a436a314ed609750bd7c7d319db4da2e9b454fa8428549ca2e64dfac4625cd。使用[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。之后你们就可以开始为自己的博客添砖加瓦了。

9.问题汇总

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

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

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

　　

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

    

　　但邮箱不是Name下面的Public email，很多人在这里被误导了。邮箱是Emails页面中的邮箱地址

　

　　知道了名字和邮箱之后，打开git命令行界面，通过下面的命令行来设置你的名字和邮箱

git config --global user.name "cnfeat"//用户名git config --global user.email  "cnfeat@gmail.com"//填写自己的邮箱

　　设置正确之后，提交记录就都恢复了。不仅仅你以后提交的都会出现在提交记录中，你以前提交的也会恢复并出现在记录中。

　　9.1 每次提交都要求你输入账号跟密码

　　原因是我们在clone分支时使用了 HTTPS 的地址，

　　HTTPS 的地址是做什么用的呢？其实它主要是用在一些防火墙或者代理服务器设置比较严格的情况下的，比如有些公司是禁止使用 SSH 连接外网，那么在这种情况下要想使用 Git 的话，就只能用 HTTPS 的方式了。

　　使用 HTTPS 的方式，也有储存密码的方式，但我们首推的方式是切换到 SSH，如果你的网络环境支持的话。

　　回到你博客的根目录。打开git命令行界面，输入

git remote set-url 你博客的ssh url

　　如果你不知道你博客的ssh url，打开你的博客项目，右下角选择SSH，然后复制框里的url就行了

     

　　之后再提交就不会要求你输入账号密码了。

　　9.3 页面调试不方便

　　如果我们要给我们的博客布局或设置样式神马的，我们是否每次都要把代码写好然后推送到GitHub上，再打开自己的博客地址，看看布局有没有什么问题。如果有的话再改代码，再提交，再查看呢？

　　这样效率岂不是很低，有没有能够本地调试GitHub Pages上的页面的工具呢？

　　答案是肯定的。我用的是Jekyll。它的官网就有完整的教程，使用起来非常的简便。

10.参考资料

　　1.http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

　　2.

　　3.http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/

　　4.http://www.open-open.com/lib/view/open1366080269265.html