托管静态网站
配置您选择的 Web 服务器，使其提供静态 HTML、CSS 和 JavaScript 文件，让您的第一个网站能够访问。
托管静态网站 是 CoddyKit 上的免费 Linux Server Deployment & SSH Mastery 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Linux Server Deployment & SSH Mastery 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Linux Server Deployment & SSH Mastery 课程共包含 4 节课。
什么是静态 website
欢迎！本课将学习如何让您的简单 website 上线。
静态 website由 HTML、CSS 和 JavaScript 等文件组成，服务器会按照文件原样将它们发送到用户的浏览器。
- 没有服务器端处理（例如 PHP 或 Python）。
- 速度快、安全且易于托管。
- 非常适合作品集、博客或简单的信息类网站。
创建您的第一个 HTML 文件
让我们创建一个非常简单的 index.html 文件。它将作为静态 website 的主页。
通常，您会在服务器上创建此文件，例如使用 nano 或 vim 等文本编辑器。
<!DOCTYPE html>
<html>
<head>
<title>My First Static Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello CoddyKit!</h1>
<p>This is my awesome static website.</p>
<script src="script.js"></script>
</body>
</html>添加 CSS 和 JavaScript
我们的 HTML 文件引用了 style.css 和 script.js。让我们也创建这两个文件，完成基础 website。
这些文件将与 index.html 位于同一目录中。
/* style.css */
body {
font-family: sans-serif;
background-color: #f0f0f0;
text-align: center;
}
h1 {
color: #333;
}
// script.js
document.addEventListener('DOMContentLoaded', () => {
console.log('Website loaded!');
alert('Welcome to my site!');
});设置 Web 目录
我们需要在服务器上准备一个专用位置，用于存放这些 website 文件。常见位置是 /var/www/。
首先，为您的 website 创建一个目录。然后，将 index.html、style.css 和 script.js 文件复制到其中。
sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/
# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsiteNginx：服务器块基础
Nginx 使用服务器块（类似于 Apache 的虚拟主机）为特定 website 定义配置。
每个服务器块都会监听某个端口上的请求（例如 HTTP 使用的 80 端口），并根据域名做出响应。
- 通常位于
/etc/nginx/sites-available/。 - 通过创建指向
/etc/nginx/sites-enabled/的符号链接来启用。
Nginx：根目录与索引指令
在服务器块中，有两个关键指令用于告诉 Nginx 在哪里查找文件：
root：指定 website 文件的绝对路径，Nginx 会在此处查找内容。index：定义请求目录时 Nginx 应提供的默认文件（例如，当有人访问yourdomain.com/时，Nginx 会查找index.html）。
Nginx：完整的静态网站配置
下面是静态 website 的完整 Nginx 服务器块配置。请将其保存为 /etc/nginx/sites-available/mywebsite.conf。
请记得将 your_domain.com 替换为您的实际域名或服务器 IP。
server {
listen 80;
listen [::]:80;
server_name your_domain.com www.your_domain.com;
root /var/www/mywebsite;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}Apache：对应的虚拟主机配置
如果您使用 Apache，则可以通过虚拟主机实现类似配置。您需要创建一个配置文件（例如 /etc/apache2/sites-available/mywebsite.conf）。
主要指令是 DocumentRoot（相当于 Nginx 的 root）和 DirectoryIndex（相当于 Nginx 的 index）。
<VirtualHost *:80>
ServerAdmin webmaster@localhost
ServerName your_domain.com
ServerAlias www.your_domain.com
DocumentRoot /var/www/mywebsite
DirectoryIndex index.html index.htm
<Directory /var/www/mywebsite>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>启用并重新加载服务器
创建配置文件后，您需要启用它并重新加载 Web 服务器，配置更改才会生效。
- 对于 Nginx：创建符号链接并重新加载。
- 对于 Apache：启用 website 并重新加载。
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx
# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2测试上线的 website
做得很好！您的静态 website 现在应该可以访问了。
打开 Web 浏览器，访问服务器的 IP 地址或您配置的域名。
您应该会看到“Hello CoddyKit!”消息！
快速检查：Nginx 指令
请考虑下面的 Nginx 服务器块片段：
server {
listen 80;
server_name example.com;
root /var/www/html/blog;
index landing.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}如果用户访问 http://example.com/，Nginx 会首先尝试提供哪个文件？
回顾：托管静态网站
您已经成功学会了如何托管静态 website！
我们学习了：
- 创建基础 HTML、CSS 和 JS 文件。
- 为 website 内容设置专用目录。
- 使用
root/DocumentRoot和index/DirectoryIndex配置 Nginx 服务器块（或 Apache 虚拟主机）。 - 启用并重新加载 Web 服务器。
- 在浏览器中测试上线的 website。
接下来，我们将探索如何配置虚拟主机，以便在同一台服务器上托管多个 website！
常见问题解答
「托管静态网站」课时是免费的吗？
是的 — 「托管静态网站」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Linux Server Deployment & SSH Mastery 课程的其余内容，请升级到 CoddyKit PRO。 Linux Server Deployment & SSH Mastery 课程共包含 4 节课。
「托管静态网站」这节课中我会学到什么？
配置您选择的 Web 服务器，使其提供静态 HTML、CSS 和 JavaScript 文件，让您的第一个网站能够访问。 你通过在浏览器中直接运行的动手代码来练习 Linux Server Deployment & SSH Mastery，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Linux Server Deployment & SSH Mastery 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Linux Server Deployment & SSH Mastery 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「托管静态网站」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Linux Server Deployment & SSH Mastery 课中编写并运行代码吗？
能。每节 Linux Server Deployment & SSH Mastery 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。