昨天有个粉丝私信我，说想做个个人网站展示作品，去某宝问了价，起步价800，还要每年续费。我听完直摇头。这年头，搞个纯静态页面，真没必要当冤大头。
很多新手一上来就想着用WordPress，或者找模板套。结果呢？插件装了一堆，网站卡得像个老年机，打开要三秒。其实，对于展示型需求，静态网页才是王道。速度快，安全，免费。
今天这篇个人静态网页制作教程，我不讲虚的，直接上干货。咱们不整那些高大上的框架，就用最基础的HTML和CSS。
先说工具。别去下载什么臃肿的IDE，VS Code足矣。免费，轻量，插件丰富。新建一个文件夹，里面建两个文件，index.html和style.css。这就够了。
很多人怕写代码。其实HTML就像搭积木。
这里写你的简介。不用太长，真诚点。
看，是不是很简单？这就是骨架。接下来是皮肤，也就是CSS。
在style.css里，你可以定义颜色、字体、布局。
body {
font-family: 'Helvetica Neue', sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
header {
background: #fff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
这里有个坑。很多新手喜欢把样式直接写在HTML的style属性里。千万别这么干。维护起来会让你想哭。一旦页面多了，代码乱成一锅粥，改个字体你得翻遍所有页面。
布局方面，推荐用Flexbox或者Grid。别再用float了，那是十年前的东西。Flexbox一行代码就能搞定垂直居中，比那些复杂的hack技巧好用多了。
比如，让一个div在屏幕正中间：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
简单粗暴，有效。
做完页面，怎么让人看到？别急着买服务器。GitHub Pages或者Vercel，这两个平台对静态页面极其友好。完全免费，自带HTTPS，全球CDN加速。
我有个学员，之前用国内虚拟主机，一年200块，还经常宕机。后来迁移到Vercel，不仅免费，访问速度还快了不止一倍。他那个作品集页面，现在每天自然流量有几百人，全是SEO带来的。
这里要注意SEO。虽然静态页面简单，但标题标签、描述标签、图片的alt属性，一个都不能少。
搜索引擎看不懂图片，它只看文字。alt写清楚了，才能被搜到。
另外，响应式设计必须做。现在大部分人用手机看网页。你在电脑上做得再花哨，手机上挤成一团，也是白搭。
用媒体查询（Media Queries）就能解决。
@media (max-width: 768px) {
header {
flex-direction: column;
}
}
当屏幕宽度小于768像素时，导航栏自动变成竖排。
最后说点心里话。做网站不是为了炫技，而是为了表达。很多教程教你怎么搞特效，怎么搞动画。但我建议，先做好内容。
内容才是核心。页面只是容器。
我见过太多人，花了三个月调CSS，结果内容空空如也。没人关心你的按钮圆角是4px还是5px，大家关心的是你能提供什么价值。
所以，别纠结细节太久。先上线，再迭代。
这篇个人静态网页制作教程，希望能帮你省下那几百块的冤枉钱。代码不难，难的是开始动手。
打开VS Code，新建文件，敲下第一行代码。你会发现，世界比你想象的简单。
如果有问题，评论区见。别私信问基础问题，太忙了。直接在下面留言，大家互相解答。
记住，技术是为了服务生活，不是为了制造焦虑。
祝你的网站早日上线，被更多人看到。
本文关键词：个人静态网页制作教程
