使用CloudFlare Pages架設網站

注意:我還不確定是不是只有提出申請的才有這個功能,但反正我的帳號是有了。OAO

CloudFlare推出了新玩具,基本上就是從你的GitHub專案部屬來的,但是不限制專案要是公開的,也就是說,就算你在Github的專案是私人的,一樣可以~
現在就跟著我一起來部屬一次吧

☆你需要準備以下材料:一個Github帳號、一個CloudFlare帳號、一雙萬能的手(X
☆方便起見,我就從Github的專案建立開始教學~

第一步在Github建立一個專案,那這邊專案名稱我就test就好,而專案要Public或是Private就看你自己囉,我這邊選Private,完成後就按Create repository

再來我就直接建立一個檔案名為index.html,內容大概如下
沒錯就是大家都寫過,鼎鼎大名的Hello World ( X

<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
 <html>

完成後commit會看到以下畫面

這時候我們就到CloudFlare上操作囉!
點選畫面右邊的”網頁”

點選建立專案(初始畫面可能不是長這樣,因為我大概先玩過一次才來寫這篇文章)

接著會要你連結你的Github帳號

接著會循問你要把哪幾個專案讓CloudFlare看到,你可以選擇全部,或者你也可以限制幾個就好,那我這邊就只選擇test,接著就按 “Install & Authorize”

接下來網頁就會轉回CloudFlare,選擇你的存放庫就按開始設定

接著最主要就是看你要不要更改專案名稱,那我這就不改了

組態設定在絕大部分時候可能用不到,我覺得靜態網站最有可能用到的應該是組建輸出目錄,如果你只想讓你在Github專案下的某個資料夾被推出去,那你就可以用到這邊的設定,我這邊選擇全部都不動,按”儲存並部屬”

接著CloudFlare就會開始部屬,等到都完成之後,你也會在右上角看見網址

點進去也可以確實看到網頁,如果你的名稱沒有人用過,基本上就是 名稱.pages.dev,不過test可能有人用過了,所以出現的名字醜醜的,但不過沒關係,接下來會說如何改掉這個網址

回到網站列表並點選剛剛部屬的網站,你可以看到自訂網域(前提是你在CloudFlare上已經有網域了),點選”設定自訂網域”

那我這邊簡單的輸入cfpagetest.cre0809.com,作為我的網址

這邊CloudFlare會跟你說,他要幫你新增這些DNS,點選”啟動網域”後,他就會開始設定,這邊會需要一些時間,就麻煩耐心等待一下囉!

完成後,你可以看到上面出現使用中,且SSL也啟用,意思就是已經開啟Https的加密協定

這時候輸入網址,也可以看到網站並且看到https的鎖頭囉!

心得:CloudFlare這次推出這個網頁的確是蠻簡單且方便的,對於新手非常友善。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *