前端开发

从零搭建科技风个人博客

2026-04-06

HTML CSS 博客

在当今数字时代，拥有一个个人博客是展示个人技能、分享知识和建立个人品牌的重要方式。本文将带你从零开始，使用 HTML、CSS 和 JavaScript 搭建一个具有科技感的个人博客网站。

1. 项目规划

在开始编码之前，我们需要先规划博客的结构和功能：

首页：展示最新文章、个人信息和分类标签
文章页面：展示完整的文章内容
分类页面：按分类展示文章
关于页面：个人介绍和联系方式

2. 技术栈选择

为了保持简单和高效，我们选择以下技术栈：

HTML5：构建页面结构
CSS3：实现样式和响应式设计
JavaScript：添加交互功能
Font Awesome：提供图标支持

3. 页面结构实现

3.1 基本 HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎来到薛磊的博客 | 技术·代码·未来</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <!-- 导航栏内容 -->
  </header>
  
  <!-- 主体内容 -->
  <main class="container main-content">
    <!-- 文章列表 -->
  </main>
  
  <!-- 底部 -->
  <footer>
    <!-- 底部内容 -->
  </footer>
  
  <script src="script.js"></script>
</body>
</html>

3.2 响应式设计

为了确保博客在不同设备上都能良好显示，我们需要实现响应式设计：

/* 响应式布局 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .blog-list {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .navbar nav ul {
    flex-direction: column;
    align-items: center;
  }
  
  .navbar nav ul li {
    margin: 10px 0;
  }
}

4. 功能实现

4.1 搜索功能

添加简单的搜索功能，让用户可以快速找到感兴趣的文章：

function searchArticles() {
  const input = document.getElementById('searchInput');
  const filter = input.value.toUpperCase();
  const articles = document.querySelectorAll('.article-card');
  
  articles.forEach(article => {
    const title = article.querySelector('h3').textContent.toUpperCase();
    const excerpt = article.querySelector('.excerpt').textContent.toUpperCase();
    
    if (title.includes(filter) || excerpt.includes(filter)) {
      article.style.display = '';
    } else {
      article.style.display = 'none';
    }
  });
}

4.2 文章卡片设计

设计美观的文章卡片，提升用户体验：

.article-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

5. 部署与优化

5.1 本地测试

使用 Python 内置的 HTTP 服务器进行本地测试：

python -m http.server 8000

5.2 性能优化

压缩 CSS 和 JavaScript 文件
优化图片大小和格式
使用浏览器缓存
减少 HTTP 请求

6. 总结

通过本文的步骤，你已经成功搭建了一个具有科技感的个人博客网站。这个博客包含了响应式设计、搜索功能和美观的界面，完全满足个人展示和内容分享的需求。

当然，这只是一个基础版本，你可以根据自己的需求进一步扩展功能，比如添加评论系统、文章分类筛选、深色模式等。

希望本文对你有所帮助，祝你在博客创作的道路上越走越远！

返回首页