小白也能轻松拥有自己的网站：从零开始的完整指南（新手版）

Number272
77 阅读9分钟

小白也能轻松拥有自己的网站：从零开始的完整指南

很多朋友都想拥有一个属于自己的网站，但总觉得这是程序员才能干的事。其实，制作一个简单的网站并没有想象中那么复杂。今天我用最简洁的语言，带你从零开始，30分钟内让你的网站在互联网上显示"Hello World"！

什么是网站？先搞懂基础概念

网站的三大组成部分

想象一下，网站就像一本书：

  • HTML - 书的内容和结构（标题、段落、图片在哪里）
  • CSS - 书的样式设计（字体、颜色、排版好看不好看）
  • JavaScript - 书的互动功能（点击按钮、动画效果）

什么是服务器？

服务器就是一台24小时不关机的电脑，专门用来存放你的网站文件。当别人在浏览器输入你的网址时，就是从这台电脑上获取你的网站内容。

什么是域名？

域名就是你网站的地址，比如 baidu.com、zhihu.com。就像你家的门牌号，别人通过这个地址才能找到你的网站。

第一步：获取免费服务器

我们提供两种选择：Google Cloud和阿里云。根据你的实际情况选择一种即可。

方案A：Google Cloud（推荐新手）

优点： 免费额度大，稳定性好，适合学习 缺点： 需要信用卡验证，国内访问速度一般

注册Google Cloud账号

  1. 访问 Google Cloud Platform
  2. 点击"免费开始使用"
  3. 用你的Google账号登录（没有的话先注册一个）
  4. 填写基本信息，需要绑定信用卡（不用担心，免费额度内不会扣费）

创建虚拟机实例

  1. 在控制台搜索"Compute Engine"

  2. 点击"创建实例"

  3. 配置选择：

    • 名称：随便起个名字，比如"my-website"
    • 区域：选择离你较近的，比如"asia-east1"
    • 机器类型：选择最便宜的"e2-micro"（免费额度够用）
    • 操作系统：选择"Ubuntu 20.04 LTS"

  4. 点击"创建"

方案B：阿里云（推荐国内用户）

优点： 国内访问速度快，支持支付宝，中文服务 缺点： 免费试用时间有限

注册阿里云账号

  1. 访问 阿里云官网
  2. 点击右上角"免费注册"
  3. 用手机号注册并完成实名认证

购买ECS云服务器

新用户福利：

  • 搜索"云服务器ECS新人特惠"
  • 选择最便宜的配置（1核2G，约9.9元/月）
  • 或者选择"免费试用"（时间较短，但完全免费）

配置步骤：

  1. 进入ECS管理控制台

  2. 点击"创建实例"

  3. 选择配置：

    • 地域：选择离你最近的，比如"华东1（杭州）"
    • 实例规格：选择"ecs.t5-lc1m1.small"（最便宜）
    • 镜像：选择"Ubuntu 20.04 64位"
    • 网络：默认即可
    • 安全组：选择默认安全组

  4. 设置登录密码（记住这个密码！）

  5. 点击"立即购买"

配置安全组（重要！）

  1. 在ECS控制台，点击你的实例名称

  2. 点击"安全组"选项卡

  3. 点击安全组ID进入详情

  4. 点击"添加规则"，添加以下规则：

    • 端口范围：80/80
    • 授权对象：0.0.0.0/0
    • 描述：HTTP访问

  5. 同样添加HTTPS规则（端口443）

恭喜！你现在有了自己的服务器。

第二步：连接服务器并部署网站

Google Cloud用户：通过浏览器连接

  1. 在你创建的实例页面，点击"SSH"按钮
  2. 会打开一个黑色的命令行窗口，这就是你的服务器

阿里云用户：通过远程连接

方法1：使用阿里云控制台

  1. 在ECS管理控制台，找到你的实例
  2. 点击"远程连接"
  3. 选择"通过Workbench远程连接"
  4. 输入用户名：root
  5. 输入你设置的密码

方法2：使用SSH工具（推荐）

  • Windows用户：下载安装PuTTY
  • Mac/Linux用户：直接使用终端

连接命令：

ssh root@你的服务器公网IP

安装Web服务器

在命令行窗口输入以下命令（一行一行来）：

# 更新系统
sudo apt update

# 安装Apache服务器
sudo apt install apache2 -y

# 启动Apache服务
sudo systemctl start apache2

什么是HTTP服务器？

HTTP服务器就是一个程序，它的工作是：

  1. 监听网络请求（比如有人想访问你的网站）
  2. 找到对应的文件（你的HTML页面）
  3. 把文件内容发送给访问者的浏览器

Apache就是最流行的HTTP服务器软件之一。

什么是端口？

端口就像服务器上的门牌号。服务器有很多个端口（0-65535），不同的服务使用不同的端口：

  • 端口80：HTTP网站的标准端口
  • 端口443：HTTPS网站的标准端口
  • 端口22：SSH连接的端口

当你访问网站时，浏览器默认连接80端口。

第三步：创建你的第一个网页

创建HTML文件

在服务器命令行中输入：

# 进入网站文件夹
cd /var/www/html

# 备份默认页面
sudo mv index.html index.html.backup

# 创建新的首页
sudo nano 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>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 50px;
        }
        h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }
        p {
            font-size: 1.2em;
        }
        button {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1em;
            border-radius: 25px;
            cursor: pointer;
            margin-top: 20px;
        }
        button:hover {
            background: #ff5252;
        }
    </style>
</head>
<body>
    <h1>Hello World! 🌍</h1>
    <p>恭喜你！这是你的第一个网站</p>
    <p>现在时间是：<span id="time"></span></p>
    <button onclick="showMessage()">点击我</button>

    <script>
        // JavaScript代码
        function showMessage() {
            alert('欢迎来到我的网站！');
        }
        
        function updateTime() {
            const now = new Date();
            document.getElementById('time').textContent = now.toLocaleString();
        }
        
        // 每秒更新时间
        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>
</html>

按 Ctrl + X，然后按 Y，最后按 Enter 保存文件。

第四步：设置网络访问权限

Google Cloud用户：配置防火墙

# 允许HTTP流量
sudo ufw allow 'Apache Full'

# 启用防火墙
sudo ufw enable

在Google Cloud控制台设置：

  1. 回到Google Cloud控制台
  2. 点击左侧菜单"VPC网络" > "防火墙"
  3. 确保有允许HTTP流量的规则（通常默认就有）

阿里云用户：检查安全组

阿里云的安全组在创建服务器时我们已经配置过了，如果访问有问题，可以：

  1. 进入ECS控制台
  2. 点击实例名称 > 安全组
  3. 确认80端口规则存在且启用

如果没有80端口规则，按照第一步中的安全组配置方法添加。

第五步：在浏览器中查看你的网站

Google Cloud用户

  1. 回到你的虚拟机实例页面
  2. 复制"外部IP"地址（比如：34.80.123.45）
  3. 在浏览器地址栏输入这个IP地址
  4. 按回车

阿里云用户

  1. 回到ECS管理控制台
  2. 在实例列表中找到"公网IP"（比如：47.96.123.45）
  3. 在浏览器地址栏输入这个IP地址
  4. 按回车

🎉 恭喜！你应该能看到你的"Hello World"网站了！

如果访问不了，检查以下几点：

  • 确认Apache服务已启动：sudo systemctl status apache2
  • 确认防火墙/安全组配置正确
  • 确认IP地址复制正确

第六步：获取域名（可选）

免费域名选项

  • Freenom：提供免费的.tk、.ml等域名
  • GitHub Pages：如果你把代码放在GitHub上，可以获得xxx.github.io的免费域名

购买域名

推荐平台：

  • 阿里云：便宜，支持支付宝
  • 腾讯云：价格合理
  • GoDaddy：国际知名

域名购买后，需要设置DNS解析，把域名指向你服务器的IP地址。

代码解释：HTML、CSS、JavaScript到底是什么？

HTML - 网页的骨架

<h1>Hello World! 🌍</h1>  <!-- 这是一级标题 -->
<p>恭喜你！这是你的第一个网站</p>  <!-- 这是段落 -->

HTML用标签来标记内容：

  • <h1> 表示标题
  • <p> 表示段落
  • <button> 表示按钮

CSS - 网页的化妆师

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

CSS控制样式：

  • background 设置背景色
  • color 设置文字颜色
  • font-size 设置字体大小

JavaScript - 网页的大脑

function showMessage() {
    alert('欢迎来到我的网站！');
}

JavaScript让网页有交互功能：

  • 点击按钮弹出提示
  • 实时显示时间
  • 响应用户操作

常见问题解答

Q: Google Cloud和阿里云选哪个？ A:

  • 国内用户推荐阿里云：速度快，支付方便，中文服务
  • 想学习国际化技术推荐Google Cloud：免费额度大，技术文档丰富
  • 预算考虑：Google Cloud免费额度更多，阿里云新人优惠也很便宜

Q: 服务器会一直收费吗？ A: Google Cloud每月有免费额度，小网站够用。阿里云新人有优惠价格。超出免费额度才收费。

Q: 网站访问速度慢怎么办？ A: 可以选择离你更近的服务器区域，或者使用CDN加速。

Q: 忘记服务器密码怎么办？ A: Google Cloud可以通过浏览器直接SSH连接，不需要记密码。

Q: 网站被攻击了怎么办？ A: 定期更新系统，使用HTTPS，设置防火墙。对于新手，这些风险很小。

下一步学什么？

  1. 学习更多HTML标签：表格、表单、链接等
  2. 深入CSS：响应式设计、动画效果
  3. JavaScript进阶：处理表单、API调用
  4. 使用框架：Vue.js、React等让开发更高效
  5. 数据库：MySQL、PostgreSQL存储数据
  6. 后端语言：Python、Node.js处理业务逻辑

总结

现在你已经拥有了自己的网站！虽然很简单，但你已经掌握了网站开发的基本流程：

  1. ✅ 准备服务器
  2. ✅ 编写网页代码
  3. ✅ 部署到服务器
  4. ✅ 通过浏览器访问

这就是所有网站的基本原理，从个人博客到淘宝、微信，本质上都是这个流程，只是复杂程度不同而已。

记住：每个大神都是从"Hello World"开始的。继续学习，你也能做出酷炫的网站！

*如果这篇文章对你有帮助，请点个赞支持一下！有问题欢迎在评论区讨论

avatar
文章
阅读
粉丝