Others

使用 Fruition 快速建立你的個人品牌頁面

Kordan Ou

2023年4月23日 • 5 min read

如果你還未嘗試 Notion，我強烈建議試試看。Notion 是一站式解決方案，幾乎可以能夠滿足所有的寫作和計劃需求。使用 Notion 維護有關客戶、費用、GitHub 問題以及公司網站的所有訊息，甚至還可以用來製作一個品牌頁面，例如我就建立了我的個人專業：https://kordan.me。

為什麼 Notion 是個好選擇呢？因為在這個無需寫程式的平台上建立網站非常容易，且更新或編寫現有內容也非常方便。透過 Notion 架設網站，就可以使用手機編輯與發佈，而且該網站已設計為響應式、支持深色主題，看起來非常優雅。

以下是如何在 15 分鐘內使用 Notion 建立一個可擴展的小型網站。

步驟 1：建立頁面

前往 Notion.so 建立帳戶。建立好帳戶後，你可以建立一個工作區並開始編寫內容，就像使用 Google 文件或簡單文件一樣。使用 “/” 命令可以查看可以新增到頁面的所有可用元素（例如標題、列表、表格、新頁面等）。你還可以為網站新增圖示和封面。

建立頁面後，點擊右上角的 “共享” 按鈕，選擇 “共享到網路”，然後取消選擇 “使用樣板” 並選擇 “在搜尋引擎中索引”，然後複製網址。如果你將此網址粘貼到瀏覽器中，你已經可以看到你的網站（但顯示的是 Notion 的 URL）。

步驟 2：建立域和 Cloudflare 帳戶

需要先有一個域名，也可以在 Freenom.com 上獲得一個免費域名。

建立帳戶後，搜尋你想要的域名，然後在顯示的結果中選擇你想要的域名，將其加入購物車並結帳。購買完域名後，前往 Cloudflare 網站建立帳戶。完成註冊後，將你的新網站新增到 Cloudflare 帳戶中。如果出現錯誤，請等待一小時後重試。完成後，選擇一個免費計劃。

現在，Cloudflare 將掃描 DNS 設定。如果未獲得正確的名稱伺服器，你可能需要在 Freenom 網站上手動替換這些名稱伺服器。從 Cloudflare 網站複製名稱伺服器並將其粘貼到域的名稱伺服器設定中。接下來，返回 Cloudflare，並按照以下步驟設定。

你可以點擊 “Check nameservers” 按鈕檢查名稱伺服器是否反映出來（通常需要一小時）。

關鍵步驟：設定 Worker

點擊 “建立服務” 按鈕，保留所有設定，然後再次點擊 “建立服務”。

此時，你將被重導向到服務頁面，在其中找到 “Quick Edit” 按鈕。單擊此按鈕將打開腳本頁面。

步驟 3：使用 frutionsite.com 建立腳本

在新的瀏覽器視窗中打開 Fruition 網站。

在網站中滾動到第二步，並填寫相關的輸入框。在此處新增我們在第一步中獲取的網站名稱和 Notion 的 URL。你還可以透過單擊 “新增漂亮連結” 來新增更多連結，例如關於頁面。

完成後，點擊 “複製程式碼” 按鈕，返回 Cloudflare 的腳本頁面，並使用複製的程式碼替換現有程式碼。複製後，單擊 “保存並部署”。

返回服務頁面並單擊 “觸發器” 選項卡。然後按照以下方式新增 URL：DOMAIN_NAME_DOT_COM

步驟 4：完成

你現在可以訪問你的域名，看到 Notion 網站已經載入。現在，你所做的任何更改都會反映在你的域名中。

想新增新的頁面嗎？只需建立一個新頁面，打開腳本，並在此處新增訊息。例如，如果你要新增聯繫頁面，建立頁面，從頁面連結複製唯一程式碼，然後將其新增到此處。

這就是建立自己的小型網站的全部步驟。Notion 和 Fruition 可以幫助你在 15 分鐘內輕鬆地建立一個可擴展的小型網站。如果你需要更多功能和自定義選項，可以考慮使用其他網站建立平台。

參考資料：Creating a free site using notion in 2022 | by Krishna G. Lodha

注意事項

因為 Fruition 已經一段時間沒有維護，Notion 針對公開頁面也有不小的改動，尤其是域名的變化，網路上還是有很多類似的方案替代 Fruition，但是如果要完全免費這個可能還是最輕鬆的方案，所以對於能動手的人，我附上這個 Worker Script，這就是使用 Fruition 最後產生出來的腳本。

對於已經部署成功但是因為改版出錯的使用者，可以參考這兩個文章修改：

  class BodyRewriter {
    constructor(SLUG_TO_PAGE) {
      this.SLUG_TO_PAGE = SLUG_TO_PAGE;
    }
    element(element) {
      element.append(`<div style="display:none">Powered by <a href="http://fruitionsite.com">Fruition</a></div>
      <script>
      window.CONFIG.domainBaseUrl = "https://kordan.me";
      const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)};
      const PAGE_TO_SLUG = {};
      const slugs = [];
      const pages = [];

進階：在個人首頁加上社交按鈕

Notion 內建的元件畢竟還是有限的，如果要一些比較華麗的效果，就要依賴別人寫好的 Widget，如果想要跟我個人檔案一樣的效果（我使用 Circular Social Icons 這個 Widget），可以參考這幾個教學來操作：