一个一步一步的新手指南，建立一个个人网站，并使用杰基尔博客和使用GitHub的网页托管它是免费的
本指南旨在帮助Git和GitHub初学者在一个下午启动并运行GitHub Pages和Jekll。它假设你对版本控制，Git 和 GitHub 知之甚少。如果你知道 html 和 CSS 的基础知识是有用的，因为我们将直接使用这些语言。我们也将使用一点点 Markdown,但绝对不需要成为这些语言的专家。这个想法是通过实践学习，所以我们将在本教程中实现的代码指南中提供，也可以在完全下载GitHub库。
对于一个小的背景，为什么我选择的 GitHub 的 GitHub 和页面我的个人网站（以及其他项目），请参阅本说明。
其他资源你应该知道
为了使更多的受众能够访问GitHub Pages，本指南重点介绍使用github.com上的web界面来构建您的个人网站，从而概括和掩盖与Git和GitHub相关的标准工具。 为了使用Git和GitHub（即命令行和终端）得到更多的污点，还有一些其他伟大的指南，你应该也知道，可能的书签，并在完成这一个后阅读，或跳过，如果这是更多的你 速度：安娜Debenham，Thinkful，甚至GitHub本身超越，使命令行或本地工作流的GitHub托管和Jekyll模板可供更广泛的受众。
此外，在本文档的最后，有一个很好的资源列表与Git，GitHub / Pages，Jekyll和Markdown相关，可以帮助您深入了解这些工具。 我会尽我所能保持这个列表更新，因为我找到新的。
什么是Git，GitHub上，并从GitHub页？
Git，GitHub 和 GitHub 页面都非常密切相关。想象 Git 作为工作流完成工作，GitHub和 GitHub 页面作为存储您完成的工作的地方。使用 Git 的项目公开地存储在GitHub 和 GitHub Pages 中，所以以非常笼统的方式，Git 是你在自己的计算机上本地做的， GitHub 是所有这些都在服务器上公开存储的地方。
Git
Git是一个版本控制系统，可以跟踪项目中文件的更改。它通常记录变更（添加什么，从文件中删除什么），谁做出更改，更改者对更改做出的备注和注释，以及更改的时间。它主要用于通常是协作的软件开发项目，因此在这个意义上，它是一个帮助实现和改变协作的工具。然而，它的协作性使得它对出版社区感兴趣，作为帮助创作和编辑工作修成的工具。
Git 是为那些想要以高效的方式维护他们的文件的多个版本的人，并且及时回到访问不同的版本，没有杂乱的许多文件以及存储在不同位置的混乱的名称。 想象 Git 和版本控制像一个魔术的恢复按钮。
在下图中，每个阶段表示“保存”。没有 Git ， 你不能回到初始草案和最终草案之间的任何阶段。如果您要更改最终草稿中的开头段落，则必须删除无法恢复的数据。要解决这个问题，我们使用“另存为”选项，将去命名为不同的内容，删除开始段落并开始编写新段落。
使用 Git ，流是多向的。在版本中将每个重要的更改标记为重要，然后继续。如果你需要回到早期阶段，你可以没有任何数据的损失。目前， Google 文档的 “修订历史”或维基百科的“编译历史记录”以这种方式工作。Git 只是更多的细节，如果需要可以得到更复杂。 1
当你有机会的话，我强烈建议这对使用Git15分钟，动手的网络教程。
GitHub
GitHub 是使用 Git 的软件和 Web 开发项目 （或其他基于文本的项目）的源代码的 Web 托管服务。在许多情况下，大多数代码是公开提供的，是开发人员能够轻松地调查，协作，下载，使用，改进和重新混合改代码。特定项目的代码的容器称为存储库。
在 GitHUb 上有数以千计的非常酷和令人兴奋的存储库，每天都添加新的。在 GiTHub 上提供他们的代码的流行软件开发项目的一些例子包括：
Twitter的引导,一个非常受欢迎的移动第一网站的前端框架，由开发人员在 Twitter 上创建。
HTML5样板, 用于快速构建网站的前端模板，
JavaScript 可视化库D3
Ruby on Rails的, 一个基于 Ruby 的开源 Web 框架。
通常，人们只是托管包含他们的代码的文件，所以你看到的结束视图是实际的代码，如在这个例子从 Ruby on Rails 项目：
GitHub Pages
GitHub 页面是通过 GitHub 免费托管的公共网页。 GitHub 用户可以创建和托管个人网站（每个用户允许一个）和与特定 GitHub 项目相关的网站，并且其中的文件是 HTML 或 Markdown , 则可以像任何其他网站一样查看该文件。 GitHub Pages 是 GitHub 的自我意识版本。页面还附带了一个强大的静态网站点生成 名为 Jekyll，我们将在以后详细了解。
入门GitHub上的页面
不要担心，如果这些概念中的一些仍然对你有点模糊。学习这个东西的最好方法是开始做工作，所以让我们不要浪费时间和潜水了。
创建项目的存储库。登录到您的 GitHub 账号， 并转到 https://github.com/new 或从您的账户首页点击新的存储库图标。
将您的存储库命名为 username.github.io ， 将用户名替换为您的 GitHub用户名。确保它是公开的，然后告诉 GitHub在生成 repo 时创建一个README 文件。
通过单击存储库名称旁边的加号图标并直接在显示的输入框中键入文件名称来创建index.html页面。
在结果页面上，将此标记放在 GitHub 文本编辑器中：
<!DOCTYPE html>
<html>
<head>
<title>Hank Quinlan, Horrible Cop</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A
Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...
</a></p>
</div><!-- /.blurb -->
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:hankquinlanhub@gmail.com">email</a>
</li>
<li><a href="https://github.com/hankquinlan">github.com/
hankquinlan</a></li>
</ul>
</footer>
</body>
</html>
提交index.html.在页面的底部，有一个文本输入区域。用于添加对您的更改的描述，还有一个按钮用于提交文件。
恭喜！ 你刚刚建立了你的第一个 GitHub Pages 网站。 查看它在http://username.github.io。通常第一次创建您的 GitHub Pages 网站需要 5-10分钟的时间，所以当我们等待这种情况发生时，让我们的样式你的原本简单的 HTML 网站。
要对内容设置样式，请返回到您的存储库首页并创建一个名为css/main.css的新文件。css/ 之前的文件名将自动创建一个名为 css 的子目录。相当整洁。
将以下内容放在 main.css 中：
body {
margin: 60px auto;
width: 70%;
}
nav ul, footer ul {
font-family:'Helvetica', 'Arial', 'Sans-Serif';
padding: 0px;
list-style: none;
font-weight: bold;
}
nav ul li, footer ul li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 3em;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
p {
font-size: 1.5em;
line-height: 1.4em;
color: #333;
}
footer {
border-top: 1px solid #d5d5d5;
font-size: .8em;
}
ul.posts {
margin: 20px auto 40px;
font-size: 1.5em;
}
ul.posts li {
list-style: none;
}
不要忘记提交新的CSS文件！
6.连接到HTML文档中 < head > 中的 CSS 文件。返回index.html并选择“编辑”按钮。
添加到main.css的链接（新标记以粗体显示）：
<!DOCTYPE html>
<html>
<head>
<title>Hank Quinlan, Horrible Cop</title>
<!-- link to main stylesheet -->
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A
Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...
</a></p>
</div><!-- /.blurb -->
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:hankquinlanhub@gmail.com">email</a>
</li>
<li><a href="https://github.com/hankquinlan">github.com/
hankquinlan</a></li>
</ul>
</footer>
</body>
</html>
访问http://username.github.io已查看您的样式网站。它应该看起来想http://hankquinlan.github.io的页面。
使用 Jekyll 与 GitHUb 页面
像 GitHub Pages，Jekyll 是自我意识的，所以如果你添加文件夹和文件遵循特定的命名约定，当你承诺 GitHub ，Jekyll 会神奇地建立你的网站。
虽然我建议在您自己的计算机设置 Jekyll ， 以便您可以在本地编辑和预览您的网站，当准备好，推送这些更改到您的 GitHub repo，我们不会这样。相反，为了快速了解 Jekyll 如何工作，我们将使用 GitHub Web 界面将其构建到 GitHub 库中。
什么是Jekyll？
Jekyll 是一个非常强大的静态网站生成器。在某些意义上，它是对数据库用于存储网站内容之前的静态HTML 的回溯。对于没有复杂架构的简单站点，如个人网站，这是一个巨大的加分。当与 GitHub 一起使用时， Jekyll 会在每次提交文件时自动重新生成您的网站的所有 HTML 页面。
Jekyll 使管理您的网站更容易，因为它取决于模板。模板（或 Jekyll 命名中的布局）是使用静态网站生成器时最好的朋友。而不是我创建的每个页面上重复相同的导航标记，如果我添加，删除或更改到航向的位置，我必须在每个页面上编辑，我可以创建 Jekyll 称为布局的所有我的网页。在本教程中，我们将创建两个 Jekyll 模板来帮助您的网站。
在github.com上设置 Jekyll
为了让 Jekyll 与您的网站合作，您需要遵循 Jekyll 的目录结构。 要了解这种结构，我们将直接在我们的 GitHub 库中构建它。
创建一个 .gitignore 文件。 这个文件告诉 Git 忽略 Jekyll 每次提交是自动生成的 —site 目录。因为每次提交时都会写入此目录和其中的所有文件，所以不希望此目录受到版本控制。
将这个简单的行添加到文件：
_site/
创建一个 _config.yml 文件，告诉 Jekyll 你的项目的一些基础知识。在这个例子中，我们告诉 Jekyll 我们的网站的名称和我们想使用的 Markdown 的版本：
name: Hank Quinlan, Horrible Cop
markdown: kramdown
在这一点上，我希望你有使用 GitHub web界面创建文件和目录的挂起，所以我将停止使用截图来说明这些操作。
创建一个 _layouts 目录，并在其中创建名为 default.html 的文件。（记住，您可以在创建新文件时创建目录，如果忘了，请参阅 main.css 步骤
这是我们的主要布局，将包含重复的元素，如我们的 < head > 和 < footer >。现在我们比早我们创建的每一个页面上重复这个标记，使我们的网站维护变得更加容易。因此，让我们将这些元素从 index.html 移动到 default.html，最终得到如下所示的内容：
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
<!-- link to main stylesheet -->
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
{{ content }}
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:hankquinlanhub@gmail.com">email
</a></li>
<li><a href="https://github.com/hankquinlan">github.com/
hankquinlan</a></li>
</ul>
</footer>
</body>
</html>
请注意其中的而 {{page.title}} 和 {{content}} 标签。他们是 Jekyll 称为液体标签的，它们用于将内容注入到最终的网页中。更多关于这一点。
现在更新 index.html 已使用默认布局。 使用以下内容替换该文件的全部内容：
---
layout: default
title: Hank Quinlan, Horrible Cop
---
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A Touch of Evil</em>
Don't trust me. <a href="/about">Read more about my life...</a></p>
</div><!-- /.blurb -->
注意文件顶部的纯文本。 Jekyll 称这是前事。您网站上包含此文件的任何文件将由 Jekyll 处理。 每次提交一个指定 layout：default 在顶部的文件时， Jekyll将通过用提交的文件的内容替换 _layouts/default.html 中的 {{content}} 来神奇的生成完整的HTML文档。真棒！
设置博客
基于Jekyll的博客使用了我们在前面的步骤中熟悉的相同约定，但是通过添加更多的内容来进一步跟进。 Jekyll非常灵活，允许您根据需要扩展您的网站，但在本指南中，我们将覆盖的基础知识：创建一个帖子，使一个页面列出我们的帖子，创建自定义固定链接的帖子，并创建一个 RSS提要的博客。
我们要为我们的博客帖子创建一个新的布局，名为 post.html和一个用于存储每个单独的文章 _posts/ 的文件夹。
从创建布局开始。在 _layouts 文件夹中创建一个名为 post.html 的文件。注意帖子布局使用默认布局作为基础，并添加了一些新的液体标签来打印帖子和日期的标题：
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>
<div class="post">
{{ content }}
</div>
创建一个 _posts / 目录，我们将存储我们的博客帖子。 在那个文件夹内将是我们的第一篇文章。 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，文件中使用的 Markdown语法由 Jekyll 转换为 HTML 。像Wikitext , Markdown是一种标记语言，语法更接近纯文本。Markdown 的想法是摆脱作者的方式，使他们能更快速编写他们的 HTML 内容，使 Markdown 非常适合作为博客创作语法。如果你没有准备好，你要熟悉语法降价，而这种可印刷的cheatsheet（PDF）将是你最好的朋友。
在提交新信息后，导航到http://username.github.io/YYYY/MM/DD/name-of-your-post进行查看。
这一切是伟大的，但你的读者不会永远知道你的职位的确切的URL。所以，接下来我们需要在我们的网站上，列出每个帖子的标题和超链接创建一个页面。您可以在您的主页创建此列表或替代，创建博客子页面，收集所有的帖子。我们要做的是后者。
创建一个 blog目录，并创建一个名为文件index.html里面。要列出每一个职位，我们将使用一个foreach循环来创建我们的博客文章的无序列表：
---
layout: default
title: Hank Quinlan's Blog
---
<h1>{{ page.title }}</h1>
<ul class="posts">
{% for post in site.posts %}
<li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
现在检查 http://username.github.io/blog/。您应该会看到您的第一篇文章列出并链接到那里。不错的工作！
自定义您的博客
我们只是用 Jekyll 的博客感知功能开始刮伤表面。本指南仅将介绍您可能需要为您的博客采取的几个步骤。
您可能已经注意到，您的博客帖子的网址不包含其中的博客项目。在 Jekyll 中，我们可以通过编辑我们在步骤8中创建 _config.yml 文件来控制永久链接的结构。所以让我们改变我们的永久链接结构，使其包含博客目录。
编辑 _config.yml 文件。在文件末尾添加以下行：
permalink: /blog/:year/:month/:day/:title
现在您的博客帖子将存在于http://username.github.io/blog/YYYY/MM/DD/name-of-your-post。
它也很容易为您的博客设置一个RSS源。每次您发布新的帖子，它将被添加到此RSS文件。
在您的 博客/ 目录内创建一个文件，并将其命名为 atom.xml。将此文件添加到文件：
--
layout: feed
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Hank Quinlan's Blog</title>
<link href="http://hankquinlan.github.io/blog/atom.xml" rel="self"/>
<link href="http://hankquinlan.github.io/blog"/>
<updated>{{ site.time | date_to_xmlschema }}</updated>
<id>http://hankquinlan.github.io/blog</id>
<author>
<name>Hank Quinlan</name>
<email>hankquinlanhub@gmail.com</email>
</author>
{% for post in site.posts %}
<entry>
<title>{{ post.title }}</title>
<link href="http://hankquinlan.github.io{{ post.url }}"/>
<updated>{{ post.date | date_to_xmlschema }}</updated>
<id>http://hankquinlan.github.io/{{ post.id }}</id>
<content type="html">{{ post.content | xml_escape }}</content>
</entry>
{% endfor %}
</feed>
现在，您可以在您网站上的某个位置包含一个 RSS Feed 的链接，以便用户在其所选的 Feed 聚合器中订阅您的博客。导航到http://username.github.io/blog/atom.xml已查看您的 Feed。
注意：在Chrome中，您的 Feed 可能看起来像一个错误，但它不是 Chrome 不知道如何显示XML
包起来
你几乎完成~ 不要忘记创建和提交 about/index.html 和 cv/index.hrml 页面.。因为我相信你现在有东西的东西，我会回来，让你让这些页面完成自己。
在进一步之前，花时间在自己的计算机上设置 Git 和 Jekyll。这个教程是所有关于 Git 的 Web 浏览器，所以真的只是一个中途点。如果你想能够将图像或 PDF 文件上传到你的 GitHub 仓库，你必须这样做。 GitHub的教程和桌面应用程序使本地设置更容易，现在你知道 Git 和 GitHub 的许多基本概念，你应该能够做到这一点。去这样做！
下一步
希望这本指南给了你信心，做许多其他事情与 Git，GitHub， Jekyll，和你的网站或博客。在这一点上，你可以在许多不同的方向，因为我相信你已经开始考虑，但这里有一些其他的事情，我认为是值得你的时间：
创建_includes.他们很喜欢 _layouts,只有较小的标记片段，可以注入到你的 _layouts 和页面。
请尝试创建一个 _include 文件， 将 Google Analytics (分析)跟踪代码插入到您的 < head > 中，以便获取网站访问者的统计信息。这里有一个例子。
想要评论您的网志吗？ 创建DISQUS _include并在您的post.html布局中调用它.
不想在您的URL中的github.io？设置自定义域
添加博客分页
创建 sitemap.xml文件以获得更好的SEO 。你可以有一个由GitHub页面自动生成的。看到这个我用于我的网站。
成为一个编码专业人员，并创建您的网站的发展分支。每次要修复错误或添加新功能时，您都可以创建主分支的副本，进行更改，然后将该分支合并到主分支。这个想法是保持主分支干净。
需要更多灵感吗？看看如何从 Jekyll 的开发者的网站设置或浏览这个庞大的网站列表使用Jekyll。
资源
我会尽量保持此列表的最新和最新。如果您知道要分享的优秀资源或注意到连接中断，请与我们联系。
,
