方格精選

不用寫程式,用 Notion 快速建立個人網站!

更新 發佈閱讀 3 分鐘
Notion 建立個人網站

Notion 建立個人網站


首先,Notion 並不是一個專門用來建立網站的工具,如果需要功能齊全且長遠發展的人可以自架網站或者請專業人士製作。

那我為什麼還要寫這篇文章呢?

並不是所有的人都需要到專業且複雜的功能,如果能在幾天內,甚至不用一天就建立並發布個人網站,那還是挺推薦使用 Notion。

如果你是學生、求職、個人接案、小本經營等,沒有程式背景,可以先使用 Notion 來建立簡易版的入口網頁。有點像是自己的名片,也方便分享給其他人參考!



Notion 是什麼?

Notion 是一款整合了筆記、知識庫、資料表格、看板、日曆等多種能力於一體的應用程式,它既可供個人使用,也可以與他人進行跨平台協同運作。

不僅可以用來做筆記和管理任務,還可以用來創建和分享網站。本文將用 Notion,讓你無需程式設計知識也可以快速創建一個網站。


Notion 官網


Notion 建立網站的優缺點

優點:

  1. 入門門檻較低:無需程式設計,只要會基礎的功能就能發布內容。
  2. 可隨手更新:無論是用手機、平板、電腦,只要登入同一個 Notion 帳號就可以更改網站內容。
  3. 快速發布:簡單設定即可將頁面發佈,分享連結讓他人存取。


缺點:

  1. 遷站不易:如果想要換網站經營的話,就必須要重新架一個新網站。
  2. 功能有限:無法做出一個功能齊全的網站,如需更進階的功能就不推薦使用,例如:購物車、用戶資訊等。
  3. SEO 限制:在搜尋引擎優化(SEO)方面有一定的限制,不利於提升網站的搜尋引擎排名。

(可參考這篇)



Notion 免費教學資源

影片資源:

  1. 如果沒有使用過 Notion,可以先看這個影片學習基礎概念喔!

➡️Notion 筆記軟體|5 個最基礎功能快速入門,帶你進入 Notion 的世界。

  1. 想要做基礎的自我管理或專案管理可以參考這個影片喔!

➡️如何善用 Notion 快速掌握一門知識?最強筆記術揭祕,讓你的大腦開掛成為學習高手!

  1. 網頁基礎可參考這兩個影片

➡️Notion 推出「網站發布」功能!低成本且易維護,只要會作筆記就能建立網站!

影片中出現的 Plug-in (外掛程式) :按鍵表單

➡️無痛打造 Notion 一頁式網站 / 銷售頁 | Day 470


文字資源:

➡️繁體中文 Notion 教學手冊



基礎概念

每個 Page (頁面) 都是各種 Block (區塊) 的排列组合。Page 也可以放在 Page 裡,類似資料夾裡有資料夾的概念。

按頁面上的 + 號或輸入 / 能把 Block 新增到 Page 上

raw-image

接著按照自己需求,新增需要的 Block 就行囉!


Notion 網頁常用 Block

  • Text (文字):基礎元素
  • H1 (層級 1 標題)、H2 (層級 2 標題)、H3 (層級 3 標題)
  • 2 columns (兩欄式)、3 columns (三欄式)
  • Callout (可以理解為有底色的區塊,如果是用來寫筆記可以拿來寫註解或想法)
  • imagevideo:可插入圖片、影片
  • Embed:嵌入網站
  • Divider:分隔線

先試著用以上幾種功能,就能大致做出一個頁面囉!

Page 雖然也很重要,不過如果是做一頁式的網站,不太需要用到。
剛開始可以先製作一頁式的網站練練手喔!(適合當作個人履歷或小型店家官網)


另外,也可以為 Page 設定頁面圖示和封面:點擊頁面頂部的「Add icon」和「Add cover」按鈕



發布和分享網站

點選頁面右上角的「Share」按鈕,點「Publish」就可以公開囉!複製產生的鏈接,你可以將這個連結分享給其他人,或將其嵌入到你的個人簡介或其他平台上。



✨成果發布——我的網站✨

Notion 個人網站



喜歡這篇文章,可以點❤️、分享⤴️、收藏📂


合作請

私訊 Instagram

或寄信至 x.fei.4044@gmail.com

留言
avatar-img
留言分享你的想法!
avatar-img
🛸 Fei 起來的動態館 🛸
90會員
96內容數
嗨~我是 Fei,動態設計師。 會在這裡放一些跟動態製作(Ae)相關的文章,歡迎來看看喔! - 合作信箱|x.fei.4044@gmail.com
你可能也想看
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
在過去兩年中,我持續運用 Notion 進行個人管理,個人管理的模板也逐漸定型,藉此分享個人管理模板的使用心得。
Thumbnail
我發現很多人在使用 Notion 的一個煩惱跟痛點是因為自由度太高, 所以很容易找不到建立的頁面隨著新增功能側邊欄越來越長 其實 Notion 根本可以不用手動整理他呀! 你只需要在每個頁面新增一個快速跨頁面自動目錄
Thumbnail
我發現很多人在使用 Notion 的一個煩惱跟痛點是因為自由度太高, 所以很容易找不到建立的頁面隨著新增功能側邊欄越來越長 其實 Notion 根本可以不用手動整理他呀! 你只需要在每個頁面新增一個快速跨頁面自動目錄
Thumbnail
近日有些夥伴在詢問我要如何使用 Notion 的多工畫面以及分享頁面的相關設置等等,因此今天就來導覽一下 Notion 介面以及我認為有哪些必做的設定調整,當然免不了還有滿滿的快捷鍵教學,請大家一定要看到最後,才不會錯過!
Thumbnail
近日有些夥伴在詢問我要如何使用 Notion 的多工畫面以及分享頁面的相關設置等等,因此今天就來導覽一下 Notion 介面以及我認為有哪些必做的設定調整,當然免不了還有滿滿的快捷鍵教學,請大家一定要看到最後,才不會錯過!
Thumbnail
Notion目前還沒有中文版,加上自由度高,一開始真的不知道要怎麼使用,也很難感受到他到底好用在哪?所以我整理了輕鬆開始的簡單的三步驟,照著這個順序開始,就能少走歪路,順利將Notion應用在工作生活上,變成你的得力助手!
Thumbnail
Notion目前還沒有中文版,加上自由度高,一開始真的不知道要怎麼使用,也很難感受到他到底好用在哪?所以我整理了輕鬆開始的簡單的三步驟,照著這個順序開始,就能少走歪路,順利將Notion應用在工作生活上,變成你的得力助手!
Thumbnail
在前一篇「教你如何用ChatGPT來製作Notion Quotes」中,我們學到了如何運用ChatGPT創建個人語錄庫,以豐富Notion數位空間。今天,我們與大家分享已完成的Notion Quotes模板,可供免費下載,輕鬆建立屬於自己的個人語錄庫,為Notion空間增添更多層次與深度。
Thumbnail
在前一篇「教你如何用ChatGPT來製作Notion Quotes」中,我們學到了如何運用ChatGPT創建個人語錄庫,以豐富Notion數位空間。今天,我們與大家分享已完成的Notion Quotes模板,可供免費下載,輕鬆建立屬於自己的個人語錄庫,為Notion空間增添更多層次與深度。
Thumbnail
Notion 是一個高度自由的筆記式平台,讓你可以根據自己的需求定製各種功能。在今天的教學中,我將向你介紹如何透過 WidgetStore 將 Notion 帶入一個全新的層次,並推薦三種在其他外掛中需要付費版才能使用的功能,以便你在學習和工作中發揮更大的效益。讓我們看下去!
Thumbnail
Notion 是一個高度自由的筆記式平台,讓你可以根據自己的需求定製各種功能。在今天的教學中,我將向你介紹如何透過 WidgetStore 將 Notion 帶入一個全新的層次,並推薦三種在其他外掛中需要付費版才能使用的功能,以便你在學習和工作中發揮更大的效益。讓我們看下去!
Thumbnail
Notion 是一個功能強大的 all-in-one 工具,讓我們能更有效地整理及安排事務。在設計頁面時,繼先前分享過的 Indify、Apption、WidgetBox、Kiaro,以及 Shorouk's Blog,本篇要來推薦另一個美化 Notion 的外掛工具 — Notionplus。
Thumbnail
Notion 是一個功能強大的 all-in-one 工具,讓我們能更有效地整理及安排事務。在設計頁面時,繼先前分享過的 Indify、Apption、WidgetBox、Kiaro,以及 Shorouk's Blog,本篇要來推薦另一個美化 Notion 的外掛工具 — Notionplus。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News