CloudFlare

使用CloudFlare Pages架設網站

Cloudflare推出了新玩具，基本上就是從你的GitHub專案部屬來的，但是不限制專案要是公開的，也就是說，就算你在Github的專案是私人的，一樣可以～

現在就跟著我一起來部屬一次吧

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

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

001.png

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

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

002.png

完成後commit會看到以下畫面

003.png

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

004.png

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

005.png

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

006.png

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

007.png

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

008.png

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

009.png

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

010.png

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

011.png

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

012.png

回到網站列表並點選剛剛部屬的網站，你可以看到自訂網域（前提是你在Cloudflare上已經有網域了），點選「設定自訂網域」

013.png

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

014.png

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

015.png

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

016.png

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

017.png

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

© 2024 CRE0809's Blog