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

威哥 2023-01-11 14:56:52 943

github创建个人网址：在GitHub上创建和托管个人网站GitHub 是使用 Git 的软件和 Web 开发项目（或其他基于文本的项目）的源代码的 Web 托管服务。在许多情况下，大多数代码是公开提供的，是开发人员能够轻松地调查，协作，下载，使用，改进和重新混合改代码。特定项目的代码的容器称为存储库。GitHub为了使更多的受众能够访问GitHub Pages，本指南重点介绍使用github.com上的web界面来构建您的个人网站，从而概括和掩盖与Git和GitHub相关的标准工具。为了使用Git和GitHub（即命令行和终端）得到更多的污点，还有一些其他伟大的指南，你应该也知道，可能的书签，并在完成这一个后阅读，或跳过，如果这是更多的你速度：安娜Debenham，Thinkful，甚至GitHub本身超越，使命令行或本地工作流的GitHub托管和Jekyll模板可供更广泛的受众。使用 Git ，流是多向的。在版本中将每个重要的更改标记为

一个一步一步的新手指南，建立一个个人网站，并使用杰基尔博客和使用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 ，流是多向的。在版本中将每个重要的更改标记为重要，然后继续。如果你需要回到早期阶段，你可以没有任何数据的损失。目前， 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创建个人网址：在GitHub上创建和托管个人网站(1)

GitHub Pages

GitHub 页面是通过 GitHub 免费托管的公共网页。 GitHub 用户可以创建和托管个人网站（每个用户允许一个）和与特定 GitHub 项目相关的网站，并且其中的文件是 HTML 或 Markdown 则可以像任何其他网站一样查看该文件。 GitHub Pages 是 GitHub 的自我意识版本。页面还附带了一个强大的静态网站点生成名为 Jekyll，我们将在以后详细了解。

入门GitHub上的页面

不要担心，如果这些概念中的一些仍然对你有点模糊。学习这个东西的最好方法是开始做工作，所以让我们不要浪费时间和潜水了。

创建项目的存储库。登录到您的 GitHub 账号，并转到 https://github.com/new 或从您的账户首页点击新的存储库图标。

github创建个人网址：在GitHub上创建和托管个人网站(2)

将您的存储库命名为 username.github.io ，将用户名替换为您的 GitHub用户名。确保它是公开的，然后告诉 GitHub在生成 repo 时创建一个README 文件。

github创建个人网址：在GitHub上创建和托管个人网站(3)

通过单击存储库名称旁边的加号图标并直接在显示的输入框中键入文件名称来创建index.html页面。

github创建个人网址：在GitHub上创建和托管个人网站(4)

github创建个人网址：在GitHub上创建和托管个人网站(5)

在结果页面上，将此标记放在 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: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创建个人网址：在GitHub上创建和托管个人网站(6)

恭喜！你刚刚建立了你的第一个 GitHub Pages 网站。查看它在http://username.github.io。通常第一次创建您的 GitHub Pages 网站需要 5-10分钟的时间，所以当我们等待这种情况发生时，让我们的样式你的原本简单的 HTML 网站。

要对内容设置样式，请返回到您的存储库首页并创建一个名为css/main.css的新文件。css/ 之前的文件名将自动创建一个名为 css 的子目录。相当整洁。

github创建个人网址：在GitHub上创建和托管个人网站(7)

将以下内容放在 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文件！

github创建个人网址：在GitHub上创建和托管个人网站(8)

6.连接到HTML文档中 < head > 中的 CSS 文件。返回index.html并选择“编辑”按钮。

github创建个人网址：在GitHub上创建和托管个人网站(9)

添加到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: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 目录。因为每次提交时都会写入此目录和其中的所有文件，所以不希望此目录受到版本控制。

github创建个人网址：在GitHub上创建和托管个人网站(10)

将这个简单的行添加到文件：

_site/

创建一个 _config.yml 文件，告诉 Jekyll 你的项目的一些基础知识。在这个例子中，我们告诉 Jekyll 我们的网站的名称和我们想使用的 Markdown 的版本：

markdown: kramdown

在这一点上，我希望你有使用 GitHub web界面创建文件和目录的挂起，所以我将停止使用截图来说明这些操作。

创建一个 _layouts 目录，并在其中创建名为 default.html 的文件。（记住，您可以在创建新文件时创建目录，如果忘了，请参阅 main.css 步骤

这是我们的主要布局，将包含重复的元素，如我们的 < head > 和 < footer >。现在我们比早我们创建的每一个页面上重复这个标记，使我们的网站维护变得更加容易。因此，让我们将这些元素从 index.html 移动到 default.html，最终得到如下所示的内容：

<!DOCTYPE html>

<html>

<head>

<title>{{ page.title }}</title>

</head>

<body>

<nav>

<ul>

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

</ul>

</nav>

</div>

<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 已使用默认布局。使用以下内容替换该文件的全部内容：

---

title: Hank Quinlan Horrible Cop

---

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

注意文件顶部的纯文本。 Jekyll 称这是前事。您网站上包含此文件的任何文件将由 Jekyll 处理。每次提交一个指定 layout：default 在顶部的文件时， Jekyll将通过用提交的文件的内容替换 _layouts/default.html 中的 {{content}} 来神奇的生成完整的HTML文档。真棒！

设置博客

基于Jekyll的博客使用了我们在前面的步骤中熟悉的相同约定，但是通过添加更多的内容来进一步跟进。 Jekyll非常灵活，允许您根据需要扩展您的网站，但在本指南中，我们将覆盖的基础知识：创建一个帖子，使一个页面列出我们的帖子，创建自定义固定链接的帖子，并创建一个 RSS提要的博客。

我们要为我们的博客帖子创建一个新的布局，名为 post.html和一个用于存储每个单独的文章 _posts/ 的文件夹。

从创建布局开始。在 _layouts 文件夹中创建一个名为 post.html 的文件。注意帖子布局使用默认布局作为基础，并添加了一些新的液体标签来打印帖子和日期的标题：

---

---

<h1>{{ page.title }}</h1>

<p class="meta">{{ page.date | date_to_string }}</p>

</div>

创建一个 _posts / 目录，我们将存储我们的博客帖子。在那个文件夹内将是我们的第一篇文章。 Jekyll是非常严格的如何这些文件命名，所以要注意。它必须遵循约定 YYYY-MM-DD-title-of-my-post.md。这个文件名被翻译成博客文章的固定链接。所以在这个例子中，我们将创建一个名为2014-04-30-hank-quinlan-site-launched.md的文件：

---

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循环来创建我们的博客文章的无序列表：

---

title: Hank Quinlan's Blog

---

<h1>{{ page.title }}</h1>

{% 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。将此文件添加到文件：

---

<?xml version="1.0" encoding="utf-8"?>

<title>Hank Quinlan's Blog</title>

<updated>{{ site.time | date_to_xmlschema }}</updated>

<id>http://hankquinlan.github.io/blog</id>

<name>Hank Quinlan</name>

<email>hankquinlanhub@gmail.com</email>

</author>

{% for post in site.posts %}

<entry>

<title>{{ post.title }}</title>

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

资源

我会尽量保持此列表的最新和最新。如果您知道要分享的优秀资源或注意到连接中断，请与我们联系。