怎么在 Windows 上搭建第一个网站：从零开始的详细教程

很多人第一次想做网站，都会卡在一个问题上：我只有一台 Windows 电脑，能不能先把网站跑起来？
答案是：完全可以。而且不需要你一上来就买服务器、买域名、学一堆复杂知识，先在本地把网站搭起来，反而更适合新手入门。

这篇文章就围绕关键词 “怎么在 windows 上搭建第一个网站”，手把手带你完成一个最基础、最实用的网站搭建流程。你会学到：

在 Windows 上准备网站环境
搭建本地网站运行环境
创建第一个网页
测试网站是否能正常访问
把网站发布到公网的思路
新手常见问题怎么处理

一、先搞清楚：网站到底是怎么运行的

很多小白一听“搭建网站”，容易以为一定要会编程、会服务器、会数据库。其实最简单的网站，本质上就是三样东西：

网页文件
比如 index.html，这是网站的首页。
运行环境
让你的电脑能像服务器一样，对外提供网页访问。
访问方式
通过浏览器输入地址，打开网页。

如果只是想做第一个网站，最推荐的方式是：

先在 Windows 本地搭建一个测试环境
再把网站放到服务器上，让别人也能访问

新手最容易上手的本地环境有两种：

方案一：IIS
- Windows 自带，适合入门
- 配置简单
- 适合静态网页和基础测试
方案二：宝塔面板 / XAMPP / WampServer
- 更适合做动态网站
- 支持 PHP、MySQL 等
- 以后做 WordPress 也更方便

如果你是第一次搭建网站，建议按这个顺序来：

先用 IIS 做一个最简单的网页 → 再升级到 XAMPP 或宝塔环境。

二、方案一：在 Windows 上用 IIS 搭建第一个网站

1. IIS 是什么

IIS 全名是 Internet Information Services，是 Windows 自带的网站服务组件。
它可以把你的电脑变成一个简易网页服务器，让你在浏览器里打开本地网站。

适合人群：

电脑小白
只想先体验网站是怎么跑起来的
想快速测试 HTML 页面

2. 开启 IIS 功能

操作步骤：

点击 开始菜单
搜索并打开 控制面板
进入程序
点击 启用或关闭 Windows 功能
找到 Internet Information Services
勾选它，建议把下面这些也一起勾上：
- Web 管理工具
- 万维网服务
点击确定
等待系统自动安装完成

安装完后，Windows 就具备了网站服务能力。

3. 检查 IIS 是否安装成功

打开浏览器，输入：

http://localhost

如果你看到一个默认欢迎页面，说明 IIS 已经正常运行。
如果打开后提示无法访问，先别急，通常是下面几种原因：

IIS 没有启用成功
80 端口被其他软件占用
系统防火墙拦截了访问

后面会专门讲排查方法。

4. 找到网站目录

IIS 默认的网站目录一般是：

C:\inetpub\wwwroot

这个文件夹就是你放网页文件的地方。

你可以这样操作：

打开资源管理器
进入 C:\inetpub\wwwroot
删除里面原来的默认文件，或者先备份
新建一个 index.html

5. 创建你的第一个网页

用记事本打开 index.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>
</head>
<body>
    <h1>你好，这是我的第一个网站！</h1>
    <p>我已经成功在 Windows 上搭建了本地网站。</p>
</body>
</html>

保存后，在浏览器里刷新 http://localhost。

如果页面正常显示，恭喜你，你已经完成了第一个网站的搭建。

三、方案二：用 XAMPP 搭建更适合新手的网站环境

如果你后面想做的是：

PHP 网站
WordPress
带数据库的动态网站

那就建议直接用 XAMPP，它对新手非常友好。

1. XAMPP 是什么

XAMPP 是一个集成环境，里面通常包含：

Apache：网站服务
MySQL：数据库
PHP：网页脚本语言
phpMyAdmin：数据库管理工具

简单说，它帮你把网站开发最常用的环境一次装齐。

2. 下载并安装 XAMPP

操作步骤：

打开 XAMPP 官方下载页面
下载适合 Windows 的版本
安装时保持默认选项即可
安装路径建议不要放到中文目录里，比如：
```
C:\xampp
```

安装完成后，打开 XAMPP 控制面板。

3. 启动网站服务

在控制面板里，点击：

Apache 的 Start
如果需要数据库，再启动 MySQL

如果启动成功，Apache 状态会变成绿色。

然后浏览器输入：

http://localhost

如果看到 XAMPP 欢迎页，说明服务正常。

4. 放入你的网站文件

XAMPP 的网站目录通常是：

C:\xampp\htdocs

你可以在这个目录下新建一个文件夹，比如：

C:\xampp\htdocs\myweb

然后创建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网站首页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我在 Windows 上搭建的第一个网站。</p>
</body>
</html>

然后在浏览器输入：

https://www.liubo.wang/myweb

就能访问你的网站了。

四、方案三：做 WordPress 网站，适合想快速建站的人

如果你的目标不是单纯写 HTML，而是想快速做出一个像样的网站，比如博客、企业展示站、个人作品集，那么 WordPress 是非常合适的。

WordPress 的优点

不需要从头写太多代码
后台操作简单
主题和插件丰富
适合做博客、资讯站、展示站

搭建思路

WordPress 需要：

PHP 环境
MySQL 数据库
Web 服务器

所以你可以用：

XAMPP
WampServer
宝塔面板
直接上云服务器

如果你是刚起步，建议先在本地 XAMPP 上练手，等熟悉后再迁移到服务器。

五、如果想让别人也能访问，你还需要什么

本地网站只能自己电脑打开，别人是访问不到的。
如果你想让朋友、客户、同事从外网访问，你需要：

1. 一台服务器

可以是：

阿里云服务器
腾讯云服务器
华为云服务器
海外 VPS

2. 一个域名

比如：

yourname.com

3. 网站程序

可以是：

静态网页
WordPress
PHP 网站
Java 网站
Python 网站

4. 域名解析

把域名指向你的服务器 IP。

5. 开放端口

通常要开放：

80 端口（HTTP）
443 端口（HTTPS）

六、网站搭建完成后，怎么测试是否正常

新手最容易忽略测试环节，实际上这一步很重要。

测试方法一：本机访问

打开浏览器，输入：

http://localhost

或者：

http://127.0.0.1

能打开页面，说明本地服务正常。

测试方法二：局域网访问

如果你想让家里其他设备访问这台电脑上的网站，可以查看本机 IP，比如：

192.168.1.100

然后在手机、另一台电脑浏览器输入：

http://192.168.1.100

前提是：

网站服务已启动
Windows 防火墙允许访问
局域网没有限制

七、Windows 上搭建网站最常见的问题

问题 1：输入 localhost 打不开

可能原因：

IIS 或 Apache 没启动
80 端口被占用
防火墙拦截

解决办法：

检查服务是否启动
打开命令提示符，输入：
```
netstat -ano | findstr :80
```
查看是否有程序占用了 80 端口
如果被占用，关掉相关软件，或者修改网站端口

常见占用 80 端口的软件有：

IIS
VMware
Skype
某些安全软件
其他 Web 服务

问题 2：网页打开了，但中文乱码

这是编码问题。

解决办法：

确保 HTML 文件头部有：

<meta charset="UTF-8">

保存文件时也要选择 UTF-8 编码，不要用 ANSI。

问题 3：修改网页后浏览器没变化

这是缓存问题。

解决办法：

按 Ctrl + F5 强制刷新
清除浏览器缓存
检查你修改的是不是正确目录下的文件

问题 4：Apache 或 MySQL 启动失败

常见原因：

端口冲突
权限不足
被安全软件拦截

解决办法：

关闭占用端口的软件
以管理员身份运行 XAMPP
在防火墙里放行程序

八、新手最推荐的搭建路线

如果你是完全没接触过网站，我建议你按这个顺序学：

第一步：先学会静态网页

内容包括：

HTML
CSS
简单 JavaScript

第二步：在 Windows 上搭本地环境

可以选：

IIS：入门最简单
XAMPP：适合后续扩展

第三步：做一个小项目

比如：

个人主页
简历展示页
作品集页面
小博客首页

第四步：部署到服务器

等你本地玩熟了，再把网站放到云服务器上。

这样学习路线最稳，不容易劝退。

九、推荐的新手网站目录结构

如果你只是做静态网站，可以这样放文件：

myweb/
├─ index.html
├─ about.html
├─ css/
│  └─ style.css
├─ js/
│  └─ main.js
└─ images/
   └─ logo.png

这样结构清晰，后续维护也方便。

十、一个更完整的首页示例

下面给你一个稍微像样一点的首页，直接可以用：

<!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: "Microsoft YaHei", Arial, sans-serif;
            background: #f5f7fa;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 60px auto;
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.8;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这是我在 Windows 上搭建的第一个网站。</p>
        <p>后面我会继续添加更多内容，比如文章、图片和联系方式。</p>
    </div>
</body>
</html>

这个页面虽然简单，但已经具备了一个网站首页的基本样子。