圖解機器學習 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…

如果...，您應該閱讀此內容

You want to setup custom redirects or other server configuration for free
您想免費設置自定義重定向或其他服務器配置
You want to get your site on HTTPS but don’t know where to start
您想在HTTPS上獲取您的網站，但不知道從哪里開始
You’re overwhelmed with the amount of choices out there (like Netlify, Surge, BitBalloon, Now)
您不知所措，那里的選擇太多了(如Netlify ， Surge ， BitBalloon ， Now )

為什么選擇Github？ (Why Github?)

Easy to setup and get started with Github Pages
易于設置并開始使用Github Pages
Instant deploys on pushing new code
即時部署以推送新代碼

為什么選擇Cloudflare？ (Why Cloudflare?)

It’s free
免費
It comes with out-of-the-box support for SSL (HTTPS). (Here’s why HTTPS matters.)
它具有對SSL(HTTPS)的開箱即用的支持。 ( 這就是HTTPS很重要的原因。)
Super simple DNS management
超級簡單的DNS管理
Ability to set browser cache expiration for assets
可以設置資產的瀏覽器緩存到期時間
Auto minify your static assets
自動縮小您的靜態資產
Custom page rules for setting up redirects, always HTTPS, etc.
用于設置重定向(始終為HTTPS等)的自定義頁面規則。
HTTP2/SPDY for supported browsers
適用于支持的瀏覽器的HTTP2 / SPDY
Allows for setting up HSTS (HTTP Strict Transport Security)
允許設置HSTS (HTTP嚴格傳輸安全性)

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

A Github account
一個Github帳戶
A Cloudflare account
Cloudflare帳戶
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://<yourgithubusername>.github.io/repository to see your website in action as shown below.

轉到存儲庫的設置。在Github Pages部分中，選擇master分支來服務您的網站。完成此操作后，您可以轉到https：// <yourgithubuserna 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注冊器(您購買域名的地方)站點。如果您使用以下注冊商之一，則可以了解如何更改名稱服務器的鏈接是：

Bigrock
巨巖
Namecheap
便宜貨
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:

在這一步中，我們將做兩件事：

Redirect all requests for www.yourcustomdomain.com to yourcustomdomain.com
將對 www.yourcustomdomain.com的所有請求重定向到yourcustomdomain.com
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)。