通过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) 创建项目站点步骤：

  1. $ git clone https://github.com/USERNAME/PROJECT.git PROJECT
  2. $ git checkout --orphan gh-pages
  3. $ git rm -rf .
  4. $ git add .
  5. $ git commit -a -m "First pages commit"
  6. $ 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
在刚才的命令行中敲入

  1. cd C:\DevKit
  3. ruby dk.rb init
  5. 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,可做自行修改为:

  1. ---
  2. layout: mylayout
  3. title:  "myblog"
  4. date:   2015-07-18 06:53:46
  5. categories: jekyll update
  6. ---
  7. Welcome to my blog

3.文件夹css：存放博客所用css的文件夹(或许还有sass文件,不需要就可以删掉)
4..gitignore：可以删掉，后面会将项目添加到git项目，所以这个不需要了.
5._coinfig.yml：jekyll的配置文件，里面可以定义相当多的配置参数，具体配置参数可以参照其官网.
我的_coinfig.yml配置如下:

  1. # Site settings
  2. title: myblog
  3. email: sumo_dream@sina.com
  4. description: > # this means to ignore newlines until "baseurl:"
  5.   Write an awesome description for your new site here. You can edit this
  6.   line in _config.yml. It will appear in your document head meta (for
  7.   Google search results) and in your feed.xml site description.
  8. baseurl: "" # the subpath of your site, e.g. /blog/
  9. url: "http://ctct.github.com" # the base hostname & protocol for your site
  10. twitter_username: sumo_dream
  11. github_username:  sumodream
  12. encoding: utf-8
  14. # Build settings
  15. markdown: kramdown
  16. comments :
  17. provider : disqus
  18. disqus :
  19. short_name : tiansj

6.index.html：项目的首页.
我的首页如下:

  1. ---
  2. layout: default
  3. title: myblog
  4. ---
  6. <div class="home">
  7.   <h1 class="page-heading">Posts</h1>
  8.   <ul class="post-list">
  9.     {% for post in site.posts %}
  10.       <li>
  11.         <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
  12.        <h2>
  13.           <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
  14.         </h2>
  15.       </li>
  16.     {% endfor %}
  17.   </ul>
  18.   <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
  19. </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一下自己的设置对不对

  1. favicon.ico：网站的小图标

大致上jekyll生成html的流程，jekyll首先会读取如下内容进入内存中：
1. _posts及文件夹下的所有文章，将其参数和文章内容组织保存在内存中，所有的文章的内容、参数都在site.posts对象（其他文件夹下的文章不会放入site.posts中）
2. _layouts文件夹下的所有模板
3. _includes文件夹下的所有需要被引入的内容

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

  1. ---
  2. layout: post
  3. title:  "Welcome to Jekyll!"
  4. date:   2014-01-27 21:57:11
  5. categories: jekyll update
  6. ---
  8. 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!
  9. To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
  11. Jekyll also offers powerful support for code snippets:
  13. {% highlight ruby %}
  14. def print_hi(name)
  15.   puts "Hi, #{name}"
  16. end
  17. print_hi('Tom')
  18. #=> prints 'Hi, Tom' to STDOUT.
  19. {% endhighlight %}
  21. 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].
  23. [jekyll-gh]: https://github.com/mojombo/jekyll
  24. [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看一看模板的结构:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.         <title>{{ page.title }}</title>
  7.         <meta name="viewport" content="width=device-width">
  9.         <!-- syntax highlighting CSS -->
  10.         <link rel="stylesheet" href="/css/syntax.css">
  12.         <!-- Custom CSS -->
  13.         <link rel="stylesheet" href="/css/main.css">
  15.     </head>
  16.     <body>
  18.         <div class="site">
  19.           <div class="header">
  20.             <h1 class="title"><a href="/">{{ site.name }}</a></h1>
  21.             <a class="extra" href="/">home</a>
  22.           </div>
  24.           {{ content }}
  26.           <div class="footer">
  27.             <div class="contact">
  28.               <p>
  29.                 Your Name<br />
  30.                 What You Are<br />
  31.                 you@example.com
  32.               </p>
  33.             </div>
  34.             <div class="contact">
  35.               <p>
  36.                 <a href="https://github.com/yourusername">github.com/yourusername</a><br />
  37.                 <a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br />
  38.               </p>
  39.             </div>
  40.           </div>
  41.         </div>
  43.     </body>
  44. </html>

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>test</title>
  6.     </head>
  7.     <body>
  8.           {{ page.title }}
  9.           {{ page.date }}
  10.           {{ content }}
  11.     </body>
  12. </html>

第一行是标题，然后是博文时间（在文件名中定义），然后是博文内容
这样一个简单的模板就创建好了.

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Sumo</title>
  6.     </head>
  7.     <body>
  8.           Welcome to Myblog!
  9.           2015-07-18 14:53:46 +0800
  10.           <p>Welcome to my blog</p>
  12.     </body>
  13. </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样式,好吧,>...<)...

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

posted @ 2015-07-17 23:01  苏木槿  阅读(573)  评论(1)  编辑  收藏  举报