Skip to content

项目2:搭建个人静态网站(Nginx)

安装Nginx服务器

Nginx是一个高性能的Web服务器,我们将学习如何在Linux系统上安装和配置Nginx。

在Ubuntu/Debian系统上安装

  1. 更新软件包列表:
bash
sudo apt update
  1. 安装Nginx:
bash
sudo apt install nginx
  1. 检查Nginx服务状态:
bash
sudo systemctl status nginx
  1. 启动Nginx服务:
bash
sudo systemctl start nginx
  1. 设置Nginx开机自启:
bash
sudo systemctl enable nginx

在CentOS/RHEL系统上安装

  1. 安装EPEL仓库(如果尚未安装):
bash
sudo yum install epel-release
  1. 安装Nginx:
bash
sudo yum install nginx
  1. 启动Nginx服务:
bash
sudo systemctl start nginx
  1. 设置Nginx开机自启:
bash
sudo systemctl enable nginx

验证安装

打开浏览器,访问服务器的IP地址,如果看到Nginx的欢迎页面,则说明安装成功。

配置Nginx,部署静态网页

创建网站目录结构

  1. 创建网站根目录:
bash
sudo mkdir -p /var/www/mywebsite
  1. 设置目录权限:
bash
sudo chown -R $USER:$USER /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

创建静态网页

  1. 创建index.html文件:
bash
nano /var/www/mywebsite/index.html
  1. 添加以下内容:
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        main {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
    </header>
    <main>
        <h2>关于我</h2>
        <p>这是一个使用Nginx搭建的静态网站。</p>
        <p>通过这个项目,我们学习了如何:</p>
        <ul>
            <li>安装Nginx服务器</li>
            <li>配置Nginx虚拟主机</li>
            <li>部署静态网页</li>
            <li>测试网站访问</li>
        </ul>
        <h2>联系我</h2>
        <p>邮箱:example@example.com</p>
    </main>
    <footer>
        <p>&copy; 2026 我的个人网站</p>
    </footer>
</body>
</html>

配置Nginx虚拟主机

  1. 创建Nginx配置文件:
bash
sudo nano /etc/nginx/sites-available/mywebsite
  1. 添加以下内容:
nginx
server {
    listen 80;
    server_name example.com www.example.com;

    root /var/www/mywebsite;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}
  1. 创建符号链接:
bash
sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/
  1. 测试Nginx配置:
bash
sudo nginx -t
  1. 重新加载Nginx配置:
bash
sudo systemctl reload nginx

测试网站访问,排查常见故障

测试网站访问

  1. 通过IP地址访问:

    • 打开浏览器,输入服务器的IP地址
    • 应该能看到我们创建的静态网页
  2. 通过域名访问(如果有域名):

    • 确保域名已解析到服务器IP
    • 打开浏览器,输入域名
    • 应该能看到我们创建的静态网页

常见故障排查

1. Nginx服务未启动

  • 检查服务状态:
bash
sudo systemctl status nginx
  • 启动服务:
bash
sudo systemctl start nginx

2. 端口被占用

  • 检查80端口占用情况:
bash
sudo netstat -tuln | grep 80
  • 如果端口被占用,停止占用端口的进程或修改Nginx配置使用其他端口

3. 防火墙阻止访问

  • 检查防火墙状态:
bash
sudo ufw status
  • 允许80端口访问:
bash
sudo ufw allow 80/tcp

4. 配置文件错误

  • 检查Nginx配置:
bash
sudo nginx -t
  • 查看错误日志:
bash
sudo tail -f /var/log/nginx/error.log

5. 文件权限问题

  • 检查网站目录权限:
bash
ls -la /var/www/mywebsite/
  • 修复权限:
bash
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

性能优化建议

  1. 启用Gzip压缩

在Nginx配置文件中添加:

nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1024;
  1. 启用缓存

在Nginx配置文件中添加:

nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}
  1. 限制请求大小

在Nginx配置文件中添加:

nginx
client_max_body_size 10M;

通过以上步骤,我们成功搭建了一个基于Nginx的个人静态网站,并学习了如何排查常见故障。

© 2026 编程马·菜鸟教程 版权所有