從零開始打造個人網站：重拾屬於自己的網路空間

為什麼選擇建置個人網站？

社群媒體的困境

如今的社群平台已經變了調：

• Facebook 充斥著 AI 生成的低品質內容
• Twitter 演變成資訊噪音的集散地
• Instagram 完全淪為 TikTok 的翻版
• 所有平台都在瘋狂抓取用戶數據和時間

更關鍵的是，你在這些平台上創作的內容並不真正屬於你。演算法決定誰能看到你的作品，平台規則隨時可能改變。

重新發現 Indie Web

半年前，我偶然看到一個關於「獨立網路（Indie Web）」的影片。這才發現，原來有一整個社群的人都在用自己的方式打造個人網站——不依賴大平台，完全掌控自己的數位空間。

這讓我想起童年時瀏覽那些充滿創意的個人部落格：每個站點都有獨特設計，站長們分享著自己真正熱愛的心內容。那種純粹的創作自由深深吸引了我。

從入門到崩潰：我的建站過程

第一階段：重拾 HTML/CSS

雖然我之前學過 HTML 和 CSS，但一年多沒碰程式碼，幾乎忘得一乾二淨。剛開始時：

• 每個 HTML 標籤都要查文件
• CSS 版面配置經常出現意想不到的錯位
• 甚至完全推翻了第一版網站設計

最大的挑戰：如何讓網站看起來不像「新手練習作業」？

我決定回歸經典——模仿 2000 年代早期那種色彩鮮豔、元素豐富的個人首頁風格。我使用了：

• 復古背景圖案產生器
• 閃爍文字 GIF 製作工具
• 各式小圖示、按鈕和徽章

第二階段：陷入「永不滿意」循環

當網站基本成型後，新的問題出現了：越看越不滿意。

瀏覽其他優秀的個人網站時，我總覺得自己的作品像是「嬰兒塗鴉」。特別是看到那些應用了 CRT 顯示器效果的酷炫網站，我開始懷疑自己的設計。

這時候有兩個選擇：

1. 砍掉重練（但已經投入太多時間）
2. 想辦法優化現有設計

我選擇了後者，並做出一個大膽決定——加入主題切換功能。

第三階段：JavaScript 的逆襲

為了實現雙主題切換（亮色 + 暗色復古 CRT 風格），我必須重新學習 JavaScript。

最初的實現方式非常笨拙：

• 在每個頁面複製兩套完整內容
• 用不同的 CSS 文件控制顯示/隱藏
• 導致程式碼極其冗餘混亂

後來我發現可以用元件化思維解決：

• 只對特定元素（如標題）套用主題類別
• 用 JavaScript 動態切換 CSS 文件
• 大幅減少重複程式碼

這個過程讓我想起學 React 時的愉悅感——當你找到更優雅的解決方案時，那種成就感無可取代。

網站功能與設計亮點

主題：粉色夢幻 vs 復古終端

亮色主題採用粉色系，乾淨整潔且充滿活力；暗色主題則模擬老式 CRT 顯示器效果，星空背景配合掃描線濾鏡，營造出賽博復古氛圍。

切換按鈕設計了懸停預覽效果——滑鼠經過時能隱約看到另一主題的樣子，這個小細節我特別滿意。

部落格區：Windows 98 桌面還原

部落格部分是我最驕傲的作品。使用 98.css 框架，完整還原了 Windows 98 桌面環境：

• 可最小化/關閉的視窗
• 可互動的開始選單
• 能播放音樂的 CD 播放器元件
• 任務列顯示開啟的「應用程式」

所有視窗邏輯都是我用原生 JavaScript 編寫的。當你點擊最小化按鈕，視窗真的會縮到任務列；點擊關閉，圖示會消失但可以從桌面重新開啟。

實用互動元件

除了視覺效果，我還加入了多項實用功能：

• 訪客計數器：記錄網站瀏覽次數
• 狀態更新：即時顯示我在做什麼
• 即時聊天元件：訪客可以留言互動
• 電子寵物（Tamagotchi）：訪客可以餵養養成
• 網頁環連結：發現其他有趣的獨立網站

這些功能讓網站不再是靜態展示，而是一個有生命力的互動空間。

從 NeoCities 到 NecoWeb：選擇合適的託管平台

為什麼遷移？

最初我選擇 NeoCities 託管網站——它是最知名的 Indie Web 平台。但後來發現幾個問題：

• 預設允許 AI 抓取網站內容訓練模型
• 不支援外部腳本，限制了功能擴展
• 付費會員功能性價比不高

NecoWeb 的優勢

NecoWeb 雖然較新、社群較小，但優點明顯：

• 明確禁止 AI 爬蟲抓取用戶內容
• 支援外部腳本和更靈活的功能
• 會員價格更合理，權限更實用

對於注重內容所有權和創作自由的創作者來說，NecoWeb 是更好的選擇。如果你擔心作品被 AI 無償使用，這一點尤其重要。

💡 MasLogin 提示：如果你需要安全管理多個網站帳號（例如同時運行多個獨立網站），可以使用 MasLogin 反偵測瀏覽器。它能為每個帳號建立獨立的瀏覽器環境，避免平台偵測到關聯，保護你的多帳號營運安全。

持續優化：永無止境的完善之路

行動裝置響應式設計

雖然個人網站主要面向桌面瀏覽，但我還是做了基礎的響應式設計，確保手機使用者也能正常瀏覽內容。

元件化重構

為了方便後續維護，我將側邊欄、頁首、頁尾等重複元素改造成可重複使用的元件。現在修改一處，全站同步更新——大大提升了效率。

程式碼優化與清理

回顧早期程式碼，我發現許多冗餘和不規範的寫法。雖然功能正常，但作為學習專案，我決定逐步重構這些「技術債」。

重要的是：不要因為程式碼不完美就放棄發布。先讓作品上線，再慢慢打磨——這才是真實的創作過程。

這段經歷教會我什麼？

重新愛上程式設計

本以為這個專案會讓我對程式設計感到厭倦，結果恰恰相反。解決實際問題、看到成果立即呈現的過程，比任何教學都更能激發學習熱情。

我甚至開始學習 Python，純粹是因為享受程式設計的樂趣。

擁抱不完美的創作

在 AI 工具泛濫的今天，人類創作者最大的優勢不是完美，而是真實與獨特。我的網站程式碼混亂嗎？是的。設計專業嗎？不算。但它是100% 我自己做的，帶著我的審美、想法和學習軌跡。

這種不完美，恰恰是最珍貴的價值。

數位空間的所有權

在自己的網站上，你不需要擔心：

• 演算法是否推薦你的內容
• 平台規則突然改變
• 帳號被無故封鎖
• 數據被用於訓練 AI

這種完全掌控感，是任何社群平台都無法給予的。

給想入門的你：實用建議

從簡單開始

• 不要一上來就追求完美設計
• 先建置基礎框架，再逐步美化
• 學會使用開發者工具檢查問題

利用現有資源

推薦資源：

• Sadgrl 的版面配置產生器：快速產生復古風格版面配置
• 98.css：Windows 98 風格元件
• NeoCities / NecoWeb：免費託管平台
• 各式復古元素素材網站

加入社群

獨立網路社群非常友善，大家樂於分享經驗和資源。瀏覽其他人的網站，不僅能獲得靈感，還能透過「檢視原始碼」學習技巧。

保持耐心與熱情

建站是馬拉松，不是衝刺。我的網站從開始到基本成型，花了數個月時間。期間經歷無數次想放棄的時刻，但每次突破一個技術難題，都會重新燃起動力。

結語：在演算法時代保持人性

這個專案提醒我，網路本該是人類表達的樂園，而非數據收割的農場。當我們把創作主動權交還給自己，會發現那些「不完美」的作品，反而最能打動人心。

如果你也厭倦了社群媒體的演算法推薦，不妨試試建置自己的小角落。程式碼不會？沒關係，現在有大把教學和工具幫你入門。重要的是開始行動，在這個過程中學習、成長、享受創作的快樂。

歡迎瀏覽我的網站（連結見留言區），在留言板留下你的足跡。也期待有一天，能在 Indie Web 的某個角落遇見你的作品。

---

常見問題解答

完全不懂程式設計可以建置個人網站嗎？

可以！雖然有一定學習曲線，但 HTML/CSS 是最容易入門的程式語言。網路上有大量免費教學，像 FreeCodeCamp 提供系統化課程。即使每天只學 30 分鐘，一個月內就能掌握基礎。

NeoCities 和 NecoWeb 哪個更適合新手？

NeoCities 社群更大、資源更多，適合想快速上手並獲得回饋的新手。NecoWeb 更注重隱私保護和功能自由度，適合有一定基礎且重視內容所有權的使用者。兩者都提供免費方案，可以先嘗試 NeoCities，熟悉後再考慮遷移。

個人網站需要多少費用？

基礎版完全免費：NeoCities/NecoWeb 提供免費託管，無需購買網域名稱和伺服器。如果想要自訂網域名稱（如 yourname.com），每年約 10-15 美元。付費會員功能（如更大儲存空間）通常每月 5 美元左右。

如何保護個人網站不被 AI 抓取？

可以採取以下措施：

• 在 robots.txt 文件中禁止爬蟲存取
• 使用 NecoWeb 等預設阻止 AI 爬蟲的平台
• 加入「禁止 AI 訓練」的版權聲明

雖然無法 100% 阻止，但能大幅降低被抓取的風險。