單元重點
🖥️
利用 Notion 製作完整個人網站｜步驟單元文稿
單元 6-4｜文稿、畫面對應
段落要點
畫面類型
錄音文稿
畫面備註
投影片
哈囉～我是Kevin，這個單元要教大家怎麼利用 Notion 搭配一個叫做 Fruition 的工具，架設出一個擁有客製化網域的網站。這個單元影片主要會專注在如何幫你的 Notion 網站套上客製化的網域名稱，並且也可以調整 Google Font 字體或者做 SEO 的進階設定。
如果是想知道如何製作出個人網站或作品集，可以參考課程的第五章節哦！那我們就開始吧！
畫面操作
當我們在使用 Notion 過程中想要分享某個頁面給朋友，我們可以非常快速的透過頁面右上角的「Share」按鈕來產生公開連結，也可以調整公開分享的權限。
點開這個連結的朋友，就可以直接看到頁面上的內容，甚至還可以透過評論功能跟你互動。
利用 Notion 這個可以建立無限階層頁面的特性，我們可以很輕易的製作出個人網頁，或是一個完整的部落格與個人網站，並且用上面所說的公開連結分享的方式，把你的網站分享出去，或讓搜尋引擎可以收錄你的內容。
但如果今天我們想要讓這個網站看起來更正式一點，勢必我們會需要幫網站套用一個專屬的網域、專屬的網址，讓網站讀者不會總是看到 Notion 上方內建的那一整坨網址，不太美觀。
有些人會透過短網址工具來縮減你的 Notion 頁面網址，就像是這樣。但這只是治標不治本，你貼上網址跳轉過去之後，網頁上網址還是會變回原來 Notion 網址的模樣。
這個單元呢就是要教大家透過 Fruition 這個免費開源的工具，基於 Notion 搭建一個有客製化網域的網站，在整個過程中唯一需要花費的就是購買一個你喜歡的網域，並且搭配 Cloudflare 這個免費平台，以及 Fruition 這個開源程式碼工具，來設定客製化網域。
畫面操作
首先我們先進到 Fruition 這個網頁看一下，這個網頁本身就是透過 Notion 搭配網域來製作而成的。上方主要有簡單描述了運用這個免費工具可以達到的功能，也講到了適合運用的情境，以及優點跟缺點。
中間這段落主要是作者的敘述，傳達了他建構這個免費工具的理念。
直接往下看到「Get Started」的部分，這邊其實就有附上十分詳細的步驟教學，我們這部影片也會參照這邊的頁面一步一步帶大家實作。
最下方則是使用者評論以及作品集，大家感興趣的話可以到這個頁面上看，我會把 Fruition 的頁面連結放在單元列表中老師的話裡面。
畫面操作
我們先跳轉到 Get Started 的地方，來進行 Fruition 上標示的 Step 0 前置作業。
首先第一點告訴我們要先準備好一個你想要公開的 Notion 頁面，並且開啟公開權限以及搜尋引擎收錄功能，這邊我打開我待會要套用網域的頁面，點擊頁面右上角的「Share」，開啟 「Share to Web」的公開設定。
公開設定下方的選項，這些選項是否要開啟就看你自己，因為我的這個網頁是要做成 Notion 版本的個人網站，因此我自己會開啟讓搜尋引擎收錄的功能。
畫面操作
回到 Fruition 的網頁上，第二個步驟他叫我們去「購買網域」，你可以到自己習慣的網域服務商去購買網域，以台灣來說的話 Gandi.net、Godaddy.com 比較多人使用。
而 Fruition 這邊跟我自己都是使用國外一個平台叫做 NameCheap 來購買網域，雖然有些 .tw 、 .tw.com 結尾的網域網址會購買不到，但基本上我覺得一般的網站購買 .com 的網域就很夠用了。
NameCheap 網域的第一年或者後續續約價格也都比較便宜，.com 的網域一年大約 3-400 元台幣就可以搞定了。
而因為購買網域的步驟比較繁瑣，同學們可以直接參考我之前寫過的教學文章。我把教學文章放在老師的話裡面，如果還沒有自己網域的同學可以現在暫停影片，先去老師的話點擊文章，按照文章的步驟去購買網域。
要提醒同學一下，這篇文章只需要看文章的前半部分 NameCheap 購買網域的教學就好囉，後面到 Cloudflare 代管 DNS 的部分，我接下來會帶著大家一起實作。
這堂課中會以 NameCheap 來示範怎麼跟後續的 Cloudflare 串接，因此建議如果不是太懂網域設定的同學，可以跟著教學文章的步驟到 NameCheap 購買網域就好，以免使用其他網域商的話操作流程跟畫面會有點不同。
按照文章教學購買網域之後，你應該可以在你的 NameCheap 後台看見你的網域，點開右邊的「Manage」則可以進到網域的設定後台，請大家保留保留這個頁面，我們待會會用到。
畫面操作
在準備好 Notion 要公開的頁面，並且購買好 NameCheap 網域之後，這邊的前置作業準備就完成了，接下來就進到 Step 1 來設定 Cloudflare 的帳號了。
畫面操作
首先我們要註冊 Cloudflare 的帳號，點擊步驟中的這個網址就可以跳轉到 Cloudflare 上。
右上角的語言下拉式選單可以把頁面調整成繁體中文，如果你沒有看到繁體中文選項，可能是你的畫面比例太大了，可以縮小一點就會看到選項了。
接下來就在網頁上輸入你要註冊帳號用的電子郵件以及密碼。輸入完成之後點擊下方的「建立帳戶」，成功註冊會員之後，頁面就會跳轉到 Cloudflare 的首頁。
在你註冊之後， Cloudflare 會發送一則驗證 Email 到你的信箱中，如果有收到的話也要記得點擊信件中的連結去驗證你的 Cloudflare 帳戶，信件大概會長得像畫面中這個樣子。
畫面操作
接下來我們點擊左上角的 Logo 回到網站的首頁，這邊是 Cloudflare 的操作控制台，目前因為還沒有設定代管的網域，因此左邊這邊會是空白的。
（展示 NameCheap 的畫面）
通常在購買網域後，我們最常動到的地方就是 DNS 設定的部分，而透過 Cloudflare 我們可以直接設定用 Cloudflare 代管所有與網域有關的設定，接下來帶大家一步一步來設定。
首先我們點擊畫面上的「新增網站」，開始設定網域代管的流程。
在畫面中的輸入框輸入你新購買的網域，輸入完成後就點擊「新增網站」繼續下一步。
接下來要選擇 Cloudflare 的方案，我們選擇免費方案並且繼續下一步，Cloudflare 免費方案就已經足夠我們使用了。
接下來這個畫面就是前面提到的 DNS 設定畫面，在畫面中你可以看到一個 DNS 設定資訊的表格，這邊我們需要確認是否有一筆 Type 是「 A 」的設定紀錄，並且 Name 要是你的網域名稱， Value 則是指向到 1.1.1.1。
如果沒有的話，請在上方新增一比 Type 是「A」，Name 是你的網域名稱，並且 IP 地址 1.1.1.1 的紀錄之後，點擊右邊的「Add Record」來將紀錄儲存。
下一步會跳轉到變更網域名稱伺服器的頁面，網頁上有很清楚的步驟教你怎麼設定透過 Cloudflare 來代管 NameCheap 上購買的網域。
首先第一步我們先按照提示登入 NameCheap 帳號，進到後台控制介面，如果剛剛網頁還沒有關掉的同學應該可以直接接續操作。
接下來把畫面中這裡 NameServer 的地方刪除，並且用 Cloudflare 提供的 NameServer 來取代。取代完成後請點擊畫面上這個位置的小綠色勾勾，這個一定要點擊才會送出儲存，很多人這一步驟會因為那個勾勾太小了所以忘記點擊儲存。
回到 Cloudflare 畫面最下方，可以直接點擊「Check NameServer」的按鈕，讓 Cloudflare 這邊去檢查你的 NameCheap 那邊是否已經設定好授權代管。如果你點擊按鈕之後還顯示尚未設定，等待幾分鐘之後重新回到這個頁面上點擊最下方的「Re-check」按鈕直到成功就可以了。
下一步把 SSL/TLS 的加密設定調整成「Flexible」，並且調整下方的「Always Use HTTPS」變成啟動狀態。底下兩個 Auto Minify 以及 Brotli 的話也可以一並勾選啟動，但如果你是使用子網域來設定，Cloudflare 中還有綁定另一個網站的朋友，就建議這邊底下兩個選項不用勾選，以免影響到你原來的 WordPress 或其他網站。
最後點擊 Done ，就完成這邊的步驟了。從 Cloudflare 點進代管網站的資訊，若看到畫面上顯示綠色的勾勾，就代表目前 Cloudflare 已經成功代管你的 NameCheap 網域，未來除非要續約網域，否則應該不用再需要點開 NameCheap 平台做什麼設定了。
如果到這邊同學操作上有什麼問題，歡迎到 FB 專屬學員社團中截圖並描述你的情況，我們或其他同學會在社團中協助你。
畫面操作
接下來我們要透過 Cloudflare 中的一個叫做 Workers 的應用程式平台，來讓我們的 Notion 可以擁有客製化的網域。
首先在 Cloudflare 的操作介面上方的一排藍色方塊中，找到 Workers 的方塊並點擊過去，並且點擊畫面上「Manage Workers」
輸入一個子網域名稱，之後 Cloudflare 會利用這個子網域幫你運行 Workers。這邊的網域並不會影響到我們後續 Notion 網站要顯示的網域，大家可以隨意取名設定。
設定完成之後點擊「Set Up」，確認子網域沒有輸入錯字之後，點擊「Confirm」送出設定。
接下來畫面會跳出方案視窗，免費方案可以容納每天10萬個網頁請求，而如果你的網站流量高到超出這個請求量，就需要選擇升級到右邊這個每個月五元美金的方案，未來如果你用 Notion 建立的網站有很高的流量時再來關注這邊是否需要升級就好。我們先選擇左邊的免費方案
這邊如果你還沒有驗證你的 Email 請到信箱中去收信驗證，而我們可以在右邊看到每天的網頁請求量，從這邊就能知道你的網頁請求有沒有超過。
點擊畫面上 Create a worker，就會進到 Worker 後台的程式碼編輯視窗，這邊我們不會需要手動輸入到程式碼，而是要用 Fruition 上的功能來幫我們自動產生程式碼。這個頁面先不要關掉，我們回到 Fruition 那邊去看看。
畫面操作
以上都完成之後，Step 1 就完成囉，我們就可以進到 Step 2 來開始替我們的 Notion 頁面建立對應的短網址，並且利用網頁上的工具產生程式碼了！
首先我們在第一個輸入框輸入我們的網域，第二個則輸入對應的 Notion 公開網址，就可以自動產生出程式碼，讓我們複製到剛剛的 Worker 畫面中儲存運行了！
這邊我們先在最上方輸入我們的網域，並且在下方輸入你要當作首頁的 Notion 公開網址，這邊就以我自己的 Notion 數位空間網站為例子，把這個網頁作為網域對應的首頁。
除了首頁之外，點擊下方的「Add A Pretty Link」還可以新增其他的子頁面，像是部落格常見的 About 頁面。在上方輸入 about 之後，切換到你要作為 About 頁面的 Notion Page 並且一樣取得公開網址，貼上後就完成了。
這邊你可以把你所有想要加入的頁面都一個一個加入，斜線後面的網址路徑可以自己決定，但建議不要使用中文作為路徑網址哦！我這邊先只設定一個 About 頁面來做示範。
設定完成之後，點擊下方 Copy the code 就可以複製自動產生的程式碼，我們先將這邊的程式碼複製起來保存，就完成 Step 2 囉。
畫面操作
最後展開 Step 3 ，根據上面的指引我們回到 Cloudflare 的 Worker 頁面，把原先預設的程式碼全部刪除後，貼上剛剛我們從 Fruition 複製的網址，並且點擊「Save and Deploy」送出程式碼。
在儲存之後，點擊畫面上方的網站名稱，回到操作介面，再次進入 Worker 的分頁，並且點擊「Add Route」，在畫面上輸入你的網域 + /* ，如果要用子網域設定的人請輸入 *yourdomain.com/* ，點擊「Save」之後就大功告成啦！
最後我們在瀏覽器上輸入我們的網域（或子網域），就可以成功瀏覽我們的 Notion 頁面，並且在跳轉到 About Page 或首頁的過程中，網域都不會變回 Notion 那個亂碼的網址了！
畫面操作
後續如果你想替你的網站做一些進階的設定，其實 Fruition 這邊也有提供你可以設定你的 Page Title、Page Description，並且也可以客製化選擇你要使用的 Google 字體，或是貼上客製化的嵌入程式碼像是 Google Analytics 的程式碼等等。
這邊比較偏向是 SEO 相關的進階需求，有需要的同學可以自己研究看看，或在 FB 社團中與大家討論交流唷！
恭喜跟著做完的同學們擁有自己一個基於 Notion 的網站啦！之後你只要在 Notion 中更新內容，就等同在更新你的個人網站了，不過要記得如果有建立新的頁面的話，還是要回到 Fruition 工具裡頭重新設定 Pretty link ，並且再將程式碼更新到 Cloudflare 的 Worker 中唷！
那這單元就到這邊啦，我們下個單元見
研究看看程式碼差異在哪，推薦大家一個比較簡單、不用每次都重新設定所有網頁的方式
