通过GitHub Pages建立个人站点总结与体会

通过GitHub Pages建立个人站点总结与体会 ----Git+Github+Jekyll+Markdown

blog

Git

(不会?请参照简易教程学习Git的总结)

首先感谢雨知网站作者博文指点.

Github

两种pages模式

User/Organization Pages 个人或公司站点

1) 使用自己的用户名，每个用户名下面只能建立一个

2) 资源命名必须符合这样的规则username/username.github.com

3) 主干上内容被用来构建和发布页面

Project Pages 项目站点

1) gh-pages分支用于构建和发布

2) 如果user/org pages使用了独立域名,那么托管在账户下的所有project pages将使用相同的域名进行重定向,除非project pages使用了自己的独立域名

3) 如果没有使用独立域名,project pages将通过子路径的形式提供服务username.github.com/projectname

4) 自定义404页面只能在独立域名下使用,否则会使用User Pages 404

5) 创建项目站点步骤：

$ git clone https://github.com/USERNAME/PROJECT.git PROJECT
$ git checkout --orphan gh-pages
$ git rm -rf .
$ git add .
$ git commit -a -m "First pages commit"
$ git push origin gh-pages

可以通过User/Organization Pages建立主站，而通过Project Pages挂载二级应用页面。

1)创建个人站点

2)设置站点主题,进入你的项目-setting

3)更新你的站点

4) 选择主题并发布

简明扼要步骤在github网页上建立项目,本地克隆或建同名称项目,在git bash上操作如下:

切换到项目目录->git init->git add --all->git commit -m "xxx"->git remote add origin git@github.com:yourgithubname/yourdemo->git push origin master

其中克隆的话只需前后两步.

使用Jekyll搭建博客

Jekyll是一种简单的、适用于博客的、静态网站生成引擎。它使用一个模板目录作为网站布局的基础框架，支持Markdown、Textile等标记语言的解析，提供了模板、变量、插件等功能，最终生成一个完整的静态Web站点。说白了就是，只要安装Jekyll的规范和结构，不用写html，就可以生成网站。jekyll本地环境搭建

需要下载ruby,我下的

Ruby 2.2.2

在下载时勾选环境变量，path中配置那一项，然后在电脑的开始->所有程序->Ruby文件夹->start command prompt命令行终端下输入gem update --system来升级gem

此处可能会出现: gem update --system的Gem::RemoteFetcher::FetchError错误

方法:索性换成淘宝的镜像。

gem source查看列表；

gem source -a http://ruby.taobao.org 加入淘宝的源，居然没用https，也就不存在这个问题了；

gem source -r https://rubygems.org/ 干掉缺省的源；

gem update --system (此命令在Ruby文档下完成)

下载最新的DevKit

在刚才的命令行中敲入

cd C:\DevKit

ruby dk.rb init

ruby dk.rb install

继续:gem install Jekyll

并使用命令检验是否安装成功jekyll --version

安装Rdiscount，这个用来解析Markdown标记的包，使用如下命令gem install rdiscount

此时再cd到工程目录,但是在start command prompt是切换不过来的,应到Git bash 中切换到工程目录

再敲击jekyll serve

雨知博客中没有记载的很明确到底这行代码在那个命令端里完成的,所有造成我诸多错误,如下:

此时博客环境已经搭建好了.

再进行博客等的创建:

到想要创建项目的文件夹下（如cd d:xxx），运行命令：jekyll new blog

这样就会创建一个新文件夹d/blog，其结构如下：

1.文件夹_layouts：用于存放模板的文件夹，里面有两个模板，default.html和post.html,或许还有page.html.

2.文件夹_posts：用于存放博客文章的文件夹，里面有一篇markdown格式的文章--2014-01-27-welcome-to-jekyll.markdown,可做自行修改为:

---
layout: mylayout
title:  "myblog"
date:   2015-07-18 06:53:46
categories: jekyll update
---
Welcome to my blog

3.文件夹css：存放博客所用css的文件夹(或许还有sass文件,不需要就可以删掉)

4..gitignore：可以删掉，后面会将项目添加到git项目，所以这个不需要了.

5._coinfig.yml：jekyll的配置文件，里面可以定义相当多的配置参数，具体配置参数可以参照其官网.

我的_coinfig.yml配置如下:

# Site settings
title: myblog
email: sumo_dream@sina.com
description: > # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://ctct.github.com" # the base hostname & protocol for your site
twitter_username: sumo_dream
github_username:  sumodream
encoding: utf-8

# Build settings
markdown: kramdown
comments :
provider : disqus
disqus :
short_name : tiansj

6.index.html：项目的首页.

我的首页如下:

---
layout: default
title: myblog
---

<div class="home">
  <h1 class="page-heading">Posts</h1>
  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
       <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
      </li>
    {% endfor %}
  </ul>
  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>

根据实际需要，可能还需要创建如下文件或文件夹：

1. _includes:用于存放一些固定的HTML代码段，文件为.html格式，可以在模板中通过liquid标签引入，常用来在各个模板中复用如导航条、标签栏、侧边栏之类的在每个页面上都一样不变的内容，需要注意的是，这个代码段也可以是未被编译的，也就是说也可以使用liquid标签放在这些代码段中(会自动生成head.html,header.html,footer.html)

2. image和js等自定义文件夹：用来存放一些需要的资源文件，如图片或者javascript文件，可以任意命名

3.CNAME文件：用来在github上做域名绑定的(貌似目前的域名都是要钱的可在域名网站上购买,使用github便不收取费用,但可能不是你心仪的域名)

添加CNAME文件

在仓库根目录下添加一个CNAME文件，没有后缀名，里面内容为你的域名(如:test.com),不需要添加http/www等前缀。打开cmd,

ping username.github.io记录下IP地址

添加 DNS Service记录

去DNSPod注册个账号，添加域名，设置两个A记录。分别是@和w w w，ip地址填上个步骤获取的IP地址

设置域名的DNS

在相应域名的Csutom DNS里，设置DNS service,添加两条记录f1g1ns1.dnspod.net和f1g1ns2.dnspod.net

漫长的等待

要全球解析生效，得等上一会了，也可以先ping一下自己的设置对不对

favicon.ico：网站的小图标

大致上jekyll生成html的流程，jekyll首先会读取如下内容进入内存中：

1. _posts及文件夹下的所有文章，将其参数和文章内容组织保存在内存中，所有的文章的内容、参数都在site.posts对象（其他文件夹下的文章不会放入site.posts中）

2. _layouts文件夹下的所有模板

3. _includes文件夹下的所有需要被引入的内容

可以看一下_posts下的jekyll给的例子：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2014-01-27 21:57:11
categories: jekyll update
---

You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.

Jekyll also offers powerful support for code snippets:

{% highlight ruby %}
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}

Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].

[jekyll-gh]: https://github.com/mojombo/jekyll
[jekyll]:    http://jekyllrb.com

可以看到在博文的最上方有被两个---包裹起来的一段，这里就定义了文章的一些参数，更多参数在FrontMatter和Variables获取，简单的只需要关注几个就好：

1. title：文章的标题

2. date：文章的日期

3. categories：定义了文章所属的目录，一个list，将会根据这个目录的list来创建目录并将文章html放在生成的目录下，文章分类时候用，这里就不使用了

4. layout：文章所使用的模板名称，也就是_layouts中定义的模板的文件名去掉.html

5. tags：例子中没有，定义了文章的标签，也是一个list，文章分类时候用，这里就不使用了.

将这个写完的文章保存为 “年-月-日-标题.markdown”的名字形式，因为如果不修改permlinks，jekyll会根据文章的标题来创建文件夹，如2014-01-27-hello会创建成/2014/01/27/hello.html。这里就保存成2014-01-27-hello.markdown

ps：文章的文件名不要使用中文，否则会出现bug，因为在url中会escape，而服务器查找却是按照escape后的字符串去查找

，就会出现找不到文章的情况，使用英文代替就好，定义了title变量就无所谓文件名中标题的内容了.

我们可以打开jekyll给的例子default.html看一看模板的结构:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>{{ page.title }}</title>
        <meta name="viewport" content="width=device-width">

        <!-- syntax highlighting CSS -->
        <link rel="stylesheet" href="/css/syntax.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="/css/main.css">

    </head>
    <body>

        <div class="site">
          <div class="header">
            <h1 class="title"><a href="/">{{ site.name }}</a></h1>
            <a class="extra" href="/">home</a>
          </div>

          {{ content }}

          <div class="footer">
            <div class="contact">
              <p>
                Your Name<br />
                What You Are<br />
                you@example.com
              </p>
            </div>
            <div class="contact">
              <p>
                <a href="https://github.com/yourusername">github.com/yourusername</a><br />
                <a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br />
              </p>
            </div>
          </div>
        </div>

    </body>
</html>

可以看到，模板和普通的html文件几乎是一样的。jekyll使用的是一个叫liquid的模板引擎创建html文件，这个模板引擎也有详细的文档，现在就只关注其中比较核心的部分，文章的标题和文章的内容.

可以看到模板的有这么两句{{ page.title }}, {{ content }}，这两句就分别是文章标题和文章内容的占位符，如果有文章使用了这个模板，如过使用上面写的那篇welcome的文章，标题就是myblog，content就是Welcome to my blog，这里定义一个自己的新模板，保存为mylayout.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
          {{ page.title }}
          {{ page.date }}
          {{ content }}
    </body>
</html>

第一行是标题，然后是博文时间（在文件名中定义），然后是博文内容

这样一个简单的模板就创建好了.

在博客文件夹下，在命令行中输入jekyll build --trace就可以将所有文章文件根据其模板进行编译，生成结果，放在根目录下的_site中，这里我们使用后，会出现如下结果：\blog_site\2015\07\18文件夹下有一个welcome.html，其内容为：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sumo</title>
    </head>
    <body>
          Welcome to Myblog!
          2015-07-18 14:53:46 +0800
          <p>Welcome to my blog</p>

    </body>
</html>

可以看到，这就是编译完的博文文件，如我们设定的，第一行是标题，然后是文件名定义的时间，然后是博文内容，如果编译错误，将会在命令行中看到一个错误栈，可以方便调试，具体哪里出错了，如果不需要看错误栈，直接使用jekyll build就行了

之后在浏览器打开yourgithubname.github.io(com)进入site主页,或是直接打开yourgithubname.github.io/blog就可以看见index.html的内容中，点击文章的标题就可以跳转到具体的博文了.

Github Page完成了博客的主要功能，写作、发布、修改，这些都是相对静态的东西，就是你自己可以控制的事情，还有一些动态的东西Github Pages无法支持，比如说文章浏览次数、文章的评论等，还有一些个性化的东西，像个性化页头页尾、代码高亮可以把博客整的更漂亮一点，其实这写都可以通过第三方应用来实现，个性化自己的博客。加上Disqus云评论:注册http://disqus.com/

使用Markdown

Markdown的宗旨是实现「易读易写」。可读性，无论如何，都是最重要的。

Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。格式撰写的文件可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。(我还是使用的原始化马克飞象,>...<)在谷歌应用里添加的马克飞象,话说目前觉得还是很便利的(尽管没有css样式,好吧,>...<)...

剩下的活就是给个人站点定制样式和特效啦,我也得慢慢琢磨啦......逃:)