谦谦TWT 版权所有
1099 字
5 分钟
宝塔面板从零搭建静态 HTML 网站
宝塔面板从零搭建静态 HTML 网站
前言
对于刚接触服务器的小白来说,Linux 命令行往往是最劝退的一步。而 宝塔面板(BT Panel) 通过图形化界面,把复杂的服务器操作变成了”点点鼠标”就能完成的事。
本文将从零开始,带你完成宝塔面板的安装,并部署一个简单的 HTML 单页网站。全程无需 Linux 基础。
一、准备工作
开始之前,你需要:
- 一台云服务器(阿里云、腾讯云、华为云等均可),系统推荐 CentOS 7 或 Ubuntu 20.04+,内存 512M 以上即可
- 重要:在云服务器安全组中放行以下端口:
80(网站访问)、443(HTTPS)、8888(宝塔面板)
二、安装宝塔面板
SSH 连接到服务器后,执行对应系统的安装命令。
CentOS 系统:
yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && bash install.shUbuntu / Debian 系统:
wget -O install.sh https://download.bt.cn/install/install_6.0.sh && bash install.sh安装过程大约 2-5 分钟,期间提示是否同意协议,输入 y 回车即可。
安装完成后,终端会输出以下关键信息,务必记录下来:
外网面板地址: http://你的IP:8888/随机字符串用户名: admin密码: 随机密码三、登录面板并安装环境
- 浏览器访问刚才记录的 外网面板地址,输入用户名和密码登录
- 首次登录会弹出推荐安装套件的窗口
- 对于纯静态 HTML 网站,只需要安装 Nginx 即可(MySQL、PHP 都不需要)
也可以在左侧 软件商店 中搜索 Nginx,点击一键安装。
四、创建站点
- 点击左侧菜单的 网站 → 添加站点
- 填写信息:
- 域名:有域名就填域名,没有直接填服务器公网 IP 地址
- PHP 版本:选择 纯静态(HTML 不需要 PHP)
- 数据库、FTP:取消勾选,不需要
- 点击 提交,站点创建完成
站点根目录默认为 /www/wwwroot/你的域名或IP/,后面上传文件就放到这里。
五、上传 HTML 网页
方法一:宝塔文件管理器(推荐)
- 左侧菜单进入 文件
- 导航到站点根目录(如
/www/wwwroot/你的域名/) - 删除目录中默认生成的
.htaccess、404.html、index.html等文件 - 点击 上传,选择你的 HTML 文件(主页面需命名为
index.html)
如果你有多个文件(如 CSS、JS、图片等),建议先将整个文件夹打成 ZIP 压缩包上传,然后右键解压。
方法二:FTP 工具
你也可以使用 FileZilla、WinSCP 等工具,通过 SFTP 连接服务器,将文件拖入站点根目录。
关键点
- 首页文件必须命名为
index.html,Nginx 默认会把它作为首页 - 如果上传后访问仍显示旧页面,可能是浏览器缓存,按
Ctrl + F5强制刷新
六、配置默认首页(访问域名直接打开)
如果你发现访问 http://你的域名/ 无法打开,但访问 http://你的域名/index.html 可以,说明默认首页配置有问题。
- 进入站点 设置 → 配置文件
- 找到
index配置行,确保包含index.html:
index index.html index.htm;保存后,访问根路径就能自动加载首页了。
七、访问测试
在浏览器输入你的域名或服务器 IP,看到你的 HTML 页面即为部署成功。
如果无法访问,按以下顺序排查:
- 安全组:云服务器安全组是否放行了 80 端口
- 宝塔防火墙:面板 安全 页面是否放行了 80 端口
- 域名解析(如果用了域名):域名 A 记录是否解析到了服务器 IP
- 文件权限:SSH 执行以下命令修复权限
chmod -R 755 /www/wwwroot/你的域名/chown -R www:www /www/wwwroot/你的域名/八、配置 SSL 证书(可选)
如果想让网站支持 HTTPS,宝塔提供一键申请免费证书:
- 进入站点 设置 → SSL
- 选择 Let’s Encrypt 选项卡
- 勾选域名,点击申请
- 申请成功后,开启 强制 HTTPS
证书默认会自动续期,无需手动操作。
结语
至此,你的 HTML 网页已经可以通过互联网访问了。宝塔面板将服务器管理的门槛降到了最低,无需记住任何命令行操作,全程通过可视化界面完成。
后续如果要更新网页,只需将新的 index.html 上传覆盖即可。
宝塔面板从零搭建静态 HTML 网站
https://blog.xn--twt-zz0ja.xyz/posts/baota-deploy/