在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步骤。）
这是我们的主要布局，将包含像和这样的重复元素。 现在我们不必在我们创建的每一个页面上重复这些标记，使得我们的网站的维护更容易。 因此，让我们将这些元素从index.html移动到default.html中，最后得到如下所示的内容：
<html>
<head>
<title>{{ page.title }}title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
head>
<body>
<nav>
<ul>
<li><a href="/">Homea>li>
<li><a href="/about">Abouta>li>
<li><a href="/cv">CVa>li>
<li><a href="/blog">Bloga>li>
ul>
nav>
<div class="container">
{{ content }}
div>
<footer>
<ul>
<li><a href="mailto:[email protected]">emaila>li>
<li><a href="https://github.com/hankquinlan">github.com/hankquinlana>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 Evilem> Don't trust me. <a href="/about">Read more about my life...a>p>
div>注意文件顶部的纯文本。 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
---
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Hank Quinlan's Blogtitle>
<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/blogid>
<author>
<name>Hank Quinlanname>
<email>[email protected]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（分析）跟踪代码插入到中的_include文件，以便您可以获取网站访问者的统计信息。 这是一个例子。
想要评论您的博客？ 创建一个DISQUS
_include并在你的post.html布局中调用它。不想用github.io作为你的网址？ 设置一个自定义域。
给博客列表添加分页
-创建一个sitemap.xml文件更好的搜索引擎优化。 你可以由GitHub Pages自动生成。
也可以自己写
- 成为一个编码专家，并创建您的网站的开发分支。 每次您要修复一个错误或添加一个新功能时，您都可以创建主分支的副本，进行更改，然后将该分支合并到主分支。 这个想法是保持主分支清洁。
-需要更多的灵感？ 查看Jekyll开发者的网站是如何设置的，或者使用Jekyll浏览这个庞大的网站列表。
干货
我会尽力保持这份名单目前和最新。 如果你知道更好的资源，你想分享或注意到资源有问题，请联系。
Git, GitHub, and GitHub Pages
- Git Documentation
- Learn Git and GitHub in 15 minutes
- GitHub Pages Help
- GitHub Help
- GitHub Cheat Sheet
- GitHub Glossary
- GitHub For Academics
Jekyll
- Sites Using Jekyll
- Blog Migrations to Jekyll
Markdown
- Official Markdown Spec
- Printable Markdown Cheatsheet
- Markdown Cheatsheet
- GitHub Flavored Markdown