github jekyll_Jekyll，Github Pages和Cloudflare用于PageSpeed Win

github jekyll

If you want your site to be found, you need your site to be fast. Google has indicated that sites with faster performance do better in search results. Just recently, they started testing a "Slow" warning tag for heavy sites in search results.

如果您想找到自己的网站，则需要快速。 Google指出，性能更快的网站在搜索结果中的表现更好。 就在最近，他们开始为搜索结果中的重磅网站测试“慢速”警告标记 。

It's far too common, however, for developers and clients to rely on tools, but slow down site performance:

但是，对于开发人员和客户来说，依靠工具实在太普遍了，但是却降低了网站性能：

• heavy CSS frameworks
  沉重CSS框架
• uncompressed JS libraries
  未压缩的JS库
• cheap shared hosts
  廉价共享主机
• server-reliant page renders
  服务器相关页面呈现

This article is an explanation of my journey from a WordPress site on a shared host. Despite avoiding heavy frameworks and libraries, I still never got past mid-80s (out of 100) on Google Page Speed score.

本文是对我从共享主机上的WordPress网站的旅程的解释。 尽管避免使用繁琐的框架和库，但我在Google Page Speed得分上从未超过80年代中期（满分100）。

I changed to a Jekyll site hosted on GitHub Pages, behind CloudFlare's CDN, and now have a Google Page Speed of 99/100. Here's how:

我改成了在CloudFlare的CDN之后的GitHub Pages上托管的Jekyll网站，现在Google Page Speed为99/100。 这是如何做：

杰基尔 (Jekyll)

Jekyll is flat file site generator. It allows you to save posts as markdown or HTML files, then its engine uses a theme (based on Liquid) to build fully-compiled HTML views for all the pages in your site.

Jekyll是平面文件站点生成器。 它允许您将帖子另存为markdown或HTML文件，然后其引擎使用主题（基于Liquid ）为站点中的所有页面构建完全编译HTML视图。

This is a huge win for page speed over a site based on PHP/MySQL (or another server-side template and database CMS). Every time a PHP/MySQL CMS displays a page, the server queries the database, gives content (if found) to the templating engine, then generates HTML which is delivered to the user.

对于基于PHP / MySQL（或其他服务器端模板和数据库CMS）的网站而言，这是网页速度的巨大胜利。 每次PHP / MySQL CMS显示页面时，服务器查询数据库，将内容（如果找到）提供给模板引擎，然后生成HTML并交付给用户。

Granted, the server is a computer that normally does this very quickly, but a flat-file site provides a speed boost by removing these steps entirely.

当然，服务器是一台通常可以非常快速地执行此操作的计算机，但是平面文件站点可以通过完全删除这些步骤来提高速度。

入门 (Getting Started)

Jekyll is a Ruby gem that you'll install via command line with the following commands:

Jekyll是一个Ruby gem，您将通过命令行使用以下命令进行安装：

$ gem install jekyll

$ jekyll new site

If you haven't installed Ruby (a requirement for Jekyll), you'll find instructions here. This Jekyll help page will walk you through installing and setting up a new Jekyll site.

如果您尚未安装Ruby（Jekyll的必要条件），请在此处找到说明 。 这个Jekyll帮助页面将引导您完成安装和设置新的Jekyll网站的过程。

All the config options for your site live in _config.yml in the root of the folder that the jekyll new mysite command created. If you open it, you'll see the following default code:

您网站的所有配置选项都位于_config.yml jekyll new mysite命令创建的文件夹根目录中的_config.yml中。 如果打开它，将看到以下默认代码：

# Site settings
title: Your awesome title
email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
markdown: kramdown

You'll want to change most of those things:

您将需要更改其中大部分内容：

• Title
  标题
• Your email address
  您的电子邮件地址
• Description
  描述
• Baseurl (maybe)
  Baseurl（也许）
• URL
  网址
• Twitter username
  Twitter用户名
• GitHub username
  GitHub用户名

Once you've customized the site variables in _config.xml, you're ready to start adding content.

在_config.xml自定义了站点变量之后，就可以开始添加内容了。

添加内容 (Adding Content)

You'll put new posts in the _posts folder. You can see the file naming convention in the post that Jekyll automatically created there for you:

您将新帖子放入_posts文件夹。 您可以在Jekyll为您自动创建的帖子中看到文件命名约定：

YYYY-MM-DD-post-slug.md

By default, Jekyll will use that date and that slug to create a permalink to your post. If you create a file called 2015-02-22-using-jekyll.md, Jekyll will convert that file to a full HTML page at [your-site.com]/2015/02/22/using-jekyll.html.

默认情况下，Jekyll将使用该日期和该段标记创建指向您帖子的永久链接。 如果您创建一个名为2015-02-22-using-jekyll.md的文件，那么Jekyll会在[your-site.com]/2015/02/22/using-jekyll.html将该文件转换为完整HTML页面。

If you had a WordPress site you're converting to Jekyll, this exporter will be a big help to you. It'll create all the markdown files you need, preserving your old WP permalinks, and bringing all the necessary media attachments from /wp-content/uploads.

如果您有一个WordPress网站，而您要转换为Jekyll，则此导出程序将对您有很大帮助。 它将创建所需的所有markdown文件，保留旧的WP永久链接，并从/wp-content/uploads带所有必需的媒体附件。

建立您的网站 (Building Your Site)

In the folder that contains your _config.xml file, run the command jekyll build. This will process all of your markdown files with your theme and build a full site in the _site/ directory.

在包含_config.xml文件的文件夹中，运行jekyll build命令。 这将处理所有带有主题的markdown文件，并在_site/目录中构建完整站点。

If you want to test the site locally, run

如果要在本地测试站点，请运行

$ jekyll serve

instead, then go to http://localhost:4000 in your browser to use your site.

而是在浏览器中转到http://localhost:4000来使用您的站点。

GitHub页面 (GitHub Pages)

GitHub offers automatic hosting for Jekyll sites. If you don't have a GitHub account, you can create a free account here.

GitHub为Jekyll网站提供自动托管。 如果您没有GitHub帐户，则可以在此处创建一个免费帐户 。

设置GitHub Repo (Setting up GitHub Repo)

Once you've created a GitHub account, create a new repository for this site to live in.

创建GitHub帐户后，请创建一个新的存储库供此站点使用。

I'd recommend choosing the "Initialize this repository with a README" option. Click "Create repository" and you'll be taken to a page that shows you an overview of the whole repo. This tutorial will walk you through connecting your local folder to that GitHub repo.

我建议选择“使用自述文件初始化此存储库”选项。 点击“创建存储库”，您将进入一个页面，向您显示整个仓库的概述。 本教程将引导您将本地文件夹连接到该GitHub存储库 。

Once that's done, GitHub will publish your site automatically from your_username.github.io. In order to add your own domain to that site, you'll need to add a file called CNAME (all caps, no extension) to the root of your repo. That file should contain one line: your domain (no protocol, just the domain).

完成后，GitHub将通过your_username.github.io自动发布您的站点。 为了将自己的域添加到该站点，您需要在回购的根目录中添加一个名为CNAME的文件（全部大写，无扩展名）。 该文件应该包含一行：您的域（没有协议，只有域）。

Then set your DNS to point to GitHub: you can do that with either A or CNAME records.

然后将DNS设置为指向GitHub：您可以使用A或CNAME记录来实现 。

推送新内容 (Pushing new content)

As you write new content, you'll create posts in your local _posts folder. To publish those posts to your GitHub site, you'll follow the following steps:

在编写新内容时，将在本地_posts文件夹中创建帖子。 要将这些帖子发布到您的GitHub站点，请执行以下步骤：

$ git add .
$ git commit -m 'message about which post you published'
$ git push origin master`

The new page will be added automatically to your GitHub Pages site. GitHub serves these pages much more quickly than any shared host I've ever used: another big performance win!

新页面将自动添加到您的GitHub Pages站点。 GitHub提供这些页面的速度比我使用过的任何共享主机都要快得多：另一个巨大的性能胜利！

云耀斑 (CloudFlare)

CloudFlare is the last piece of this puzzle. You can set up a free account at cloudflare.com/sign-up. CloudFlare acts as both a DNS host and a proxy for your site. They provide several CDN and minification tools to speed up this site even more.

CloudFlare是此难题的最后一部分。 您可以在cloudflare.com/sign-up上设置一个免费帐户。 CloudFlare既充当DNS主机，又充当站点的代理。 他们提供了几种CDN和缩小工具，以加快该站点的速度。

将域添加到CloudFlare (Adding a domain to CloudFlare)

Once you've created your account, add the domain you want to use in the large "+Add website" field at the top of the page. It'll take a moment to scan the web and import all existing DNS records for that domain. When CloudFlare is done scanning, you'll be given instructions for pointing your domain at CloudFlare's DNS host servers.

创建帐户后，在页面顶部的“ +添加网站”大字段中添加要使用的域。 扫描网络并导入该域的所有现有DNS记录将需要一些时间。 完成CloudFlare的扫描后，系统会提示您将域指向CloudFlare的DNS主机服务器。

配置缩小和缓存 (Configuring minification & caching)

Once the domain is successfully being run by CloudFlare, you can edit its CDN and minification settings. The domain will now appear in the list of "My websites" - click the gear icon at the far right of that row, then choose "CloudFlare settings".

CloudFlare成功运行该域后，您可以编辑其CDN和缩小设置。 现在，该域将出现在“我的网站”列表中-单击该行最右边的齿轮图标，然后选择“ CloudFlare设置”。

On the settings page, go to the "Performance setting" tab. I recommend the following settings:

在设置页面上，转到“性能设置”标签。 我建议以下设置：

• Performance profile: this will change by itself
  绩效概况：这将自行改变
• Individual performance settings: Aggressive
  个别表现设定：进取
• Minimum expire TTL: 24 days
  最小到期TTL：24天
• Auto Minify (Web optimization): select all (JS, CSS, HTML)
  自动缩小（网页优化）：全选（JS，CSS，HTML）
• Rocket Loader: off
  火箭装载机：关闭

结论 (Conclusion)

Now you have a flat-file website, automatically generated by Jekyll, hosted at lightning-speed by GitHub Pages, and optimized by CloudFlare. What kind of Page Speed gains have you seen? Please share before/after numbers in the comments!

现在您有了一个平面文件网站，该网站由Jekyll自动生成，由GitHub Pages以闪电般的速度托管，并由CloudFlare优化。 您看到了什么样的Page Speed收益？ 请在评论中分享之前/之后的数字！

翻译自: https://scotch.io/tutorials/jekyll-github-pages-and-cloudflare-for-pagespeed-win

github jekyll