本文关键词：简单的个人网页代码
很多刚入行或者想搞点副业的朋友，一听到“写网页”就头大，觉得那是高深莫测的黑魔法，得报个几万块的培训班才行。别扯淡了，真不是那么回事。我干了八年前端，见过太多人把简单问题复杂化。今天我不讲那些虚头巴脑的理论，就聊聊怎么用最笨、最直接的方法，搞出一个能看的简单的个人网页代码，让你在这个互联网时代有个属于自己的“地盘”。
先说个真事儿。上个月有个做设计的朋友找我，说他搞了个作品集网站，结果全是模板套的，改个颜色都要找客服，慢得要死，而且还得每年交几百块服务费。我看了下他的需求，其实就是展示几张图，留个联系方式。我说你花两天时间，我教你写个静态页面，终身免费，还不用看任何人脸色。他半信半疑，结果搞完后，那叫一个爽，加载速度飞快，SEO效果还比那些SaaS平台好得多。
为啥要自己写？因为掌控权在你手里。那些平台说封号就封号，你的数据不在自己手里，就像租房子，房东随时能赶你走。自己写代码，哪怕只是简单的个人网页代码，也是你资产的一部分。
咱们不整那些复杂的框架，什么React、Vue先放一边，对于个人展示页，HTML+CSS足矣。记住，越简单越稳定。
第一步，准备工具。别去下载那些臃肿的IDE，对于新手，VS Code或者甚至记事本都行。新建一个文件夹，叫my-site，里面建两个文件：index.html和style.css。这就够了，极简主义。
第二步，写骨架。打开index.html，别慌，复制下面这段基础结构。这是网页的根，就像房子的地基。
`html
一个热爱技术的普通人
这里写你的简介，不用太长，真诚点。
© 2023 版权所有
`
注意看，meta标签里的charset一定要设成UTF-8，不然中文全是乱码，这坑我踩过，别重蹈覆辙。
第三步，加点颜值。打开style.css，这时候你的页面还是白底黑字，丑得没法看。加点CSS让它清爽点。
`css
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
max-width: 800px;
margin: auto;
background: #fff;
margin-top: 20px;
}
footer {
text-align: center;
padding: 10px;
background: #333;
color: #fff;
margin-top: 20px;
}
`
这段代码把页面居中，加了点内边距，看着就不那么挤了。这就是简单的个人网页代码的魅力，改几个数字，效果天差地别。
第四步，部署上线。很多人写到这就停了，觉得“我本地能看就行”。错！互联网的意义在于分享。推荐用GitHub Pages，完全免费，绑定个自定义域名，逼格瞬间拉满。上传代码，等待几分钟，你的网址就能全球访问了。
最后说点心里话。别总想着一步登天，先做出个能用的东西，再慢慢优化。SEO优化、响应式适配，都是后面事儿。现在的你，只需要把这段简单的个人网页代码跑起来，看着它在浏览器里呈现出来，那种成就感，比打十个游戏都爽。
别犹豫，今晚就动手。哪怕写得再烂，那也是你自己的作品。在这个复制粘贴泛滥的年代，亲手敲下的每一行代码，都是你存在的证明。
