
現在架站的難度與五年、十年前已不可同日而語,除了虛擬主機價格幾乎貼近成本,也有不少免費架站服務可以選擇,例如 Jimdo、Onepager 或我個人推薦的 Strikingly 都讓架站變得更簡單。不過這些架站服務其實都大同小異,而且受限於它本身提供的版面設計及功能,好處是使用者即使沒有具備技術背景,也能在瀏覽器中利用拖曳、編輯方式產生網站,無須額外下載或安裝軟體跨平台特性非常方便。
本文要介紹的 Upsite 是一款免費架站服務,相較之下,它採用「櫥窗式」版面設計更具吸引力,很難想像嗎?你可以把一個網頁切割成九宮格(或六宮格、十二宮格),依照需求在每個方塊填入不同內容。Upsite 支援一般文字、鏈結、圖片、影片、音訊、地圖和填色區塊,拖曳即可調整排列方式。
Upsite 的櫥窗式設計有不少好處,例如能輕鬆符合各式網頁需求,無論是個人簡介、商品宣傳、作品展示,或者收錄自己喜愛的影片、音樂等等。本身亦有相容於行動裝置或小螢幕的特性(採用 RWD,回應式網頁設計),因此很適合各種網站使用。
網站名稱:Upsite
網站鏈結:https://www.upsite.io/
使用教學
STEP 1
近期 Upsite 開始支援 Markdown 語法。大家都知道 Markdown 是輕量標記語言,只要利用語法即可快速插入圖片、影片、音樂、地圖或任何東西,不過 Upsite 也是非常容易上手的架站平台,如果你不懂 Markdown 也不影響使用喔!接著我會示範如何在這個平台上註冊、建立你的個人網站。

STEP 2
開啟 Upsite 網站後,點選右上角的「Get started」開始,接著設定你的網站名稱(或輸入公司名稱),這會成為你的網址開頭,以及你的 Email 和密碼,勾選同意使用條款即可立即建立 Upsite 網站。

STEP 3
註冊後登入帳戶,點選右上角的「Get started」綠色 + 按鈕開始新增項目,第二個選項是設定功能,稍後我會再簡單介紹。

前面有提到,Upsite 將每個網頁分隔成一塊塊區塊,你可以想像成積木,而網站就是由不同種類的積木拼湊而成,在 Upsite 可以加入純文字欄位、圖片、影片、音訊、地圖及填充色塊一共六種類型。

STEP 4
下圖是我新增文字區塊的效果,其實就是一個簡單的所見即所得編輯器,能為文字加入粗體、斜體、超鏈結、引言及項目符號等功能。

插入圖片時,可直接選擇圖片上傳,或貼上圖片網址。

STEP 5
下圖就是我以 Upsite 加入文字區塊、圖片、Google Maps、YouTube 及填充色塊產生的效果,將滑鼠游標移動到區塊上方就能編輯、刪除或拖曳調整位置。

STEP 6
前面提到 Upsite 還有設定選項,其實就藏在右上角的設定按鈕中,預設情況下免費帳戶只能建立一個網站、12 個區塊上限,如果要建立更多網站,我會建議註冊其他帳戶或付費升級(每月 5 英鎊)。
另外,在「Site」功能中可以設定網站標題、描述及主顏色等選項;如果你想開啟實驗中的 Markdown 語法標記功能,可以在「Experiments」找到。

Upsite 其實還蠻多功能正在規劃及開發中,從 Roadmap 裡可以找到它的開發期程,比較多人可能會關心 Upsite 可否綁定自己的網域名稱呢?未來將會支援,不過只有 PRO 付費會員能夠使用(但如果你不在意,直接將網址以 Redirect 重新導向到 Upsite 也有類似效果)。

有興趣的朋友也可參考我建立的範例網站:https://free.upsite.io/ ,或者從 Upsite 首頁也能找到其他網站。