github托管博客今天seo_在GitHub上创建和托管小我网站

文章目录 [+]

本指南旨在帮助Git和GitHub初学者在一个下午启动并运行GitHub Pages和Jekll。
它假设你对版本掌握，Git 和 GitHub 知之甚少。
如果你知道 HTML 和 CSS 的根本知识是有用的，由于我们将直策应用这些措辞。
我们也将利用一点点 Markdown,但绝对不须要成为这些措辞的专家。
这个想法是通过实践学习，以是我们将在本教程中实现的代码指南中供应，也可以在完备***GitHub库。

对付一个小的背景，为什么我选择的 GitHub 的 GitHub 和页面我的个人网站（以及其他项目），请参阅本解释。

github托管博客今天seo_在GitHub上创建和托管小我网站 github托管博客今天seo_在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: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>

</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 目录。
由于每次提交时都会写入此目录和个中的所有文件，以是不肯望此目录受到版本掌握。

将这个大略的行添加到文件：

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

资源

我会只管即便保持此列表的最新和最新。
如果您知道要分享的精良资源或把稳到连接中断，请与我们联系。