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

您所在的位置：网站首页 › php网页如何发布内容 › 运用Nginx搭建一个简单的个人网站

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

2023-08-25 08:23| 来源: 网络整理| 查看: 265

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

一、目的

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

二、完成步骤 1.安装nginx

（1）在ubuntu终端中输入如下命令

sudo apt-get install nginx

（2）使用命令查看Nginx服务状态

sudo systemctl status nginx

在这里插入图片描述如图所示，说明安装成功

（3）更改防火墙状态

sudo ufw allow 'Nginx Full'

在这里插入图片描述

（4）在浏览器中输入自己的ip地址，默认的 nginx 登录页面

在这里插入图片描述如图，则Nginx安装成功

2.设置Nginx

（1）将域名指向本机

输入命令

sudo vim /etc/hosts

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

我添加的是

127.0.0.1 www.namck.com

在这里插入图片描述完成之后，重启网络设置

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

在这里插入图片描述 ③接着再创建一个html文件，并添加进如下代码

sudo vim index.html

网站 function Click() { document.getElementById("ClickDo").style.color = "sky-blue"; } 这是一个简单的个人信息收集网页 HELLO 作者: NAM丶CK 这是一个简单的填写个人资料的网页，运用了HTML和CSS的知识创建，点击此处学习编写网页姓名：密码：学号：性别：男女专业信息：18级南岸校区物联网专业所属学院：信息学院数理学院经管学院人文学院航空学院点击提交信息信息未提交 function btn() { var s = document.getElementById("btt"); s.innerHTML = "信息已提交"; s.style.color = "red"; }

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

在这里插入图片描述

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服务器模块

【本文地址】

公司简介

联系我们