課堂
開始
開始學習
CodeGym /Adesua ahorow /Docker SELF /建立簡易 HTML 網站

建立簡易 HTML 網站

Docker SELF
等級 7 , 課堂 2
開放

建立簡易 HTML 網站

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>

代碼說明

  1. <!DOCTYPE html> – 告訴瀏覽器我們使用的是 HTML5。
  2. <html> – 開啟整個文件。頁面的所有內容都放在這個標籤內。
  3. <head> – 用於放置網站的元資訊部分（例如網頁標題、樣式或腳本連結）。
  4. <title> – 頁面名稱，會顯示在瀏覽器標籤上。
  5. <body> – 主要部分，放置所有可見內容。
  6. <h1> – 頁面的一級標題（數字越小，標題越大）。
  7. <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的配置

  1. 打開虛擬主機的配置文件：

    sudo nano /etc/nginx/sites-available/example.com

  2. 插入以下配置：

    server {
    listen 80;
    server_name example.com;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

  3. 啟用虛擬主機並重啟伺服器：

    sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Apache的配置

  1. 打開虛擬主機的配置文件：

    sudo nano /etc/apache2/sites-available/example.com.conf

  2. 插入以下配置：

    <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>

  3. 啟用虛擬主機並重啟伺服器：

    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來增強安全性，以及如何管理伺服器設定。

留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION