1. 為什麼我們需要 HTML 網站？
歡迎來到充滿趣味的網頁開發世界！今天我們將製作一個簡單的靜態 HTML 網站，並將其部署到你在之前講座中設置的 Web 伺服器上。就算你從未寫過 HTML 程式碼也不用擔心，一切會非常明確。我們的目標除了理解 HTML 的基礎外，還要學習如何通過 Web 伺服器，讓全世界都能看到你自己的網站。
現在我們將邁出下一步——創建自己的 HTML 網站，並通過你的 Web 伺服器來設定顯示。準備好征服網路世界了嗎？那我們開始吧！
HTML (HyperText Markup Language) 是所有網頁的基礎。它負責網站的結構和內容。在標準的 HTML 中，可以描述標題、文字、圖片、連結甚至表格。HTML 容易學習，同時也足夠強大，成為任何網站的基礎。
在現實中，靜態 HTML 頁面的技能在很多情況下都非常有用：
- 快速創建 Web 應用程式的原型。
- 編寫和測試文檔用的靜態頁面。
- 為伺服器應用程式準備基本介面。
而且 HTML 還是以網頁形式製作履歷表的絕佳方法（真的哦，有時候招聘者會喜歡這樣）。對我們程式設計師來說，掌握基本的 HTML 是絕對必要的技能。
2. 第一步：HTML 基礎，建立第一個頁面
程式設計就像 LEGO：各個年齡層都喜歡的玩具。我們從一個小「積木」開始——我們的第一個網頁。
HTML 文件的最小範例
在任何文字編輯器內建立一個名為 index.html 的檔案（例如 nano, vim 或甚至 gedit，如果你想要有點圖形介面），然後寫下以下代碼：
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網站</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>這是我用 HTML 建立的第一個網頁。</p>
</body>
</html>代碼說明
<!DOCTYPE html>– 告訴瀏覽器我們使用的是 HTML5。<html>– 開啟整個文件。頁面的所有內容都放在這個標籤內。<head>– 用於放置網站的元資訊部分（例如網頁標題、樣式或腳本連結）。<title>– 頁面名稱，會顯示在瀏覽器標籤上。<body>– 主要部分，放置所有可見內容。<h1>– 頁面的一級標題（數字越小，標題越大）。<p>– 一段文字。
是的，就這七行代碼，將成為你網站的基礎！
3. 第 2 步：將 HTML 網站部署到伺服器
現在我們的頁面已經準備好了，是時候向世界展示了！為此，我們會用到我們的 web server。
準備網站的資料夾
建立一個目錄來存放你的網站文件。如果你想在虛擬主機上使用域名 example.com 部署網站，執行以下指令：
sudo mkdir -p /var/www/example.com
接著，把你的 index.html 文件移動到這個目錄：
sudo cp index.html /var/www/example.com/
魔法開始運作了 - 文件已經準備好可以使用了。
4. 步驟 3. 配置Web伺服器以服務網站
Nginx的配置
打開虛擬主機的配置文件：
sudo nano /etc/nginx/sites-available/example.com插入以下配置：
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }啟用虛擬主機並重啟伺服器：
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Apache的配置
打開虛擬主機的配置文件：
sudo nano /etc/apache2/sites-available/example.com.conf插入以下配置：
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>啟用虛擬主機並重啟伺服器：
sudo a2ensite example.com.conf sudo systemctl restart apache2
測試網站
現在打開你的瀏覽器，輸入 http://example.com（或你的伺服器的IP地址），然後享受成果吧。如果你看到美麗的"你好，世界！" —— 恭喜，一切正常！
5. 第四步：美化我們的網站
靜態網站是個好開始，但加些 CSS 讓它更有魅力吧！讓我們來增加一些樣式。
在資料夾 /var/www/example.com/ 中新增一個新檔案 style.css：
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}接著更新你的 index.html，加上連結到 CSS 的標籤：
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>你好，世界！</h1>
<p>這是我第一個 HTML 網頁。</p>
</body>
</html>重新載入頁面後，你會看到樣式有些小改變。現在你的网站變得更漂亮了一點！
6. 常見問題及解決方法
在處理網站時，你可能會遇到一些問題，但別擔心，我們已經為你準備好了：
錯誤 "403 Forbidden". 檢查網站資料夾的權限。使用以下指令：
sudo chmod -R 755 /var/www/example.com錯誤 "404 Not Found". 確保網站檔案存放在正確的資料夾，並且命名正確。
網站無法顯示. 檢查你的網頁伺服器服務是否已啟動：
sudo systemctl status nginx sudo systemctl status apache2
現在你的网站可以被知道地址的任何人訪問了。是不是覺得很鼓舞人心呢？在後續的課程中，你將學到更多內容：如何添加HTTPS來增強安全性，以及如何管理伺服器設定。
GO TO FULL VERSION