2026年Vibe Coding製作網頁心得(3)|免費架站平台使用心得

更新 發佈閱讀 4 分鐘

前言

通常網頁上架會需要網域跟主機,但除非真的有長久需求,不然根本不會刻意去訂這些東西,但如果只是想測試或簡單展示的人只能花錢去訂一整年的網域跟主機了嗎?

不不不,還是有很多可以免費的手段,而且很多。

現在有許多平台可以免費提供子網域跟共用主機,其代價呢,可能是有大量廣告、收費升級又或是有各種限制等等。

類似的平台說實話確實非常多,所以這篇我會針對我最近在用的平台來分享心得,剩下的可能之後去摸索後有機會再分享。

如果你是對這方面一無所知或是想看看有沒有新平台可看的話,歡迎看下去。

CANVA

首先打頭陣的是很笨的CANVA。

笨歸笨,但它最方便的點是自帶上架功能,且能夠自定義網址名稱,讓你的網址可以更有辨識度。

而且CANVA本身算是相對穩定的平台,不用太擔心隨時都會倒掉並有一定的資安防護,而且發布的網頁都有HTTPS / SSL 憑證,讓做出來的網頁安全性跟穩定性相對高上許多。

vocus|新世代的創作平台

以下是我用這套上架的作品:

自我介紹|這邊是嘗試將創作的世界連結起來的世界連結處
世界連結處2025年度回顧
延伸閱讀:2026年Vibe Coding製作網頁心得(2)|CANVA你這個大笨蛋!!!

WordPress.com

WordPress本身就是讓不會code的人建造網站的地方,現在隨著AI的興起,wordpress依舊也是不錯的載體,只要讓AI產出HTML跟CSS也是可以直接貼近頁面上架上去。

WordPress.com是一個「雲端託管版的 WordPress 網站服務」,由 Automattic 提供,使用者不需要自己租主機或安裝系統,就能直接建立網站、部落格或簡易商店。

但是免費方案限制挺大的,大部分功能是備受限制的,如果只是想玩玩基礎排版跟HTML依舊能夠使用,在安全性和穩定性的部分是比CANVA還來的穩定與安全,是個不錯的入門選擇。

vocus|新世代的創作平台

Infinityfree

如果WordPress.com限制太多,可以來試試看Infinityfree。

Infinityfree也是一個線上的網頁建置平台,雖然預設不支援中文,但它的網頁建置工具還有外掛千變萬化,除了預設的之外也支援其他的建置系統,WordPress也不例外,WordPress介面就可以設定成中文了。

而它的WordPress更偏向是WordPress.org,也就是毫無限制的開源版本,外掛、佈景自由使用,唯一的限制是受限於主機的大小,頁面無法建置太多,這部分需要透過付費升級。

它也是提供免費子網域和共享主機,子網域可以自定義,不過網域類型很多樣化,在台灣這邊可能信任度看起來略低,但有宣傳網頁都有都有HTTPS / SSL 憑證。

目前我使用狀況是:一個人可以創三個網站,一個網站在免費版本可以創立約五個頁面。

Infinityfree網站連結

vocus|新世代的創作平台
vocus|新世代的創作平台

以下是我用這套上架的作品:

外獸之地前傳-裂變之日 單人TRPG正式發布!
網頁二創-勃物館精魂液官方網站

結論

從上面可以知道我目前主要使用工具是CANVA跟WordPress,因為我自己還是偏好WordPress的系統設置,未來要做大後我也會比較好操作,而CANVA就是方便而已。

如果你有很順手的上架方式歡迎分享上來,我也想多接觸其他的方法,最後再寫成心得分享給大家,如果有問題也能在底下發問~

留言
avatar-img
世界連結處
19會員
61內容數
這裡是世界連結處,版面主要以創作相關話題為主,本身創作經驗有小說、對戲群,喜歡我的小說或想看更多創作雜談歡迎追蹤按愛心~
世界連結處的其他內容
2026/04/11
其實當時在搞時還沒有Vibe Coding的概念,一開始就是看到CANVA AI後"好酷喔,可以寫網頁跟程式!"的想法跑去玩玩,好玩是好玩,但同時血壓也升高不少,推薦低血壓的朋朋過來嘗試看看。 嚴格來說,在AI之前CANVA本身就是能做網頁的,基礎原理就像是用做簡報的方式排列製作,雖然可以...
Thumbnail
2026/04/11
其實當時在搞時還沒有Vibe Coding的概念,一開始就是看到CANVA AI後"好酷喔,可以寫網頁跟程式!"的想法跑去玩玩,好玩是好玩,但同時血壓也升高不少,推薦低血壓的朋朋過來嘗試看看。 嚴格來說,在AI之前CANVA本身就是能做網頁的,基礎原理就像是用做簡報的方式排列製作,雖然可以...
Thumbnail
2026/04/08
最近vibe coding的潮流相當盛行,許多大老已經做出各種有趣的程式、APP或是網頁,而我呢,還在初階的地方默默耕耘、慢慢摸索一些有的沒的。 這陣子發現有許多人vibe coding卻時常忽略資安、後續維護等問題,害我更加得小心翼翼研究相關規範,例如最近剛做好成人向二創網頁,發現沒做......
Thumbnail
2026/04/08
最近vibe coding的潮流相當盛行,許多大老已經做出各種有趣的程式、APP或是網頁,而我呢,還在初階的地方默默耕耘、慢慢摸索一些有的沒的。 這陣子發現有許多人vibe coding卻時常忽略資安、後續維護等問題,害我更加得小心翼翼研究相關規範,例如最近剛做好成人向二創網頁,發現沒做......
Thumbnail
2026/03/31
因為是第一次做,所以選用最基礎的方式來嘗試效果,那首先選用的就是兩大主流的GPT跟Gemini,這樣選的原因是主流AI相對其他平台相對穩定且多人使用,至少不怕突然被關站,分享方式也都只要依靠複製連結的形式快速傳播,對我來說在推廣上會方便許多。
Thumbnail
2026/03/31
因為是第一次做,所以選用最基礎的方式來嘗試效果,那首先選用的就是兩大主流的GPT跟Gemini,這樣選的原因是主流AI相對其他平台相對穩定且多人使用,至少不怕突然被關站,分享方式也都只要依靠複製連結的形式快速傳播,對我來說在推廣上會方便許多。
Thumbnail
看更多
你可能也想看
Thumbnail
在資源有限的創業初期,選擇PWA開發APP,以達到快速開發、立即上線、SEO優化和快速市場驗證。本文詳細比較原生App、React Native、Flutter和PWA的優缺點,說明為何PWA最符合快速驗證市場需求的條件。
Thumbnail
在資源有限的創業初期,選擇PWA開發APP,以達到快速開發、立即上線、SEO優化和快速市場驗證。本文詳細比較原生App、React Native、Flutter和PWA的優缺點,說明為何PWA最符合快速驗證市場需求的條件。
Thumbnail
即使沒有程式基礎,也能免費生成網頁。詳細介紹了操作步驟,包括利用Canvas 模式快速生成、調整局部細節,以及 如何在 Google AI Studio 中創建網頁。此外,文中強調了 API 金鑰的安全使用、免費額度限制,並提供了將生成的網頁部署到 Cloudflare Pages 的建議。
Thumbnail
即使沒有程式基礎,也能免費生成網頁。詳細介紹了操作步驟,包括利用Canvas 模式快速生成、調整局部細節,以及 如何在 Google AI Studio 中創建網頁。此外,文中強調了 API 金鑰的安全使用、免費額度限制,並提供了將生成的網頁部署到 Cloudflare Pages 的建議。
Thumbnail
這篇文章分享了作者使用GPT-5開發塔防遊戲的經驗,從一句話生成遊戲到逐步優化畫面、加入裝備系統,以及過程中遇到的錯誤和解決方法。作者強調AI開發的迭代過程和關鍵字的重要性,並分享了應對AI理解偏差和重複錯誤的技巧。文章也提及了AI在遊戲開發中的優缺點,以及如何更好地利用AI進行遊戲原型設計。
Thumbnail
這篇文章分享了作者使用GPT-5開發塔防遊戲的經驗,從一句話生成遊戲到逐步優化畫面、加入裝備系統,以及過程中遇到的錯誤和解決方法。作者強調AI開發的迭代過程和關鍵字的重要性,並分享了應對AI理解偏差和重複錯誤的技巧。文章也提及了AI在遊戲開發中的優缺點,以及如何更好地利用AI進行遊戲原型設計。
Thumbnail
分享透過 VS Code、Git、Zeabur 及 Google Gemini PRO,整合中央氣象署開放資料平臺 API,建置響應式網頁應用 (RWD) 的過程。從前後端程式碼部署、AI 提詞優化到成果展示,提供 Vibe Coding 的實作經驗與 SEO 相關建議,強調事前規劃明確溝通的重要。
Thumbnail
分享透過 VS Code、Git、Zeabur 及 Google Gemini PRO,整合中央氣象署開放資料平臺 API,建置響應式網頁應用 (RWD) 的過程。從前後端程式碼部署、AI 提詞優化到成果展示,提供 Vibe Coding 的實作經驗與 SEO 相關建議,強調事前規劃明確溝通的重要。
Thumbnail
首頁是使用者的第一印象,對沒有行銷預算、只能靠自然流量的產品來說更是關鍵。完成登入系統後,我用 Claude CLI 讓 AI 先生成一個首頁版本。雖然結果看起來很有 AI 感,但至少功能齊全,能當作基礎框架。重點不是設計多精美,而是先把系統跑起來,之後再優化。先求有,再求好,這才是 MVP 精神。
Thumbnail
首頁是使用者的第一印象,對沒有行銷預算、只能靠自然流量的產品來說更是關鍵。完成登入系統後,我用 Claude CLI 讓 AI 先生成一個首頁版本。雖然結果看起來很有 AI 感,但至少功能齊全,能當作基礎框架。重點不是設計多精美,而是先把系統跑起來,之後再優化。先求有,再求好,這才是 MVP 精神。
Thumbnail
AI 可以來幫我們寫文章、寫程式、產生圖片、產生影片……當然也可以幫忙設計網頁,所以這篇我要和大家分享如何用 Google Gemini 來幫我們設計、寫出漂亮的網頁。(以後開發前端靠 AI 就好了)🤣 雖然很多架站器也號稱他們有 AI 架站功能,但是那些大部分都是要月租費用的(可能還有主機費用
Thumbnail
AI 可以來幫我們寫文章、寫程式、產生圖片、產生影片……當然也可以幫忙設計網頁,所以這篇我要和大家分享如何用 Google Gemini 來幫我們設計、寫出漂亮的網頁。(以後開發前端靠 AI 就好了)🤣 雖然很多架站器也號稱他們有 AI 架站功能,但是那些大部分都是要月租費用的(可能還有主機費用
Thumbnail
分享產品 Landing Page 改版實作經驗。運用Vibe Coding工具,快速迭代 38版,從訊息重塑到技術 SEO 優化的重點。
Thumbnail
分享產品 Landing Page 改版實作經驗。運用Vibe Coding工具,快速迭代 38版,從訊息重塑到技術 SEO 優化的重點。
Thumbnail
WebSim.AI 是一款創新的 AI 工具平臺,讓使用者只需輸入文字或網址,就能在瀏覽器中生成互動式網站、遊戲或虛擬空間。無需程式背景,即可快速建立產品示意頁、互動展示模擬,適合創意發想和原型設計。支援 Claude Sonnet 3.5、GPT-4 等模型。
Thumbnail
WebSim.AI 是一款創新的 AI 工具平臺,讓使用者只需輸入文字或網址,就能在瀏覽器中生成互動式網站、遊戲或虛擬空間。無需程式背景,即可快速建立產品示意頁、互動展示模擬,適合創意發想和原型設計。支援 Claude Sonnet 3.5、GPT-4 等模型。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News