在GitHub上创建和托管个人网站(下)_github托管个人网页大小-优快云博客

在 github pages中使用Jekyll

github pages会自动识别 Jekyll文件，所以如果你添加文件夹和文件遵循特定的命名约定，当你将相关Jekyll文件提交给GitHub，Jekyll就会神奇地建立你的网站。

虽然我建议在自己的计算机上设置Jekyll，以便您可以在本地编辑和预览您的网站，并准备好后，将这些更改推送到您的GitHub，但是，为了快速掌握Jekyll的工作方式，我们将使用GitHub Web界面将Jekyll构建到我们的GitHub仓库中。

什么是 Jekyll

Jekyll是一个非常强大的静态站点生成器。对于没有复杂架构的简单网站，如个人网站，当与GitHub一起使用时，Jekyll会在您每次提交文件时自动为您的网站重新生成所有的HTML页面。

Jekyll使管理您的网站更容易，因为它取决于模板。在使用静态站点生成器时，模板（或者Jekyll术语中的布局）是您最好的朋友。我不必在每个创建的页面上重复相同的导航标记，如果我添加，删除或更改导航项目的位置，则必须在每个页面上编辑这些导航标记，我可以创建Jekyll所称的布局，以便在所有页面上使用我的网页。在本教程中，我们将创建两个Jekyll模板来构建您的网站。

在 github.com 构建Jekyll

为了让Jekyll和您的网站一起工作，您需要遵循Jekyll的目录结构。要了解这个结构，我们将把它构建到我们的GitHub仓库中。

创建一个.gitignore文件。这个文件告诉Git忽略每次提交时Jekyll自动生成的_site目录。因为这个目录和里面的所有文件都是在你提交的时候被写入的，所以你不需要这个目录在版本控制之下。

创建成功后复制下面的文字到.gitignore文件中

_site/

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

    name: Hank Quinlan, Horrible Cop
    markdown: kramdown

在这一点上，我希望你已经使用GitHub网页界面创建好了文件和目录，所以我将停止使用截图来说明这些操作。

制作一个_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中的liquid标签，这些标签用于将内容注入最终的网页。

现在更新您的index.html使用您的默认布局。用下面的替换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把这称为Front-matter。您网站上的任何文件都将由Jekyll进行处理。每次提交指定layout：default的文件时，Jekyll都会通过将_layouts / default.html中的{{content}替换为已提交文件的内容来神奇地生成完整的HTML文档。真棒！

写一篇博客到自己的网站

Jekyll非常灵活，可以根据需要扩展您的网站，但在本指南中，我们只会介绍基础知识：
- 创建一篇博客
- 创建一个列出所有博客的页面
- 为博客创建超链接
- 为博客创建RSS feed

我们希望为我们的博客帖子创建一个新的布局，名为post.html，并为每个帖子存储一个名为_posts /的文件夹。

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

---
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(如:2017-09-我的第一篇博客.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非常适合作为博客创作语法。

提交新帖子后，导航到http://username.github.io/YYYY/MM/DD/name-of-your-post来查看它。

所有这一切都很棒，但是您的读者并不总是知道您帖子的确切网址。接下来，我们需要在我们的网站上创建一个页面，列出每个帖子的标题和超链接。您可以在您的主页上创建此列表，或者创建一个收集您所有帖子的博客子页面。我们打算做后者。

创建一个博客目录，并在其中创建一个名为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中，我们可以通过编辑_config.yml文件来控制我们固定链接的结构。因此，让我们改变我们的固定链接结构以包含博客目录。
复制下面的内容到_config.yml文件

permalink: /blog/:year/:month/:day/:title

现在你的博客文章将会在http://username.github.io/blog/YYYY/MM/DD/name-of-your-post上面。

为您的博客设置RSS提要也非常简单。每当你发布一个新的帖子，它将被添加到这个RSS文件。

在你的blog /目录里创建一个文件并命名为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提要链接转到http://username.github.io/blog/atom.xml查看您的Feed。

注意：在Chrome中，您的Feed可能看起来像是一个错误，但事实并非如此。 Chrome不知道如何显示XML。

剩下还要做一些事

不要忘记创建并提交about / index.html和cv / index.html页面。让你自己完成这些页面。
在继续之前，花点时间在你自己的电脑上设置Git和Jekyll。本教程是关于在Web浏览器中的Git，所以真的只是九牛一毛。如果您希望能够将图像或PDF文件上传到您的GitHub仓库，您将不得不这样做。 GitHub的教程和桌面应用程序使本地设置变得简单，现在您已经了解了许多Git和GitHub的基本概念，您应该能够做到这一点。
希望本指南能够让您有信心使用Git，GitHub，Jekyll以及您的网站或博客来做其他许多事情。在这一点上，你可以走很多不同的方向，因为我相信你已经开始思考了，但是这里还有一些我认为值得你花费的时间：
- 创建_includes。他们很像_layouts，只有更小的标记片段，可以注入到_layouts和页面。
  尝试创建一个将Google Analytics（分析）跟踪代码插入到<head>中的_include文件，以便您可以获取网站访问者的统计信息。这是一个例子。
  想要评论您的博客？创建一个DISQUS
  _include并在你的post.html布局中调用它。
- 不想用github.io作为你的网址？设置一个自定义域。
- 给博客列表添加分页