Nginx 教程：从零开始搭建静态网站服务器

Nginx 搭建 博客
Nginx
文章字数:   1.7k
阅读时长:   6 分

嘿，朋友！想不想自己动手搭一个网站？别担心，没那么复杂。今天这篇文章，我就手把手带你用 Nginx 搭建一个静态网站服务器。全程大白话，小白也能轻松上手！

为什么选择 Nginx？

你可能会问，Web 服务器软件那么多，为啥偏偏选 Nginx？原因很简单：

  • 快，稳！ Nginx 以其高性能和稳定性著称，处理静态文件（比如 HTML、CSS、JavaScript 和图片）的速度飞快。
  • 资源占用少： 相比于一些传统的 Web 服务器，Nginx 更加轻量级，消耗的内存和 CPU 资源更少。
  • 功能强大： 除了作为 Web 服务器，它还能做反向代理、负载均衡等很多酷炫的事情，以后你的网站想升级，它都能hold住。

总而言之，Nginx 就是一个“快、稳、强”的优秀选择。

准备工作

在开始之前，你需要准备好：

  1. 一台服务器（云服务器或者虚拟机都行）。
  2. 掌握基础的 Linux 命令行操作。
  3. 一个静态网站的源码（如果没有，先创建一个简单的 HTML 文件也完全没问题）。

准备好了吗？让我们开始吧！

第一步：安装 Nginx

不同 Linux 发行版的安装命令会稍有区别，这里以 Ubuntu/Debian 和 CentOS 为例。

对于 Ubuntu/Debian 系统：

# 更新软件包列表
sudo apt-get update

# 安装 Nginx
sudo apt-get install nginx -y

对于 CentOS 系统：

# 安装 Nginx
sudo yum install nginx -y

安装完成后，我们可以启动 Nginx 并设置开机自启。

# 启动 Nginx 服务
sudo systemctl start nginx

# 设置 Nginx 开机自启
sudo systemctl enable nginx

想知道 Nginx 是不是已经成功运行了？可以查看一下它的状态：

sudo systemctl status nginx

如果你看到 active (running) 的字样，那就说明 Nginx 已经成功跑起来了！ 你也可以直接在浏览器里输入你服务器的 IP 地址，如果看到了 Nginx 的欢迎页面，那同样证明安装成功了。

第二步：上传你的网站文件

接下来，把你的静态网站文件上传到服务器上。通常，我们会把网站文件放在 /var/www/ 目录下。

我们来创建一个新的目录存放我们的网站：

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

然后，将你的 HTML、CSS、JavaScript 和图片等文件上传到这个目录里。为了方便演示，我们先在服务器上创建一个简单的 index.html 文件。

sudo tee /var/www/my-static-site/index.html > /dev/null <<'EOF'
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的第一个静态网站</title>
</head>
<body>
    <h1>Hello, Nginx!</h1>
    <p>我的第一个由 Nginx 驱动的网站。</p>
</body>
</html>
EOF

第三步：配置 Nginx

这是最核心的一步。Nginx 的配置文件决定了它如何处理网络请求。主配置文件通常是 /etc/nginx/nginx.conf。 不过，为了方便管理，我们通常会在 /etc/nginx/sites-available/ 目录下为每个网站创建一个独立的配置文件，然后创建一个软链接到 /etc/nginx/sites-enabled/ 目录。

  1. 创建配置文件

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

  2. 编写配置

    将下面的配置代码复制粘贴到你创建的文件里。

    server {
    listen 80; # 监听 80 端口，也就是 HTTP 请求
    server_name your_domain.com www.your_domain.com; # 替换成你的域名或服务器 IP 地址

    root /var/www/my-static-site; # 网站文件的根目录
    index index.html index.htm; # 默认的索引文件

    location / {
        try_files $uri $uri/ =404; # 尝试查找文件，如果找不到就返回 404 错误
    }
}

    代码解析：

    • listen 80;: Nginx 会监听服务器的 80 端口，这是 HTTP 协议的默认端口。
    • server_name: 这里填写你的域名或者服务器的公网 IP 地址。
    • root: 这个指令指定了网站文件的存放路径。当用户访问时，Nginx 就会到这个目录下寻找相应的文件。
    • index: 当用户访问一个目录时（比如 http://your_domain.com/），Nginx 会默认查找 index.html 或 index.htm 文件。
    • location /: 这定义了如何处理网站的根路径（/）请求。
    • try_files: 这是一个非常有用的指令。它会按顺序检查文件是否存在，并返回第一个找到的文件。如果都找不到，最后会返回一个 404 错误页面。

  3. 启用配置

    创建一个从 sites-available 到 sites-enabled 的软链接来启用我们的网站配置。

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

  4. 测试并重启 Nginx

    在应用配置之前，最好先检查一下配置文件有没有语法错误。

    sudo nginx -t

    如果看到 syntax is ok 和 test is successful 的提示，就说明没问题。

    现在，平滑地重新加载 Nginx，让新的配置生效。

    sudo nginx -s reload

    或者使用 systemctl：

    sudo systemctl reload nginx

第四步：见证奇迹

好了，大功告成！现在打开你的浏览器，访问你的域名或服务器 IP 地址。你应该能看到 “Hello, Nginx!” 的页面了。

进阶优化：让你的网站飞起来

你的网站已经成功上线了，但我们还可以做一些优化，让它访问速度更快，用户体验更好。

  • 启用 Gzip 压缩： 压缩可以显著减小 HTML、CSS、JS 等文本文件的大小，加快传输速度。
    在你的 http 配置块中（通常在 /etc/nginx/nginx.conf）添加以下代码：

    http {
    # ... 其他配置 ...
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss;
    # ... 其他配置 ...
}

  • 设置浏览器缓存： 通过设置 expires 头，可以让浏览器缓存静态资源，用户下次访问时就不用重新下载了。
    在你的 server 配置块中添加：

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
}

    这个配置会让浏览器缓存图片、CSS 和 JS 文件 30 天。

  • 启用 HTTP/2: HTTP/2 相比于 HTTP/1.1 有很多性能上的改进，可以显著提升网站加载速度。 如果你已经配置了 HTTPS，只需要在 listen 指令后加上 http2 即可。

    server {
    listen 443 ssl http2;
    # ... 其他配置 ...
}

常用 Nginx 命令备忘录

最后，附上一些常用的 Nginx 命令，方便你日常管理。

  • sudo nginx: 启动 Nginx
  • sudo nginx -s stop: 快速停止 Nginx
  • sudo nginx -s quit: 平滑停止 Nginx
  • sudo nginx -s reload: 重新加载配置文件
  • sudo nginx -v: 查看 Nginx 版本
  • sudo nginx -V: 查看 Nginx 版本和编译参数
  • sudo nginx -t: 检查配置文件语法

希望这篇教程能帮你成功迈出搭建网站的第一步。Nginx 的世界远不止于此，继续探索，你会发现更多有趣和强大的功能！

Nginx 搭建 博客
  目录