不用寫程式都能架設網站:學習 Notion 和 Super 建立一頁式個人網站

閱讀時間約 8 分鐘
不懂寫程式該如何架設網站?在上一篇文章介紹了多款 No Code 架設網站的工具,我想你已對架站的 No Code 工具有一定了解。如果你還未曾試過建立網站,今天就試試由零開始利用 Notion 架設一個簡單的個人網站。
Notion 是近年一個非常受歡迎的雲端筆記服務,2016年創辦於美國舊金山,目前全球用戶已超過3000萬。由於設計操作靈活,不僅可以用來做筆記,更是一個多功能的線上資料庫和項目管理工具。以我自己為例,以往是使用 Trello 做工作進度管理,現在就直接使用 Notion ,利用專案模板就做到和 Trello 差不多的功能。
使用 Notion 另一個好處就是隨時可以將 Notion 的文章自動轉換為網頁分享出去,再配合前文介紹的 Super 架站工具,沒有任何程式開發經驗的初學者都能輕鬆建立自己的個人網站。

Notion 網站架設準備工作

若果你還未成為 Notion 用戶,請先上 Notion 網站註冊成為免費用戶。Notion 支援多平台(Mac、Windows、iOS 和 Android),除了可以使用 Web 版本,也可以安裝所屬平台的軟體作離線使用。
Notion Mac and Windows Download
Notion 功能非常強大,日後有機會再詳細一一介紹它的多種功能。今天我們就先集中在網頁製作的使用方法。進入 Notion 後,就可以開始寫文章。製作網頁之前,我們需要建立一頁文件作示範用途。按側邊欄的「Add a page」或左下角的「New page」以建立新一頁文件。
Notion - New Page
你可以點選「Empty」由一個空白文本開始編寫文章,也可以從 Notion 提供的模板(Templates)選擇一個適合的。例如:我想以一個部落格文章作為演示,就直接用 Personal 類別內的「Blog Post」模板。
Notion templates
點選「Use this template」之後,Notion 自動建立一個 Blog Post 文件。你可以隨便更改文件內容,中文英文也可以。Notion 是以 Page 為基本容器,編寫文件就是等於製作網頁。需要加入圖片的話,輸入 「/image」就可以。
Notion 加入圖片

將 Notion Page 轉為一頁式網頁

當一切準備就緒,現在就可以把它轉換為網頁。這個程序超級簡單,在右上角的選項,按「Share」,然後啟用「Share to web」功能。Notion 即時生成一條獨一無二的網頁地址,讓你分享給其他人。你可以跟據自己的要求,啟動所需選項。如不想其他人更改網頁內容,建議停用首三個選項。Search engine indexing 的選項可以讓 Google 等搜尋器找到你的網頁增加流量,但需要升級至付費計劃才可使用。
Notion - Share web link
完成了!這麼簡單就發佈了一個網頁。按「Copy web link」,將網址貼到 Safari(或其他瀏覽器)試試看。

Super 第三方服務讓你建立更完善的網站

Notion 內置的網頁建立功能讓我們隨時分享網頁,可惜還有不少需要改善的地方。舉例:網頁頂必須顯示一條由 Notion 生成的搜索欄。另外,網頁地址非常長(例如:https://outrageous-booth-e29.notion.site/14d6f5a1a4fa49f796128d72b07e35f7 ),但這個筆記軟體還未提供自訂網址服務。
畢竟 Notion 的定位不是重點在網站服務,所以預期在短期之內都不會提供自訂網址功能。若果想使用自己註冊的網址,哪可以怎樣做呢?近年因為 Notion 爆紅,不少第三方Notion網站服務商應運而生,之前介紹的 Super 網站就是其中之一。Super是專門為 Notion 而設計的網頁服務,只要將 Notion 文章的 Web link 貼至 Super ,它就會讀取文章並自動轉為網站,還能讓你更改網頁設計。如果需要使用自訂網址功能,就必須付費,每月12 美元。
Super 主要功用是讓 Notion Page 變得更像一個網站,透過管理介面可以重新設訂 Notion 網頁字體、顏色等。你亦可以加入導航選單、頁底選單、自訂網頁標題等。這裡介紹的是 No Code 工具,但如果你懂得編寫 CSS 或 Javascript,透過 Custom Code 選項就能夠加入自訂的程式碼。

如何將 Notion Page 加入至 Super

假設你已註冊了 Super.so 的免費戶口,就可以開始設計網站。我們會使用之前建立的 Notion Page並加至Super。登入 Super 後,就會見到以下的畫面。按「New site」以建立一個新網站。
Notion Super - New Website
Super 需要你提供兩個資訊:網站名稱和 Notion Page的網址。網站名稱可以隨自己喜好輸入,而Notion Page的網址就是之前分享的那條網址(例如:https://outrageous-booth-e29.notion.site/14d6f5a1a4fa49f796128d72b07e35f7 )。完成後,按「Create」跳至管理介面。

更改子域名

Super 會自動讀取 Notion Page 的內容生成網頁,而之前提供的網站名稱會變成 super.site 的子域名。比方說,我使用 KickUpMeow 作為網站名稱,我的網站地址就是 kickupmeow.super.site。不喜歡的話,選擇「Domain」可以更改至其他名稱。
付費計劃還可讓你使用自己已登記的網站名稱,按「Add a custom domain」就可以。但就算是免費版,現在這個名稱( kickupmeow.super.site)已比 Notion 生成的易讀易記多了。

自訂網頁設計

除了自訂網址,你可以更改網頁的設計。按「Navbar」,選擇「Simple」的 Navbar Type。這樣就能夠更改導航欄(Navigation Bar)的標題。在「Style」部分,你亦可以更改導航欄的底色、大小和字體顏色。在導航欄加入其他連結也不難,只要在「Links」部分添加想要的連結就可以。完成更改後,記緊點按「Save」儲存更改。
Notion Super - navigation bar
在主選單點選「Design 」,你可以更改整個網頁的顏色主題。Super 內置多個預設顏色主題給選擇,以下就選用了 Neutral。當然你亦可以按「Create a new theme」自訂適合的顏色。
Footer 選項可以讓你建立頁底選單,以下圖片是選用了「Stack」的 Footer Type。要加入社交平台的連結,只要在「Socials」部分提供 Facebook、Instagram 等戶口連結就可以。
Notion Super - Footer Configuration
好了!現在可以看看製成品。將 kickupmeow.super.site 貼至瀏覽器試一試,我想你應該覺得比之前的版本更像一個網站。
Notion Super Website

總結

透過 Notion 的網頁分享功能,現在你已經學會如何建立簡單的一頁式網站。再結合 Super的網站設計服務,也可以自訂網址和網頁顏色主題,能夠設計出一個專業的個人網站。
如果這是你第一次接觸 Notion,我非常鼓勵你繼續深入研究。這個筆記軟體已經不是用來做筆記這麼簡單,它的功能變得越來越強大,現在還可以建立資料庫。今次只集中介紹一頁型式網站的製作方式,往後會加入多頁設計,還會利用資料庫功能讓Notion變成網站的 CMS(Content Management System)。
若果你喜歡此文章,請幫忙分享。最後,希望你能留下電郵訂閱我們的電子報,讓我們可以為你定時送上最新文章和資訊。
avatar-img
5會員
4內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Simon Ng的沙龍 的其他內容
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
在開發網站之前,有一項任務比開發網站還要困難,就是要選定一個你自己喜歡而有可以被註冊的網域名稱(Domain Name)。這篇文章分享一些選擇網域名稱的小貼士和幾個非常有用的工具,助你更快找到自己合適的網域名稱,踏出網上創業的一小步。
由副業變全職,踏入一人公司創業第 9 年,一直專注在 iOS App 程式教學,以銷售相關的網上課程和電子書為主業。經過這幾年創業的經驗和對內容行銷的觀察,想和大家分享有關內容創業的幾項建議,希望更多人可以開展副業。內容創業不需要巨大預算,對於想試試創業又沒有大量資金的新手來說是非常適合的。
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
在開發網站之前,有一項任務比開發網站還要困難,就是要選定一個你自己喜歡而有可以被註冊的網域名稱(Domain Name)。這篇文章分享一些選擇網域名稱的小貼士和幾個非常有用的工具,助你更快找到自己合適的網域名稱,踏出網上創業的一小步。
由副業變全職,踏入一人公司創業第 9 年,一直專注在 iOS App 程式教學,以銷售相關的網上課程和電子書為主業。經過這幾年創業的經驗和對內容行銷的觀察,想和大家分享有關內容創業的幾項建議,希望更多人可以開展副業。內容創業不需要巨大預算,對於想試試創業又沒有大量資金的新手來說是非常適合的。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
日本小說家「三浦紫苑」的《寫小說,不用太規矩》一書,以輕鬆說故事的方式傳達寫小說的重要技巧。本文摘錄了書中的17個重點,包括推敲故事、人稱的使用、標點符號的精確運用等。無論是否閱讀過這本書,都能從中受益良多。
「作文」是現在小學生普遍的罩門。很多小學生沒辦法順暢地寫出一篇完整的文章。
其實幼兒園根本就不用急著寫作業 真正決定學科勝負的時機真的不在幼兒園也不在國小 真正決勝負的時機是在國中高中和大學 在幼兒園和國小要做的是要保持學習的興趣 養成自主學習的習慣 千萬不要讓孩子厭惡學習 幼兒園國小逼太緊 寫太多作業 超討厭學習 造成的結果就是國高中的時候根本不讀 有
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
日本小說家「三浦紫苑」的《寫小說,不用太規矩》一書,以輕鬆說故事的方式傳達寫小說的重要技巧。本文摘錄了書中的17個重點,包括推敲故事、人稱的使用、標點符號的精確運用等。無論是否閱讀過這本書,都能從中受益良多。
「作文」是現在小學生普遍的罩門。很多小學生沒辦法順暢地寫出一篇完整的文章。
其實幼兒園根本就不用急著寫作業 真正決定學科勝負的時機真的不在幼兒園也不在國小 真正決勝負的時機是在國中高中和大學 在幼兒園和國小要做的是要保持學習的興趣 養成自主學習的習慣 千萬不要讓孩子厭惡學習 幼兒園國小逼太緊 寫太多作業 超討厭學習 造成的結果就是國高中的時候根本不讀 有