图解机器学习 github_使用Github和Cloudflare建立网站的图解指南

图解机器学习 github

by Karan Thakkar

由Karan Thakkar

使用GitHub和Cloudflare建立网站的插图指南 (An illustrated guide to setting up your website using GitHub and Cloudflare)

You should read this if…

如果...，您应该阅读此内容

1. You want to setup custom redirects or other server configuration for free

   您想免费设置自定义重定向或其他服务器配置

2. You want to get your site on HTTPS but don’t know where to start
   您想在HTTPS上获取您的网站，但不知道从哪里开始

3. You’re overwhelmed with the amount of choices out there (like Netlify, Surge, BitBalloon, Now)

   您不知所措，那里的选择太多了(如Netlify ， Surge ， BitBalloon ， Now )

为什么选择Github？ (Why Github?)

1. Easy to setup and get started with Github Pages
   易于设置并开始使用Github Pages
2. Instant deploys on pushing new code
   即时部署以推送新代码

为什么选择Cloudflare？ (Why Cloudflare?)

1. It’s free
   免费

2. It comes with out-of-the-box support for SSL (HTTPS). (Here’s why HTTPS matters.)

   它具有对SSL(HTTPS)的开箱即用的支持。 ( 这就是HTTPS很重要的原因 。)

3. Super simple DNS management
   超级简单的DNS管理

4. Ability to set browser cache expiration for assets

   可以设置资产的浏览器缓存到期时间

5. Auto minify your static assets
   自动缩小您的静态资产
6. Custom page rules for setting up redirects, always HTTPS, etc.
   用于设置重定向(始终为HTTPS等)的自定义页面规则。

7. HTTP2/SPDY for supported browsers

   适用于支持的浏览器的HTTP2 / SPDY

8. Allows for setting up HSTS (HTTP Strict Transport Security)

   允许设置HSTS (HTTP严格传输安全性)

在我们开始之前，您需要做一些事情： (Before we get started you will need a few things:)

1. A Github account

   一个Github帐户

2. A Cloudflare account

   Cloudflare帐户

3. Access to a custom domain. You can buy it from any Domain Name Registrar like: Namecheap, GoDaddy, BigRock, etc.

   访问自定义域。 您可以从任何域名注册商处购买它，例如： Namecheap ， GoDaddy ， BigRock等。

If all this piqued your interest, then let’s get started!

如果这一切引起了您的兴趣，那就开始吧！

第1步 ：使用您的代码创建Github存储库 (Step 1: Create Github repo with your code)

• Go to https://pages.github.com

  转到https://pages.github.com

• Select the option Project Site to find the instructions on how to create a basic page from scratch or a custom theme

  选择选项“ 项目站点”以查找有关如何从头开始或自定义主题创建基本页面的说明。

步骤2.为存储库设置Github Pages (Step 2. Setup Github Pages for the repository)

Go to Settings for your repository. In the Github Pages section, choose the master branch to serve your website from. Once you’ve done that, you can go to https://me>.github.io/repository to see your website in action as shown below.

转到存储库的设置 。 在Github Pages部分中，选择master分支来服务您的网站。 完成此操作后，您可以转到https：// me> .gith u b.io/repo 的理论来查看您的网站的运行情况，如下所示。

步骤3.添加自定义域 (Step 3. Add custom domain)

Add the custom domain that you have bought and save it. Your website is now ready with your own custom domain ? WOOT! ✨

添加您购买的自定义域并保存。 您的网站现在可以使用您自己的自定义域了吗？ 哇！ ✨

So, we have everything setup on Github. We’ll start with setting up Cloudflare to jazz up your website with all the powerful features I mentioned at the beginning of this post.

因此，我们在Github上进行了所有设置。 我们将从设置Cloudflare开始，用我在本文开头提到的所有强大功能来增强您的网站。

步骤4：在Cloudflare上设置您的域 (Step 4: Setup your domain on Cloudflare)

Login to Cloudflare. If you are using it for the first time, you should see a screen like the image shown above. If you have used it before, you can click on the Add Site option in the navigation bar on the top right to add a new domain. Enter the domain you want to manage and click on Begin Scan.

登录到Cloudflare 。 如果是第一次使用它，应该会看到如上图所示的屏幕。 如果您以前使用过它，则可以单击右上角导航栏中的“ 添加站点”选项来添加新域。 输入您要管理的域，然后单击开始扫描 。

步骤5：为您的域设置DNS记录 (Step 5: Setup DNS Records for your domain)

In this step, we inform Cloudflare to point our domain to the Github Pages server using two A Record DNS entries: 1. 192.30.252.1532. 192.30.252.154

在这一步中，我们通知Cloudflare使用两个A Record DNS条目将我们的域指向Github Pages服务器 ：1. 192.30.252.1532。 192.30.252.154

Once you have set this up, all requests to your custom domain i.e. yourcustomdomain.com will be routed to your website on Github on Step 3.

设置完成后，到您的自定义域(即yourcustomdomain.com)的所有请求都将在第3步被路由到Github上的您的网站。

There’s one more step involved before we move on to the next stage. Oftentimes, you would want to use a subdomain like www for your website, i.e. www.yourcustomdomain.com For this, you will need to add a CNAME record DNS entry which will point your subdomain(www) to your apex domain(@).

在我们进入下一个阶段之前，还需要再走一步。 通常，您可能希望使用像www这样的子域作为您的网站，即www.yourcustomdomain.com 。为此，您需要添加一个CNAME记录 DNS条目，它将您的子域(www)指向顶点域(@)。

Once you have set this up, all requests to your custom subdomain i.e. www.yourcustomdomain.com will be routed to your website on Github on Step 3.

设置完成后，所有对您的自定义子域(例如www)的请求。 yourcustomdomain.com将在第3步被路由到您在Github上的网站。

NOTE: Don’t try to go access your custom domain right away. It won’t work. We have only done the Cloudflare to Github setup. We still have to do the DNS Registrar -> Cloudflare setup. This will come up in Step 7.

注意：不要尝试立即访问您的自定义域。 它不会工作。 我们仅完成了Cloudflare至Github的设置。 我们仍然必须进行DNS注册器-> Cloudflare设置。 这将在第 7 页中提出 。

Click Continue to go to the next step.

单击继续转到下一步。

第6步：选择免费Cloudflare计划 (Step 6: Choose the Free Cloudflare plan)

The Free plan for Cloudflare provides a lot of sophisticated options as discussed in the Why Cloudflare? section at the beginning.

Cloudflare的免费计划提供了许多复杂的选项，如为何选择Cloudflare？ 开头部分。

Click Continue to go to the next step.

单击继续转到下一步。

步骤7：在DNS注册器上更新名称服务器 (Step 7: Update Nameservers on your DNS Registrar)

Once you’re on this page, keep it open in one tab and open your DNS Registrar’s (the place from where your bought your domain) site in another. If you’re using one of the following registrar’s then the links to understand how to change Nameserver are:

进入此页面后，在一个选项卡中将其保持打开状态，然后在另一个选项卡中打开DNS注册器(您购买域名的地方)站点。 如果您使用以下注册商之一，则可以了解如何更改名称服务器的链接是：

1. Bigrock

   巨岩

2. Namecheap

   便宜货

3. GoDaddy

   去吧爸爸

You need to replace the existing Nameservers in your Domain settings with the one’s on the Cloudflare page that is open in the other tab.

您需要将“域”设置中的现有名称服务器替换为在另一个标签中打开的Cloudflare页面上的名称服务器。

YASSS! You’ve successfully setup your custom domain to use Cloudflare as a DNS provider. You can go to the Overview option on the top and you will find that it is still waiting for your Nameserver change to be processed.

YASSS！ 您已经成功设置了自定义域，以将Cloudflare用作DNS提供程序。 您可以转到顶部的Overview选项，您会发现它仍在等待名称服务器更改被处理。

Once the Overview tab says Status: Active, you can now try to visit your site using your custom domain, AND IT SHOULD JUST WORK! ??

一旦“ 概述”标签显示“ 状态：有效” ， 您现在可以尝试使用您的自定义域访问您的网站， 并且应该可以正常使用！ ??

步骤8：配置缩小 (Step 8: Configure Minification)

In the Speed setttings, in the Auto Minify section, choose the option to auto-minify everything: Javascript, CSS, HTML. This will be done by Cloudflare on-the-fly once and then cached. Whenever any of your assets change, Cloudflare will do this again for you.

在“ 速度设置”的“ 自动缩小”部分中，选择用于自动缩小所有内容的选项：Javascript，CSS，HTML。 这将由Cloudflare即时完成，然后进行缓存。 每当您的资产发生任何变化时，Cloudflare都会为您再次执行此操作。

The advantage of minification is that the size of the file delivered to your browser is a lot less since it strips off unwanted spaces and comments.

最小化的优点是，传递到浏览器的文件的大小要小得多，因为它会去除不必要的空格和注释。

步骤9：配置浏览器缓存过期 (Step 9: Configure Browser Cache Expiration)

If you scroll down on the same page as Auto Minify, you will find the Browser Cache Expiration section. It should be set to 30 days/1 month, ideally, for WebpageTest to not give you a warning. What this time indicates is that, once your site is loaded in any browser, then the browser will not request any assets for a second time until the Browser Cache time period expires for those assets.

如果您在与Auto Minify相同的页面上向下滚动，则会找到Browser Cache Expiration部分。 最好将其设置为30天/ 1个月，以使WebpageTest不向您发出警告。 这一次的意思是，一旦您的网站加载到任何浏览器中，然后浏览器将不会再次请求任何资产，直到这些资产的浏览器缓存时间段到期为止。

Before we move on to the next step, please check the Crypto settings on Cloudflare. It should say Active Certificate in the SSL section. (Note: Try reloading the page. Sometimes it doesn’t update). In the next two steps, we are going to make your site serve via HTTPS always. For that to work without any problems, it is important that you have an active certificate on Cloudflare.

在继续进行下一步之前，请检查Cloudflare上的Crypto设置。 它应该在SSL部分显示Active Certificate 。 ( 注意：尝试重新加载页面。有时它不会更新 )。 在接下来的两个步骤中，我们将使您的网站始终通过HTTPS服务。 为了使它正常工作，在Cloudflare上拥有有效的证书很重要。

步骤10：配置页面规则 (Step 10: Configure Page Rules)

In this step, we are going to do two things:

在这一步中，我们将做两件事：

1. Redirect all requests for www.yourcustomdomain.com to yourcustomdomain.com

   将对 www.yourcustomdomain.com的所有请求重定向到yourcustomdomain.com

2. Redirect all requests for http://yourcustomdomain.com to https://yourcustomdomain.com

   将对http://yourcustomdomain.com的所有请求重定向到https://yourcustomdomain.com

Go to the Page Rules setting and click on Create Page Rule.

转到页面规则设置，然后单击创建页面规则。

For handling the www.yourcustomdomain.com to yourcustomdomain.com redirect, replace tweetify.io with yourcustomdomain.com name. Click Save and Deploy.

要处理www.yourcustomdomain.com到yourcustomdomain.com重定向，请将tweetify.io替换为yourcustomdomain.com名称。 单击保存并部署 。

For handling the http://yourcustomdomain.com to https://yourcustomdomain.com redirect, replace tweetify.io with yourcustomdomain.com name. Click Save and Deploy.

要处理从http://yourcustomdomain.com到https://yourcustomdomain.com重定向，请将tweetify.io替换为yourcustomdomain.com名称。 单击保存并部署 。

步骤11：配置HSTS (Step 11: Configure HSTS)

Go to the Crypto settings and scroll down to the HTTP Strict Transport Security (HSTS) section. Click on Enable HSTS. This will ask you to acknowledge that you know what you are doing. Before you select I understand, let me tell you why we need to enable this setting:

转到“ 加密设置”，然后向下滚动到“ HTTP严格传输安全性(HSTS)”部分。 单击启用HSTS 。 这将要求您确认您知道自己在做什么。 在选择我理解之前，让我告诉您为什么我们需要启用此设置：

If a user has opened your website in the past, from then onwards whenever the user tries to access your website, they will always be taken to the HTTPS version of your site. This makes your site load a little faster on subsequent visits because the HTTP to HTTPS redirect happens on the client and not via the Cloudflare Page Rule that we added in Step 10.

如果用户过去曾经打开过您的网站，从此以后，只要该用户尝试访问您的网站，他们将始终被带到您网站的HTTPS版本。 这使您的站点在后续访问中的加载速度更快，因为HTTP到HTTPS重定向是在客户端而不是通过我们在步骤10中添加的Cloudflare页面规则进行的。

Once you go to the next step, you should enable all the settings as shown below. You can read more details about these options here and here

转到下一步后，应启用所有设置，如下所示。 您可以在此处和此处阅读有关这些选项的更多详细信息

That’s it. You’re all set to show off your website to the world! ?? If you found this useful, please ❤️ it and share it.

而已。 你们都准备向全世界展示您的网站！ ?? 如果您发现此功能有用，请❤️并分享。

Karan Thakkar is the Frontend Lead at Crowdfire - Your super-smart marketing sidekick. His article has been previously featured on The Huffington Post. He likes trying out new technologies in his spare time and has built Tweetify (using React Native) and Show My PR’s (using Golang).

Karan Thakkar是Crowdfire的前端主管- 您的超级智能营销伙伴 。 他的文章以前曾在《赫芬顿邮报 》上发表过 。 他喜欢在业余时间尝试新技术，并建立了Tweetify (使用React Native)和Show My PR (使用Golang)。

Other articles written by him:

他写的其他文章：

How I grew from 300 to 5k followers in just 3 weeks#GrowthHacking my Twitter account for @Crowdfire Twitter Premier Leagueblog.markgrowth.comUsing the Let’s Encrypt Certbot to get HTTPS on your Amazon EC2 NGINX boxLet’s Encrypt is a new Certificate Authority which provides free SSL certificates (up to a certain limit per week). It…medium.freecodecamp.com

我从300如何成长为5K的追随者在短短三周内， #GrowthHacking我的Twitter账户@Crowdfire Twitter的英超 blog.markgrowth.com 使用让我们加密Certbot以获得HTTPS在您的Amazon EC2 NGINX盒 让我们加密是一个新的证书颁发机构，其提供免费的SSL证书(每周最多有一定限制)。 它… medium.freecodecamp.com

翻译自: https://www.freecodecamp.org/news/an-illustrated-guide-for-setting-up-your-website-using-github-cloudflare-5a7a11ca9465/

图解机器学习 github