如何在 Ubuntu 上搭建你的第一个网页?
想在 Ubuntu 上拥有一个自己的网页,但不知道从哪开始?其实比你想象的要简单得多。本文将带你从零开始,在 Ubuntu 系统中创建一个最简单的 HTML 页面,并通过两种不同的方式让它可以被浏览器访问。
不需要有任何编程基础,跟着步骤走,你就能在本地或局域网中看到自己亲手搭建的网页。
1. 准备工作
假设你已经安装好了 Ubuntu(桌面版或服务器版均可)。你需要:
- 能够打开终端(Terminal)
- 拥有 sudo 权限(如果需要安装软件)
- 一个文本编辑器(系统自带的 gedit、nano,或者 VS Code 都行)
打开终端,我们先创建一个用来存放网页文件的目录:
mkdir ~/my_first_websitecd ~/my_first_website2. 编写你的第一个 HTML 文件
用你喜欢的编辑器创建一个名为 index.html 的文件。这里我们用命令行里的 nano 编辑器演示:
nano index.html将下面的内容复制进去(鼠标右键粘贴,或者 Ctrl+Shift+V):
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的第一个网页</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; background-color: #f0f0f0; } h1 { color: #2c3e50; } p { color: #34495e; } </style></head><body> <h1>Hello, Ubuntu!</h1> <p>这是我的第一个网页</p></body></html>保存文件:nano 里按 Ctrl+O,回车,再按 Ctrl+X 退出。
3. 方式一:使用 Python 内置的简易服务器(最简单)
Ubuntu 一般都自带 Python 3。在终端中确保当前目录是 ~/my_first_website,然后执行:
python3 -m http.server 8000如果提示 python3 未找到,可以先安装:
sudo apt updatesudo apt install python3 -y执行后,你会看到:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...现在,打开 Ubuntu 上的浏览器(Firefox 或 Chrome),在地址栏输入:
http://localhost:8000或者,如果你想要局域网中的其他设备访问,输入你 Ubuntu 的 IP 地址(例如 http://192.168.1.100:8000)。查看 IP 的方法:
ip addr show | grep inet看到 192.168.x.x 之类的就是你的局域网 IP。
按下 Ctrl+C 可以停止服务器。
优点:无需安装额外软件,一行命令就能跑起来。
缺点:性能一般,不适合生产环境,仅供测试。
4. 方式二:使用 Nginx 搭建真正的 Web 服务器(推荐)
如果你希望网页能够稳定运行,或者以后要对外提供服务,建议使用 Nginx。
4.1 安装 Nginx
sudo apt updatesudo apt install nginx -y安装完成后,Nginx 会自动启动。在浏览器输入 http://localhost,如果看到 “Welcome to nginx” 页面,说明安装成功。
4.2 配置 Nginx 使用你自己的网页
默认情况下,Nginx 的网站根目录在 /var/www/html。我们需要把刚才的 index.html 放到那里,并适当调整权限。
# 复制文件到 Nginx 默认目录sudo cp ~/my_first_website/index.html /var/www/html/
# 确保权限正确sudo chmod 644 /var/www/html/index.html现在,再次访问 http://localhost,你应该就能看到自己写的页面了。
4.3 (可选)为网页设置独立域名或端口
如果你不想覆盖 Nginx 的默认站点,可以为自己的网页创建一个独立的配置文件。
sudo nano /etc/nginx/sites-available/mywebsite写入以下内容:
server { listen 8080; server_name localhost;
root /home/你的用户名/my_first_website; index index.html;
location / { try_files $uri $uri/ =404; }}注意把 你的用户名 换成实际的用户名。
启用这个站点:
sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/sudo nginx -t # 检查配置语法sudo systemctl reload nginx现在访问 http://localhost:8080 就能看到你的网页了。端口可以随意改成你喜欢的数字(比如 8080、3000 等),但要确保不与其他程序冲突。
5. 进阶:让局域网或外网访问
5.1 局域网访问
如果你的 Ubuntu 机器和手机/平板在同一个 WiFi 下,可以直接使用 Ubuntu 的 IP 地址加端口访问。例如:
- 使用 Python 服务器:
http://192.168.1.100:8000 - 使用 Nginx 默认端口 80:
http://192.168.1.100 - 使用自定义端口 8080:
http://192.168.1.100:8080
如果无法访问,请检查 Ubuntu 防火墙是否放行了对应端口:
sudo ufw allow 8000/tcp # 如果使用 Python 服务器sudo ufw allow 80/tcpsudo ufw allow 8080/tcp5.2 外网访问(简单说明)
要让外网的朋友也能访问你的网页,你需要:
- 有一个公网 IP(家庭宽带通常没有固定公网 IP,需要申请或使用 DDNS)
- 在路由器上做端口转发(将公网端口映射到 Ubuntu 的内网 IP 和端口)
- 或者使用内网穿透工具,如
cpolar、frp等。
对于初学者,建议先完成局域网访问,外网访问涉及较多网络知识,可以以后再学。
6. 常见问题
| 问题 | 解决办法 |
|---|---|
| 浏览器显示“无法访问此网站” | 检查服务器是否在运行(Python 窗口不能关闭),端口是否被防火墙拦截,IP 地址是否正确 |
| Nginx 报错 “address already in use” | 说明端口被占用,通常是 80 端口已经被其他程序(如 Apache)占用。可以修改 Nginx 的监听端口,或先停掉 Apache |
| 修改了 HTML 文件但浏览器没变化 | 尝试强制刷新(Ctrl+F5),或者清除浏览器缓存 |
| 权限不够,无法复制文件到 /var/www/html | 使用 sudo cp,因为系统目录需要 root 权限 |
参考资料:
如果这篇文章对你有帮助,欢迎分享给更多人!
部分信息可能已经过时









