跳到主要内容

Nginx 静态站点部署

Nginx 是一个高性能的 HTTP 服务器和反向代理服务器,广泛用于部署静态站点。静态站点由 HTML、CSS、JavaScript 和图片等静态文件组成,不需要服务器端处理。Nginx 以其高效、轻量和易于配置的特点,成为部署静态站点的理想选择。

什么是静态站点?

静态站点是由静态文件组成的网站,这些文件在服务器上预先生成,用户访问时直接返回文件内容。与动态站点不同,静态站点不需要服务器端脚本(如 PHP、Python 或 Node.js)来生成页面内容。静态站点通常用于博客、文档站点、个人网站等。

为什么选择 Nginx 部署静态站点?

Nginx 具有以下优势:

  • 高性能:Nginx 能够处理大量并发连接,适合高流量站点。
  • 轻量级:Nginx 占用资源少,适合在资源有限的环境中运行。
  • 易于配置:Nginx 的配置文件简洁明了,易于理解和修改。

安装 Nginx

在开始之前,确保你已经在服务器上安装了 Nginx。以下是在 Ubuntu 系统上安装 Nginx 的命令:

bash
sudo apt update
sudo apt install nginx

安装完成后,启动 Nginx 服务:

bash
sudo systemctl start nginx

你可以通过访问服务器的 IP 地址来验证 Nginx 是否正常运行。如果看到 Nginx 的欢迎页面,说明安装成功。

配置 Nginx 部署静态站点

1. 创建站点目录

首先,创建一个目录来存放你的静态站点文件。例如,我们创建一个名为 my-static-site 的目录:

bash
sudo mkdir -p /var/www/my-static-site

将你的静态文件(如 HTML、CSS、JavaScript 等)放入该目录中。

2. 配置 Nginx

接下来,我们需要配置 Nginx 来服务这个静态站点。编辑 Nginx 的配置文件:

bash
sudo nano /etc/nginx/sites-available/my-static-site

在文件中添加以下内容:

nginx
server {
listen 80;
server_name example.com;

root /var/www/my-static-site;
index index.html;

location / {
try_files $uri $uri/ =404;
}
}
  • listen 80;:指定 Nginx 监听 80 端口(HTTP)。
  • server_name example.com;:将 example.com 替换为你的域名。
  • root /var/www/my-static-site;:指定站点的根目录。
  • index index.html;:指定默认的索引文件。
  • location / { ... }:配置 URL 路径的处理方式。

3. 启用站点配置

创建符号链接以启用站点配置:

bash
sudo ln -s /etc/nginx/sites-available/my-static-site /etc/nginx/sites-enabled/

然后,测试 Nginx 配置是否正确:

bash
sudo nginx -t

如果配置正确,重新加载 Nginx 以应用更改:

bash
sudo systemctl reload nginx

4. 访问站点

现在,你可以通过浏览器访问 http://example.com 来查看你的静态站点。

实际应用场景

1. 部署个人博客

假设你有一个使用 Hugo 生成的静态博客站点。你可以将生成的静态文件放入 /var/www/my-blog 目录,并按照上述步骤配置 Nginx 来部署你的博客。

2. 部署文档站点

如果你有一个使用 MkDocs 生成的文档站点,可以将生成的静态文件放入 /var/www/my-docs 目录,并配置 Nginx 来服务这些文件。

总结

通过本文,你学习了如何使用 Nginx 部署静态站点。我们介绍了静态站点的概念、Nginx 的优势、安装和配置 Nginx 的步骤,以及实际应用场景。Nginx 是一个强大且灵活的工具,适合各种规模的静态站点部署。

附加资源

练习

  1. 尝试使用 Nginx 部署一个简单的 HTML 页面。
  2. 使用 Hugo 或 MkDocs 生成一个静态站点,并使用 Nginx 部署。
  3. 探索 Nginx 的其他配置选项,如 SSL 配置、缓存配置等。