在GitHub下新建个人博客网站

写在前面

此篇博文为翻译之作，原文链接为Creating and Hosting a Personal Site on GitHub.

正文

需要用到的知识

1. 版本控制
2. Git
3. GitHub
4. HTML
5. CSS
6. Markdown

当然，并不需要对这些很熟练。一种很好的学习方法是“做中学”（learn by doing)

此篇博文着重介绍如何用github.com的网页界面去建个人网站

什么是Git,GitHub和GitHub Pages

简单来说，Git是完成事情的工作流，而GitHub和GitHub Pages 是存储你完成东西的地方。使用Git的项目公开地保存在GitHub 和GitHub Pages 上，于是广义上说，Git 是你可以在你个人PC上做的事情，GitHub是存储你做出东西的公开服务器。

Git

Git 是一个版本控制系统，跟踪项目中文件的修改情况。记录文件的修改——添加了什么？删了什么？谁做的这些修改？什么时间修改的？尤其在软件合作开发时适用。这种合作的特性引起了人们把他当做一项帮助自己编辑工作流的工具。

Git 可以高效管理多个版本文件并且回到不同版本的文件而不需要被保存在不同地方的不同版本的文件名所迷惑。从这个意义上来说，Git 和版本控制就像神奇的取消按钮。

在下面的示意图中，每个文档表示一个保存过程。没有Git, 你不能回到最初的文档和最终文档间的任意一个文档状态。如果你想修改最终的文档，要删掉一些不能复原的东西，这时你会选择另存为，然后在进行删除操作。

有了Git之后，这个流程有了更多的方向。每一个修改都会被标记。如果你想回到早期的版本，，你就可以可以在不损失数据的情况下回到早期文档。
详细了解Git

git-basics.png

GitHub Pages

GitHub Pages 是通过GitHub免费的公开网页。GitGub用户可以创建并且拥有自己的网站，以及连接自己在GitHub上项目的网站。

新建个人网页

step 1

创建项目存储仓库

01-create-repo.png

step 2

将自己的仓库命名为username.github.io ,username是你的GitHub用户名。

02-name-repo.png

step 3

创建index.html

03-01-create-index-page.png

03-02-create-index-page.png

    
        
    
    
        

            

                
Home
                
About
                
CV
                
Blog
            
        
        

            

                
Hi there, I'm Hank Quinlan!
                
I'm best known as the horrible cop from A Touch of Evil Don't trust me. Read more about my life...
            

        

        

            

                
email
                
github.com/hankquinlan
            
        
    

step 4

提交index.html
提交后你就有了一个自己的网站
http://username.github.io

step 5

创建样式

05-01-create-css-file.png

添加链接至main.css （粗体）

    
        
        
        
    
    
        

            

                
Home
                
About
                
CV
                
Blog
            
        
        

            

                
Hi there, I'm Hank Quinlan!
                
I'm best known as the horrible cop from A Touch of Evil Don't trust me. Read more about my life...
            

        

        

            

                
email
                
github.com/hankquinlan
            
        
    

使用Jekyll

Jekyll 是一个很轻大的静态网页产生器。跟GitHub一起使用，Jekyll会自动重新生成所有的改动过文件的HTML页面。Jekyll之所以这么好用是因为它依赖模板。当你使用静态网页生成器时，模板是你的好朋友。

在github.com上使用Jekyll

step 1

新建 .gitignore 文件。这个文件告诉Git忽略_site目录，每次你提交文件时，Jekyll会自动产生网页。因为这个目录下的文件是在你每次提交时写入，所以不希望受版本控制的影响。

step 2

新建 _config.yml文件，这个文件告诉Jekyll关于你项目的基本信息。举个例子，我们告诉Jekyll我们网站的名字以及我们所使用的markdown的版本

name: Hank Quinlan, Horrible Cop
markdown: kramdown

新建_layouts目录，在里面新建文件default.html
这时我们主要的模板，它会应用到所有和

元素上面去。于是我们不需要在每个页面的源码上重复劳动。

step 3

更新index.html

---
layout: default
title: Hank Quinlan, Horrible Cop
---

    
Hi there, I'm Hank Quinlan!
    
I'm best known as the horrible cop from A Touch of Evil Don't trust me. Read more about my life...

---之间的文字Jekyll称之为Front-matter.现在当你每次提交一个文件当文件头明确指出layout：default时，Jekyll会神奇地生成整个HTML把_layouts/default.html中的{{content}}替换为该文件。

开始写博客咯

基于Jekyll的博客就是充分利用了上述说的那些便利。

step 1

在_layouts 中新建post.html文件。

---
layout: default
---
{{ page.title }}
{{ page.date | date_to_string }}


  {{ content }}

step 2

新建_posts/目录保存我们的博客post。Jekyll严格要求命名，YYYY-MM-DD-title-of-my-post.md那么例子应当命名为2014-04-30-hank-quinlan-site-launched.md

---
layout: post
title: "Hank Quinlan, Horrible Cop, Launches Site"
date: 2014-04-30
---

Well. Finally got around to putting this old website together. Neat thing about it - powered by [Jekyll](http://jekyllrb.com) and I can use Markdown to author my posts. It actually is a lot easier than I thought it was going to be.

.md是markdown文件的扩展名，Jekyll会将其转换为HTML。提交这个post之后，你就便可以在http://username.github.io/YYYY/MM/DD/name-of-your-post中看到post了。
但是你的读者并不知道你的post的正确URL。所以下面我们需要新建一个页面，在上面罗列出我们博客的标题及超链接。

step 3

新建一个blog目录，并且新建一个文件index.html。为了列出我们的post,我们需要用一个foreach循环去新建一个我们博客的无序列表。

---
layout: default
title: Hank Quinlan's Blog
---
    
{{ page.title }}
    


      {% for post in site.posts %}
        
{{ post.date | date_to_string }} » {{ post.title }}
      {% endfor %}
    

个性化你的博客

step 1

编辑_config.yml，添加

permalink: /blog/:year/:month/:day/:title

可以很简单地配置你博客的RSS feed.每次你发布一篇post,它会自动添加进RSS file.

step 2

---
layout: feed
---



    
    
    
    {{ site.time | date_to_xmlschema }}
    http://hankquinlan.github.io/blog
    
        Hank Quinlan
        [email protected]
    

    {% for post in site.posts %}
        
            
            
            {{ post.date | date_to_xmlschema }}
            http://hankquinlan.github.io/{{ post.id }}
            {{ post.content | xml_escape }}
        
    {% endfor %}

这样就可以方便读者订阅你的RSS了。

大功告成

新建其他页面并提交

下一步

• 新建_includes
• 自定义域名
• 添加博客的页数统计
• 新建sitemap.xml，方便SEO
• 新建development分枝
• 更多灵感http://jekyllrb.com/docs/sites/
  https://github.com/jekyll/jekyll/wiki/Sites

资源

Git, GitHub, and GitHub Pages

Git Documentation
Learn Git and GitHub in 15 minutes
GitHub Pages Help
GitHub Help
GitHub Cheat Sheet
GitHub Glossary
GitHub For Academics

Jekyll

Sites Using Jekyll
Blog Migrations to Jekyll

Markdown

Official Markdown Spec
Printable Markdown Cheatsheet
Markdown Cheatsheet
GitHub Flavored Markdown