在這個由演算法主導的社群媒體時代,你是否也曾懷念那個可以自由客製化、充滿個性的早期網路?本文將分享我如何從零基礎到獨立建置一個完整個人網站的真實經歷,以及這段旅程帶給我的收穫與思考。
如今的社群平台已經變了調:
更關鍵的是,你在這些平台上創作的內容並不真正屬於你。演算法決定誰能看到你的作品,平台規則隨時可能改變。
半年前,我偶然看到一個關於「獨立網路(Indie Web)」的影片。這才發現,原來有一整個社群的人都在用自己的方式打造個人網站——不依賴大平台,完全掌控自己的數位空間。
這讓我想起童年時瀏覽那些充滿創意的個人部落格:每個站點都有獨特設計,站長們分享著自己真正熱愛的心內容。那種純粹的創作自由深深吸引了我。
雖然我之前學過 HTML 和 CSS,但一年多沒碰程式碼,幾乎忘得一乾二淨。剛開始時:
最大的挑戰:如何讓網站看起來不像「新手練習作業」?
我決定回歸經典——模仿 2000 年代早期那種色彩鮮豔、元素豐富的個人首頁風格。我使用了:
當網站基本成型後,新的問題出現了:越看越不滿意。
瀏覽其他優秀的個人網站時,我總覺得自己的作品像是「嬰兒塗鴉」。特別是看到那些應用了 CRT 顯示器效果的酷炫網站,我開始懷疑自己的設計。
這時候有兩個選擇:
我選擇了後者,並做出一個大膽決定——加入主題切換功能。
為了實現雙主題切換(亮色 + 暗色復古 CRT 風格),我必須重新學習 JavaScript。
最初的實現方式非常笨拙:
後來我發現可以用元件化思維解決:
這個過程讓我想起學 React 時的愉悅感——當你找到更優雅的解決方案時,那種成就感無可取代。
亮色主題採用粉色系,乾淨整潔且充滿活力;暗色主題則模擬老式 CRT 顯示器效果,星空背景配合掃描線濾鏡,營造出賽博復古氛圍。
切換按鈕設計了懸停預覽效果——滑鼠經過時能隱約看到另一主題的樣子,這個小細節我特別滿意。
部落格部分是我最驕傲的作品。使用 98.css 框架,完整還原了 Windows 98 桌面環境:
所有視窗邏輯都是我用原生 JavaScript 編寫的。當你點擊最小化按鈕,視窗真的會縮到任務列;點擊關閉,圖示會消失但可以從桌面重新開啟。
除了視覺效果,我還加入了多項實用功能:
這些功能讓網站不再是靜態展示,而是一個有生命力的互動空間。
最初我選擇 NeoCities 託管網站——它是最知名的 Indie Web 平台。但後來發現幾個問題:
NecoWeb 雖然較新、社群較小,但優點明顯:
對於注重內容所有權和創作自由的創作者來說,NecoWeb 是更好的選擇。如果你擔心作品被 AI 無償使用,這一點尤其重要。
💡 MasLogin 提示:如果你需要安全管理多個網站帳號(例如同時運行多個獨立網站),可以使用 MasLogin 反偵測瀏覽器。它能為每個帳號建立獨立的瀏覽器環境,避免平台偵測到關聯,保護你的多帳號營運安全。
雖然個人網站主要面向桌面瀏覽,但我還是做了基礎的響應式設計,確保手機使用者也能正常瀏覽內容。
為了方便後續維護,我將側邊欄、頁首、頁尾等重複元素改造成可重複使用的元件。現在修改一處,全站同步更新——大大提升了效率。
回顧早期程式碼,我發現許多冗餘和不規範的寫法。雖然功能正常,但作為學習專案,我決定逐步重構這些「技術債」。
重要的是:不要因為程式碼不完美就放棄發布。先讓作品上線,再慢慢打磨——這才是真實的創作過程。
本以為這個專案會讓我對程式設計感到厭倦,結果恰恰相反。解決實際問題、看到成果立即呈現的過程,比任何教學都更能激發學習熱情。
我甚至開始學習 Python,純粹是因為享受程式設計的樂趣。
在 AI 工具泛濫的今天,人類創作者最大的優勢不是完美,而是真實與獨特。我的網站程式碼混亂嗎?是的。設計專業嗎?不算。但它是100% 我自己做的,帶著我的審美、想法和學習軌跡。
這種不完美,恰恰是最珍貴的價值。
在自己的網站上,你不需要擔心:
這種完全掌控感,是任何社群平台都無法給予的。
推薦資源:
獨立網路社群非常友善,大家樂於分享經驗和資源。瀏覽其他人的網站,不僅能獲得靈感,還能透過「檢視原始碼」學習技巧。
建站是馬拉松,不是衝刺。我的網站從開始到基本成型,花了數個月時間。期間經歷無數次想放棄的時刻,但每次突破一個技術難題,都會重新燃起動力。
這個專案提醒我,網路本該是人類表達的樂園,而非數據收割的農場。當我們把創作主動權交還給自己,會發現那些「不完美」的作品,反而最能打動人心。
如果你也厭倦了社群媒體的演算法推薦,不妨試試建置自己的小角落。程式碼不會?沒關係,現在有大把教學和工具幫你入門。重要的是開始行動,在這個過程中學習、成長、享受創作的快樂。
歡迎瀏覽我的網站(連結見留言區),在留言板留下你的足跡。也期待有一天,能在 Indie Web 的某個角落遇見你的作品。
可以!雖然有一定學習曲線,但 HTML/CSS 是最容易入門的程式語言。網路上有大量免費教學,像 FreeCodeCamp 提供系統化課程。即使每天只學 30 分鐘,一個月內就能掌握基礎。
NeoCities 社群更大、資源更多,適合想快速上手並獲得回饋的新手。NecoWeb 更注重隱私保護和功能自由度,適合有一定基礎且重視內容所有權的使用者。兩者都提供免費方案,可以先嘗試 NeoCities,熟悉後再考慮遷移。
基礎版完全免費:NeoCities/NecoWeb 提供免費託管,無需購買網域名稱和伺服器。如果想要自訂網域名稱(如 yourname.com),每年約 10-15 美元。付費會員功能(如更大儲存空間)通常每月 5 美元左右。
可以採取以下措施:
robots.txt 文件中禁止爬蟲存取雖然無法 100% 阻止,但能大幅降低被抓取的風險。
大綱