跳到主要内容

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 配置、缓存配置等。