方格精選

不用寫程式,用 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

或寄信至 [email protected]

嗨~我是 Fei,動態設計師。 會在這裡放一些跟動態製作(Ae)相關的文章,歡迎來看看喔! - 合作信箱|[email protected]
留言0
查看全部
發表第一個留言支持創作者!
【Premiere 教學】製作綜藝字卡 這篇文章介紹了使用 Premiere 製作文字卡的方法,包括文字的層次調整、修飾圖樣的跟隨文字進行增減、位移、遮罩效果的製作。最後還教你如何將字卡存成模板並使用。
【距離母親節還有 2 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片04] 暴怒型媽媽
【距離母親節還有 3 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片03] 暴怒型媽媽
【距離母親節還有 4 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片03] 控制型媽媽
【距離母親節還有 5 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片02] 放養型媽媽
【距離母親節還有 6 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片02] 朋友型媽媽
【Premiere 教學】製作綜藝字卡 這篇文章介紹了使用 Premiere 製作文字卡的方法,包括文字的層次調整、修飾圖樣的跟隨文字進行增減、位移、遮罩效果的製作。最後還教你如何將字卡存成模板並使用。
【距離母親節還有 2 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片04] 暴怒型媽媽
【距離母親節還有 3 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片03] 暴怒型媽媽
【距離母親節還有 4 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片03] 控制型媽媽
【距離母親節還有 5 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片02] 放養型媽媽
【距離母親節還有 6 天】 母親節特輯《Oh my Mommy》:連續 7 天,每天公布 1 位 Mommy,快來 Pick 你家媽媽吧! [卡片02] 朋友型媽媽
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
「作文」是現在小學生普遍的罩門。很多小學生沒辦法順暢地寫出一篇完整的文章。
其實幼兒園根本就不用急著寫作業 真正決定學科勝負的時機真的不在幼兒園也不在國小 真正決勝負的時機是在國中高中和大學 在幼兒園和國小要做的是要保持學習的興趣 養成自主學習的習慣 千萬不要讓孩子厭惡學習 幼兒園國小逼太緊 寫太多作業 超討厭學習 造成的結果就是國高中的時候根本不讀 有
Thumbnail
在我設計的六人小班線上課程,由於人數少,每學期會進行一到兩次「純聊天」的寫作課。當然,純聊天不是隨便亂聊,而是有方向、有主題、有步驟的,在對談中,同步引導孩子回憶與思考。
Thumbnail
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。 Notion 網站架設準備工作 將 Notion Page 轉為一頁式網頁
Thumbnail
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
Thumbnail
這本《高產出的本事》就是本教你有效率地產出優質內容的好書。如果你常煩腦無法清楚向他人傳達自己的概念,或開會報告總被老闆嫌沒邏輯、沒說服力,那這本書會非常適合你;如果你是內容創作者,有經營部落格或粉專,那本書更是值得細品。
Thumbnail
圖1 Google 試算表畫樂活五線譜 前言 這期是Google 試算表之不用寫程式系列,很多朋友看到要寫程式頭就很痛,當然VBA寫程式系列還是會有文章跟範例,適合進階學習的朋友參考。 網路上有很多朋友很想取得樂活五線譜的EXCEL程式,我甚至也用VBA做了一套,還含回測系統,不過這個對於新手投資
Thumbnail
其實這些事我是先做的,因為靜坐、正念和冥想是近期做比較多的,就在前一篇先寫。   壹.書寫—可以   1.抒發情緒:我發現,以書寫抒發情緒的效果比用說的好好幾倍。有的人碰到朋友,或是在任何場合碰到可以講話的機會,就會將最近的、在意的事情講一遍,講了許多遍之後,或許對那件事的情緒會比較淡了,如果用寫的
Thumbnail
目的:研究各種UI元件 segmented control: 可設定選項讓使用者做選擇,其中幾項可以注意: Segments: 可設定要幾種選擇欄位。 Segment:可選擇哪一個欄位的內容要做更動,包括標題,圖片等等。 Title: 可輸入更改欄位的文字內容。 Image:可設定欄位的圖
Thumbnail
現在有越來越多商家,開始重視透過各類型的數位行銷方式,讓客戶能在搜尋時找到自己,有些預算的店家,也會小額投放廣告,觸及更多潛在顧客。當然數位化經營固然重要,但有別於網拍商家,美容美髮、健身課程或旅遊導覽等經營業者,往往忽略了「讓客戶完成線上消費」的最後一哩路! 舉例來說,實體店家蒐集客戶名單的方式,
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
「作文」是現在小學生普遍的罩門。很多小學生沒辦法順暢地寫出一篇完整的文章。
其實幼兒園根本就不用急著寫作業 真正決定學科勝負的時機真的不在幼兒園也不在國小 真正決勝負的時機是在國中高中和大學 在幼兒園和國小要做的是要保持學習的興趣 養成自主學習的習慣 千萬不要讓孩子厭惡學習 幼兒園國小逼太緊 寫太多作業 超討厭學習 造成的結果就是國高中的時候根本不讀 有
Thumbnail
在我設計的六人小班線上課程,由於人數少,每學期會進行一到兩次「純聊天」的寫作課。當然,純聊天不是隨便亂聊,而是有方向、有主題、有步驟的,在對談中,同步引導孩子回憶與思考。
Thumbnail
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。 Notion 網站架設準備工作 將 Notion Page 轉為一頁式網頁
Thumbnail
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
Thumbnail
這本《高產出的本事》就是本教你有效率地產出優質內容的好書。如果你常煩腦無法清楚向他人傳達自己的概念,或開會報告總被老闆嫌沒邏輯、沒說服力,那這本書會非常適合你;如果你是內容創作者,有經營部落格或粉專,那本書更是值得細品。
Thumbnail
圖1 Google 試算表畫樂活五線譜 前言 這期是Google 試算表之不用寫程式系列,很多朋友看到要寫程式頭就很痛,當然VBA寫程式系列還是會有文章跟範例,適合進階學習的朋友參考。 網路上有很多朋友很想取得樂活五線譜的EXCEL程式,我甚至也用VBA做了一套,還含回測系統,不過這個對於新手投資
Thumbnail
其實這些事我是先做的,因為靜坐、正念和冥想是近期做比較多的,就在前一篇先寫。   壹.書寫—可以   1.抒發情緒:我發現,以書寫抒發情緒的效果比用說的好好幾倍。有的人碰到朋友,或是在任何場合碰到可以講話的機會,就會將最近的、在意的事情講一遍,講了許多遍之後,或許對那件事的情緒會比較淡了,如果用寫的
Thumbnail
目的:研究各種UI元件 segmented control: 可設定選項讓使用者做選擇,其中幾項可以注意: Segments: 可設定要幾種選擇欄位。 Segment:可選擇哪一個欄位的內容要做更動,包括標題,圖片等等。 Title: 可輸入更改欄位的文字內容。 Image:可設定欄位的圖
Thumbnail
現在有越來越多商家,開始重視透過各類型的數位行銷方式,讓客戶能在搜尋時找到自己,有些預算的店家,也會小額投放廣告,觸及更多潛在顧客。當然數位化經營固然重要,但有別於網拍商家,美容美髮、健身課程或旅遊導覽等經營業者,往往忽略了「讓客戶完成線上消費」的最後一哩路! 舉例來說,實體店家蒐集客戶名單的方式,