做个人博客这行当，我见过太多人陷在“选主题”和“调插件”的死循环里。今天不聊那些花里胡哨的CMS系统，咱们来点硬核的。直接上干货，聊聊怎么用最基础的HTML和CSS，搭一个真正属于你的、加载速度极快的简约个人博客。
很多新手一上来就搞WordPress，结果插件装了一堆，打开页面要等三秒。这体验太差了。真正的简约，不是把背景改成白色那么简单，而是代码层面的克制。我最近帮一个做设计的朋友重构了他的作品集网站，没用任何框架，纯手写。结果呢？Lighthouse评分直接飙到98分。
咱们先看结构。别整那些复杂的语义化标签堆砌，对于个人博客来说，核心就三块：头部导航、主体内容、页脚信息。
`html
第一篇博客文章标题
这里是正文内容。简约不代表简陋，而是把重点还给内容本身。
© 2023 MyBlog. All rights reserved.
`
这段代码看着简单，但里面全是细节。比如标签，不仅对SEO友好，还能让浏览器知道这是时间。再看CSS部分，这才是灵魂所在。
`css
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
.site-header {
padding: 20px 0;
border-bottom: 1px solid #eee;
margin-bottom: 40px;
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.post {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
`
注意看，我用了系统字体栈，这样在Mac和Windows上渲染速度最快，也不用额外加载字体文件。最大宽度限制在800px，这是阅读体验的黄金区间。太宽了，眼球左右扫视太累；太窄了，显得小气。
很多同行喜欢问我，这样搞会不会太简陋？我反问你，用户打开你的博客是为了看什么？是为了看你的代码结构有多复杂，还是为了看你的观点有多犀利？如果是后者，那这种简约个人博客html代码 就是最佳载体。
我有个读者，之前用重型主题，页面大小3MB。改成这种轻量级结构后，页面大小不到50KB。在4G网络下，加载时间从2.5秒缩短到了0.3秒。数据不会撒谎，用户体验的提升是立竿见影的。
当然，光有HTML和CSS还不够。你得学会怎么维护它。建议把文章数据抽离成Markdown文件，然后用简单的脚本生成HTML。这样你写文章时只需要关注内容，发布时自动转换。这种工作流一旦跑通，你会爱上这种掌控感。
别再去下载那些几百兆的“多功能博客主题”了。那些里面塞满了你永远不会用到的功能，却拖慢了你的速度。回归本质，用最简单的代码，表达最真实的想法。这才是做博客的初心。
最后提醒一点，移动端适配不能省。上面的CSS里用了max-width和margin: 0 auto，这在大多数情况下能自动居中并适配屏幕。但如果你的内容比较复杂，记得加几行媒体查询，确保在小屏幕上也能舒适阅读。
记住，代码是为你服务的，不是你去伺候代码。少即是多，这在编程里永远适用。当你删掉最后一行不必要的代码时，你会发现，世界清净了，博客也快了。
