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

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

如果你還未嘗試 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 最後產生出來的腳本。

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

  1. Notion公开页面报错,出现Mismatch between origin and baseUrl (dev).的解决方法 - 知乎
  2. https://github.com/stephenou/fruitionsite/issues/107
  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),可以參考這幾個教學來操作: