个人网站制作源代码

我电脑里躺着十几个版本的个人个人主页源码，最早那份是网站2016年写的，table布局，制作背景图是源代星空闪烁的gif。现在看当然土，个人但当时我花了两周才弄明白怎么让鼠标移上去时文字变红。网站说实话，制作做个人网站的源代源代码，核心就一句话：别把它当工程，个人当日记本。网站

先别急着上框架。制作Vue、源代React这些玩意儿，个人给个人网站用纯属杀鸡用牛刀。网站我见过太多人折腾半天脚手架，制作最后页面空荡荡，就放了个"Hello World"。你需要的可能就是一个HTML文件加一个CSS文件，顶多再来个JS文件处理菜单交互。我现在的网站，三个文件加起来不到50KB，打开速度比那些动辄几兆的站点快多了。

拿我上个月给朋友改的页面举例。他要放摄影作品，要求就两条：图片大、加载快。我直接写了个纯HTML页面，用srcset做响应式图片，CSS里加一行loading="lazy"，完事。没框架，没构建工具，连jQuery都没引。他后来问我："代码就这么点？"我说对啊，你要的是展示照片，不是炫技。

配色和排版倒是值得花心思。别用那些模板站自带的渐变紫和科技蓝，刺眼又俗气。我自己的站用的是米白底配深灰字，标题用了个偏橙的暖色调——#FF6B35，这颜色调了七八次才满意。字体就系统默认栈，font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;，干净。你去看那些设计大神的个人页，往往极简到只有几行字，但每个间距都舒服。

说到布局，别迷信什么栅格系统。个人网站内容就那么多，一块"关于我"，一块"作品/文章"，一块"联系方式"，够了。我见过一个做得好的案例，整个页面就一屏，滚动时文字像翻卡片一样切换，其实原理就是CSS的position: sticky加几个scroll-margin-top，代码不到200行。

动态效果要克制。我吃过亏，以前给导航栏加了雪花飘落特效，结果CPU占用飙到30%，访客用手机打开直接卡死。现在最多用个transition: opacity 0.3s做悬停淡入。真要玩花活，CSS动画比JS流畅得多，比如那个经典的打字机效果，纯CSS用steps()就能实现，别去引什么typed.js库了。

最后说部署。别买什么云服务器，个人网站用GitHub Pages或者Vercel就够，免费还带HTTPS。把源码推上去，几分钟就能上线。我有个朋友非要用WordPress，每个月交50块主机费，后台三天两头被攻击，插件冲突白屏好几次——何苦呢。

写代码时留点个人痕迹。比如我会在源码注释里写当天的心情："2024-11-03，修了移动端菜单bug，今天风很大。"下次打开文件时看到这些，比任何功能都让人想继续维护这个站。毕竟个人网站最珍贵的不是技术，是那股"这确实是我"的劲儿。

源代码就该像手写信，有点涂改痕迹才真实。别怕代码写得不够优雅，运行起来，让朋友点开看看，比在技术论坛上被点赞重要得多。