运用Nginx搭建一个简单的个人网站

目录

  • 一、目的
  • 二、完成步骤
    • 1.安装nginx
    • 2.设置Nginx
    • 3.创建服务器块
  • 三、打开网站
  • 四、总结
  • 五、参考资料

一、目的

尽你所学(采用html、或CSS、或Javascript等)完成一个静态网页,比如制作一个简单的个人介绍网页,至少包含一张图片、一个二级网页跳转链接和一个文件下载链接;将制作的网页资料上传至Ubuntu系统,用ngnix完成一个简单web网站。

二、完成步骤

1.安装nginx

(1)在ubuntu终端中输入如下命令

sudo apt-get install nginx

(2)使用命令查看Nginx服务状态

sudo systemctl status nginx

运用Nginx搭建一个简单的个人网站_第1张图片
如图所示,说明安装成功

(3)更改防火墙状态

sudo ufw allow 'Nginx Full'

在这里插入图片描述

(4)在浏览器中输入自己的ip地址,默认的 nginx 登录页面

运用Nginx搭建一个简单的个人网站_第2张图片
如图,则Nginx安装成功

2.设置Nginx

(1)将域名指向本机

输入命令

sudo vim /etc/hosts

再在其中添加你想设置的域名

我添加的是

127.0.0.1 www.namck.com

运用Nginx搭建一个简单的个人网站_第3张图片
完成之后,重启网络设置

sudo /etc/init.d/networking restart

在这里插入图片描述
(2)创建目录结构

①为www.namck.com 创建根目录

sudo mkdir -p /var/www/www.namck.com/public_html

在这里插入图片描述
②进入域文档根目录下,创建一个文本文件供下载

sudo vim xiazai.txt
sudo rar a download.rar xiazai.txt

运用Nginx搭建一个简单的个人网站_第4张图片
③接着再创建一个html文件,并添加进如下代码

sudo vim index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>网站</title>
    <link rel="stylesheet" type="text/css" href="style002.css" />
    <script>
      function Click() {
        document.getElementById("ClickDo").style.color = "sky-blue";
      }
    </script>
  </head>
  <body>
    <h1>这是一个简单的个人信息收集网页</h1>
    <div class="first-1">
      <h1>HELLO</h1>
      <h4>作者: NAMCK</h4>
      <p>这是一个简单的填写个人资料的网页,运用了HTMLCSS的知识创建,</p>
      <img
        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=144245908,1071974981&fm=26&gp=0.jpg"
        alt="风景tu"
        height="300"
      />
    </div>
    <a href="https://www.runoob.com/html/html5-intro.html" target="_blank">点击此处学习编写网页</a>
    <div>
      <div>
        <form>
          姓名:<input type="name" /><br />
          密码:<input type="password" /><br />
          学号:<input type="text" /><br />
          性别:<input type="radio" name="1" /><input type="radio" name="1" /><br />
          专业信息:<input type="checkbox" />18<input type="checkbox" />南岸校区 <input type="checkbox" />物联网专业
          <br />
        </form>
        所属学院:
        <select>
          <option>信息学院</option>
          <option>数理学院</option>
          <option>经管学院</option>
          <option>人文学院</option>
          <option>航空学院</option>
        </select>
      </div>
    </div>
    <div>
      <div class="first-3">
        <button onclick="btn()">点击提交信息</button>
        <h2 id="btt">信息未提交</h2>
      </div>
    </div>
    <script>
      function btn() {
        var s = document.getElementById("btt");
        s.innerHTML = "信息已提交";
        s.style.color = "red";
      }
    </script>
  </body>
</html>

④现在根目录下有三个文件

在这里插入图片描述

3.创建服务器块

①首先创建基本配置文件

sudo nano /etc/nginx/sites-available/www.namck.com

输入以下内容

server {
    listen 80;
    listen [::]:80;
    root /var/www/www.namck.com/public_html/;
    index index.html;
    server_name www.namck.com;
    access_log /var/log/nginx/www.namck.com.access.log;
    error_log /var/log/nginx/www.namck.com.error.log;
    location / {
        try_files $uri $uri/ =404;
    }
}

②要启用新的服务器块文件,我们需要创建一个从文件到启动站点的符号链接,该目录在启动期间由 nginx 读取

sudo ln -s /etc/nginx/sites-available/www.namck.com /etc/nginx/sites-enabled/

③查看nginx 是否正确

sudo nginx -t

在这里插入图片描述
如图则说明运行成功

⑤重新启动 nginx 服务

sudo systemctl restart nginx

三、打开网站

在浏览器中输入域名浏览自己写的网站

四、总结

通过上面的方法,可以实现在自己的电脑上完成访问自己所建的网站。

五、参考资料

1.Ubuntu 18.04 安装 nginx 并搭建一个简单的网站
2.如何在Ubuntu 18.04上设置Nginx服务器模块

你可能感兴趣的:(linux,nginx)