在GitHub上创建和托管个人网站

2016-11-3 11:38 1893 0

摘要: 一个一步一步的新手指南，建立一个个人网站，并使用杰基尔博客和使用GitHub的网页托管它是免费的本指南旨在帮助Git和GitHub初学者在一个下午启动并运行GitHub Pages和Jekll。它假设你对版本控制，Git 和 GitHub 知之 ...

一个一步一步的新手指南，建立一个个人网站，并使用杰基尔博客和使用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="/about">About</a></li>

</ul>

</nav>

<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>

</div>

<ul>

<li><a href="mailto:[email protected]">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>

</head>

<body>

<nav>

<ul>

<li><a href="/about">About</a></li>

</ul>

</nav>

<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>

</div>

<ul>

<li><a href="mailto:[email protected]">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 目录。因为每次提交时都会写入此目录和其中的所有文件，所以不希望此目录受到版本控制。