GitHub pages+自定義域名(騰訊雲域名)+cloudflare加速

Le先生發表於2022-01-21

本人也是第一次走完整個流程,github pages當然一直有使用,建立也很簡單,並且網上教程也比較多;然後是關於自定義域名的問題,自己以前使用過國外的免費域名,然後是直接修改就ok了,然後這次使用了從騰訊雲註冊的域名,中間會麻煩一些,然後網上也沒看到能夠特別匹配的教程;最後就是cloudflare的免費CDN加速了,對於github pages的訪問來說,CDN加速是非常必要的了。

一、建立GitHub pages

這裡網上教程很多,就不過多介紹了

現在的GitHub pages和以前有一點不太一樣,現在是在setting裡面單獨有一個pages的設定介面,然後可以在裡面設定靜態頁面要訪問的檔案目錄,建立過程比較簡單,而且像我使用pages是用於個人部落格的搭建,使用到了docsify(A magical documentation site generator.),它自己的文件裡就有教如何進行部署的教程,像vuepress這些都會有教程文件,可以參考。

完成建立後,你會得到一個GitHub pages預設的域名,就像這樣:使用者名稱.github.io,像我的就是ceresopa.github.io

二、自定義域名

1. 域名註冊

這裡我選擇的是騰訊雲註冊的域名,就10幾塊錢買了一年,還挺不錯的,如果同樣選擇騰訊的域名註冊的話可以和我進行一樣的操作。

image-20220121102137135

這裡直接按照要求購買就可以,不過要提前進行實名後才可以進行購買,這裡要注意一下。買完後它應該會提示你進行域名解析啥的,可以先不用管,之後再搞。

2. GitHub pages繫結自定義域名

現在可以到GitHub去繫結自己的域名,像下面這樣。

image-20220121102618438

不過,當儲存save後,應該會出現下面的提示:

image-20220121102756378

這裡是因為還沒有進行域名解析的原因,所以我們可以回到騰訊域名管理那裡,去進行域名的解析,從而通過域名正常訪問對應的伺服器。

突然發現這裡在DNSPOD進行域名解析的步驟貌似有點多餘,因為之後DNS解析會遷移到cloudflare,會在那邊再進行設定,不過如果是不需要使用cloudflare,可以看下這裡在DNSPOD的解析步驟吧。?

進入https://console.dnspod.cn/dns,在這個介面裡可以選擇你的域名,DNS解析>我的域名,然後選擇快速新增解析,如下圖所示:

image-20220121103213827

點選之後就會出現下面的這個介面,選擇網站解析>域名對映,然後填寫你的GitHub pages的預設域名(使用者名稱.github.io),最後點選確認就可以自動完成解析了。

image-20220121103417276

完成以上的步驟後,就已經可以通過你自己的域名去訪問你的靜態網站了,像現在就可以通過http://yulegend.cn去訪問我的個人部落格了,不過此時還只能使用http進行訪問,還不能夠通過https進行訪問,不過不急,我們在完成cloudflare的CDN加速的步驟中就可以完成https的設定。

三、cloudflare進行CDN加速

1. 註冊cloudflare賬號

點選https://dash.cloudflare.com/sign-up進行賬號註冊或登入

然後就會馬上出現一個輸入你自己域名的介面,輸入完成域名後就會看到一個選擇計劃的介面,當然,這裡果斷免費,反正是自己用,而且白嫖就是爽。(ps:這裡的過程忘記截圖了?)

2. 域名解析

再接著按著步驟應該就會到下面這樣的介面,會讓你新增DNS記錄:

image-20220121111558693

這裡都選擇A型別,可以參考下之前在騰訊的DNSPOD那裡新增的解析,一條@(就是你的二級域名,就像yulegend.cn)的,另外一個就是www的,中間還會讓你填寫你伺服器的ip,這裡可以通過ping一下GitHub給的那個域名,就可以得到ip地址了,像我的就是

ping ceresopa.github.io

3. 更改DNS伺服器至cloudflare

這裡就需要回到騰訊雲,將原來的DNS伺服器(指向DNSPOD的)改為cloudflare。

進入你的域名管理,如下圖:

image-20220121112357648

然後在域名資訊裡面就可以看到修改你的DNS伺服器,這裡直接把原來的兩個替換掉就好了,替換的內容在cloudflare的步驟裡面其實有詳細的說明(至於為什麼沒有截圖,當然又是忘記截圖了?,絕望,好在cloudflare是有詳細的步驟過程的。)

image-20220121112658168

至此,就完成了到cloudflare的繫結,後面cloudflare就會提示你要不要使用ssl證書,開啟http跳轉https之類的,直接按照提示下一步下一步就完事了。

然後回到GitHub pages的設定介面:

image-20220121112842726

就可以順利的開啟你的enforece https了,愉快而且快速地訪問你的網站了,這裡貼一下我自己的:https://yulegend.cn,目前還沒什麼筆記,以前很早就打算弄的,但最後都沒搞下來,這一次一定堅持下來,都搞了這麼多準備工作,不堅持下來著實說不太過去了。

四、總結

總的來說,步驟還並不算特別複雜,一開始沒弄之前也是有點雨裡霧裡,以為會超級麻煩的,尤其是cloudflare部分,設定起來並不複雜。關鍵上就三個點吧,一個是域名解析,第二個就是ssl證書與開啟https,最後就是關於CDN加速,這也是我們最關心的三個部分。

參考資料

https://monkeywie.cn/2020/08/20/fast-github-page-with-cloudflare/

https://www.pianshen.com/article/8089379345/

相關文章