去年我在咖啡馆认识了个插画师，她捧着iPad问我："总听人说要有个人网站，但我连域名是啥都不知道..."三个月后，她的作品集网站访问量破了五万。这故事让我意识到，建站真没想象中难，咱们这就开始吧。

一、建站前的准备工作

就像装修房子要买建材，建网站需要准备：

• 域名：你的网站地址（
• 主机空间：存放网站文件的地方
• 文本编辑器：推荐VS Code或Sublime Text
• 一杯热咖啡：写代码时的伴侣

常见主机方案对比

二、网站骨架搭建

咱们先用HTML搭建基础结构，就像盖房子的钢筋混凝土：

1. 创建基本文件

• 新建index.html
• 创建css文件夹存放样式表
• 建立images文件夹存图片

2. 基础HTML结构

在index.html输入：

欢迎来到我的世界
关于我
这里写自我介绍...

三、给网站穿上外衣

用CSS让网站变漂亮，就像挑选窗帘和墙漆：

基础样式设计

在css/style.css添加：

body {font-family: '微软雅黑', sans-serif;line-height: 1.6;max-width: 800px;margin: 0 auto;padding: 20px;header {border-bottom: 2px solid f0f0f0;margin-bottom: 40px;h1 {color: 333;font-size: 2.5em;about {background: f8f9fa;padding: 25px;border-radius: 8px;

四、让网站活起来

加入JavaScript实现交互，就像安装智能家居系统：

简单交互示例

// 点击关于板块切换背景色document.getElementById('about').addEventListener('click', function {this.style.backgroundColor = this.style.backgroundColor === 'rgb(248, 249, 250)' ? 'e2e3e5' : 'f8f9fa';});// 实时显示访问时间function showTime {const timeElement = document.createElement('div');timeElement.style.position = 'fixed';timeElement.style.bottom = '10px';timeElement.style.right = '10px';document.body.appendChild(timeElement);setInterval( => {timeElement.textContent = new Date.toLocaleTimeString;}, 1000);showTime;

五、上线你的作品

以GitHub Pages为例，跟着这三步走：

1. 在GitHub新建仓库，仓库名必须为用户名.github.io
2. 用Git把本地文件推送到仓库
3. 等待5分钟，访问你的专属域名

窗外的麻雀在电线杆上多嘴，你的第一个网站已经静静地在互联网上安了家。下次朋友问起怎么建站，记得把咖啡推到他面前："来，我教你..."