從 HTML 手刻到 AI 架站：我的網站開發筆記

做網站是一條充滿挑戰又充滿成就感的旅程。這篇文章記錄了我一路從最基本的 HTML 靜態網頁，走到 PHP 動態網站，再進一步探索用 Python 與 AI 建構智慧型網站的過程。不只是技術的堆疊，更是一種思維與工具的演進。

第一階段：純手工 HTML 的起點

當初學做網站，一開始什麼系統都不會，只會用記事本或 VS Code 寫 .html 和 .css，所有內容手動排版、上傳 FTP，一個 <div> 接著一個 <span> 慢慢拼出版面。

• 使用工具：純 HTML + CSS
• 上傳方式：FTP
• 網站特性：完全靜態、每一頁都要手刻
• 優點：學會基本語法與網頁結構
• 缺點：維護困難、無法重複利用元件

這個階段讓我打下網頁基礎，也學會什麼叫「DRY（Don't Repeat Yourself）」的重要性。

第二階段：PHP + MySQL 的動態網頁時代

接著我發現：網站資料可以「存在資料庫」裡，畫面則由程式去「動態產生」。這時我接觸了 PHP + MySQL，網站開始有「後台管理」、「留言板」、「登入系統」等功能。

• 使用技術：PHP 7.x、MySQL 5.x
• 網頁特性：動態內容、可重複套用模板
• 框架或系統：WordPress、Drupal、自己寫 MVC
• 優點：可建 CMS、資料集中管理
• 缺點：需要管理伺服器與安全性（SQL injection、XSS）

這一階段我開始架設 Ubuntu VPS，使用 Nginx、PHP-FPM，設定權限、使用 Composer，真正進入後端世界。

第三階段：AI 與 Python 架站的新世界

當我開始寫 Python，不只是為了資料處理，而是把它變成建站工具。我嘗試用 Flask、FastAPI 來做網站後端，也開始結合 OpenAI、ChatGPT API，讓網站能夠理解語意、自動生成內容，甚至進行互動。

• 使用技術：Python 3.x、Flask、FastAPI、Jinja2
• 架構：REST API + JSON 前後端分離
• 整合：GPT-4 API、圖像辨識、NLP 模型
• 優點：可客製化、可智慧互動、自動化生成內容
• 挑戰：需要更高的程式設計與部署技巧

這讓我發現：網站已不只是資訊的集合，更是一個「有智慧的服務平台」。

我學到的事情

每一階段都有它的價值與學習點：

我也深刻體會到一件事：

做網站不是單靠技術堆疊，而是解決問題的方式隨著技術演進而改變。