本文关键词：1小时教你做出个人网页

你是不是也这样？想搞个个人主页展示作品，去建站平台一看，好家伙，基础版都要几百块一年。还得绑域名，搞SSL证书，那一套流程下来，头都大了。更气人的是，想改个字体颜色，还得找客服或者看半天教程，最后发现还是不如直接手写代码来得痛快。

别慌，今天不整那些虚头巴脑的理论。咱们就聊怎么用最笨、最直接的办法，在1小时教你做出个人网页。不需要你会什么高深的前端框架，只要你会复制粘贴，就能搞定。

先说心态。很多人怕写代码，觉得那是程序员的事。其实网页本质就是HTML加CSS，就像搭积木。HTML是骨架，CSS是衣服。你不需要成为建筑大师，你只需要知道哪里放砖头，哪里刷漆。

第一步，准备工具。别去下载那些几GB的IDE，太重了。去下个VS Code，免费，轻量，插件多。装个Live Server插件，这是神器，改一行代码，浏览器自动刷新，不用你手动按F5。这步大概花5分钟，别嫌慢，工欲善其事嘛。

第二步，建文件。在桌面新建个文件夹，叫my-site。里面新建两个文件，index.html和style.css。别问为什么，这是规矩。打开index.html，写上最基础的骨架。

你好，世界

这是我的第一个网页

别盯着看，直接复制。然后打开style.css，写点样式。比如把背景改成浅灰，字改成黑色。

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

h1 {

color: #333;

}

保存，然后右键index.html，用Live Server打开。看到效果没？这就成了。别高兴太早，这太丑了。但这是基础。

第三步，加内容。把你自己的照片、简介、联系方式都塞进去。图片别用网上的，自己拍一张，或者去Unsplash找张免费的。记住，图片路径要对，不然显示不出来是个红叉，很尴尬。

这时候你可能会问，怎么布局？别用Float了，那玩意儿早过时了。用Flexbox。

.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

这一行代码下去，你的内容就垂直水平居中了。是不是很简单？这就是1小时教你做出个人网页的核心逻辑。不用纠结细节，先跑通，再优化。

第四步，部署上线。本地看着爽没用，得让别人看到。推荐用GitHub Pages，免费，稳定。注册GitHub，新建仓库，名字随便起，比如username.github.io。把刚才的文件上传上去。等个几分钟，访问你的域名，哇，世界看到了你的主页。

这里有个坑。很多人上传后打不开，记得检查文件名是不是index.html，大小写敏感，别写成Index.html。还有，图片路径要是相对路径，别用绝对路径，不然换个环境就挂了。

别追求完美。第一版肯定丑，没关系。改字体，调间距，加阴影。CSS这东西，就是调参数。觉得字太小，就调大2px。觉得间距太宽，就调小10px。一直调到你满意为止。

有人会说，这太简单了，没技术含量。对，就是简单。技术是为了服务内容的。你花几千块买的模板，可能还满是bug。自己写的，哪怕代码丑点，但每一行你都懂。以后想加个功能，改起来也快。

别听那些大V说要先学三年再动手。那是为了卖课。你动手做第一个网页的时候，就是在学。遇到问题，百度，Stack Overflow，Google。这才是真实的工作流。

最后，分享个心态。别怕代码报错。报错是好事，它在告诉你哪里错了。看懂错误信息，比看十本书都有用。

现在，打开你的编辑器。别犹豫。1小时教你做出个人网页，不是吹牛，是真的只要动手，一小时绰绰有余。剩下的时间，你可以去喝杯咖啡，或者继续折腾你的样式。

记住，完成比完美重要。先让它存在，再让它好看。你的个人品牌，从这一行代码开始。

要是还是搞不定，去GitHub上找个开源的个人主页模板，改改名字和照片，也能用。别死磕，灵活点。

好了，去干活吧。别光看文章，不动手，那都是白搭。