零基础搭建个人网页全攻略

构建一个仅使用 HTML、CSS 和 JavaScript 的个人网站或博客，这种技术栈通常被称为“静态网站”。它无需后端服务器和数据库，部署简单、成本低廉且性能出色。下面我将从，提供一个完整的实战教程。

迷恋666

548人浏览 · 2026-04-26 13:15:21

迷恋666 · 2026-04-26 13:15:21 发布

构建一个仅使用 HTML、CSS 和 JavaScript 的个人网站或博客，这种技术栈通常被称为“静态网站”。它无需后端服务器和数据库，部署简单、成本低廉且性能出色。下面我将从规划、设计、开发到部署，提供一个完整的实战教程。

一、项目规划与结构设计

在编写代码前，清晰的规划是成功的一半。一个典型的个人博客网站应包含以下核心页面和功能模块：

页面/模块	核心功能	技术实现要点
首页 (index.html)	展示博主简介、最新文章列表、导航	HTML 结构，CSS 布局，JS 动态加载文章列表
文章列表页 (blog.html)	按时间或分类展示所有文章摘要	利用 JS 读取本地数据（如 JSON）并渲染列表
文章详情页 (post.html)	展示单篇文章的完整内容	通过 URL 参数（如 `?id=1`）识别文章，JS 加载对应内容
关于页 (about.html)	个人介绍、技能树、联系方式	静态 HTML 与 CSS 样式
导航栏 (Navigation)	全站页面跳转	固定在页面顶部，使用 CSS Flexbox/Grid 布局
页脚 (Footer)	版权信息、社交媒体链接	固定在页面底部

项目目录结构建议如下：

my-personal-blog/
├── index.html          # 首页
├── blog.html           # 文章列表页
├── post.html           # 文章详情页（模板）
├── about.html          # 关于页
├── css/
│   └── style.css       # 主样式文件
├── js/
│   ├── main.js         # 主逻辑文件
│   └── blogData.js     # 存储文章数据的 JSON 或 JS 对象
├── images/             # 存放所有图片资源
└── posts/              # 可选：存放每篇文章的独立 HTML 或 Markdown 文件

二、核心页面开发 (HTML + CSS)

我们以首页和导航栏为例，展示基础代码实现。

1. 通用导航栏 (包含在每一个 HTML 文件中)

<!-- 在 <body> 标签开始后引入 -->
<header class="site-header">
  <nav class="navbar">
    <div class="logo">
      <a href="index.html">我的博客</a>
    </div>
    <ul class="nav-links">
      <li><a href="index.html">首页</a></li>
      <li><a href="blog.html">文章</a></li>
      <li><a href="about.html">关于我</a></li>
    </ul>
    <button class="menu-toggle" aria-label="切换菜单">☰</button>
  </nav>
</header>

/* css/style.css */
/* 基础重置与变量 */
:root {
  --primary-color: #3498db;
  --text-color: #333;
  --bg-color: #f9f9f9;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: var(--text-color); background: var(--bg-color); }

/* 导航栏样式 */
.site-header {
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}
.logo a {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
  text-decoration: none;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s;
}
.nav-links a:hover {
  color: var(--primary-color);
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 响应式设计：移动端菜单 */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    padding: 1rem;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }
  .nav-links.active {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
}

2. 首页主体内容示例

<!-- index.html 的主体部分 -->
<main class="container">
  <section class="hero">
    <h1>欢迎来到我的技术博客</h1>
    <p>这里分享前端开发、编程心得与生活感悟。</p>
  </section>

  <section class="intro">
    <h2>关于博主</h2>
    <p>一名热爱编程的软件工程师，专注于 Web 前端技术与用户体验设计。</p>
    <a href="about.html" class="btn">了解更多</a>
  </section>

  <section class="recent-posts">
    <h2>最新文章</h2>
    <div id="post-list" class="posts-grid">
      <!-- 文章列表将由 JavaScript 动态生成 -->
    </div>
  </section>
</main>

<footer class="site-footer">
  <p>© 2023 我的个人博客. 保留所有权利。</p>
  <div class="social-links">
    <a href="#">GitHub</a> | <a href="#">Twitter</a> | <a href="#">Email</a>
  </div>
</footer>

<script src="js/main.js"></script>

三、动态功能实现 (JavaScript)

静态网站的核心动态需求是内容管理。我们通过 JavaScript 来管理和渲染文章数据。

1. 创建文章数据源
在 js/blogData.js 中，我们用一个 JavaScript 数组来模拟数据库。

// js/blogData.js
const blogPosts = [
  {
    id: 1,
    title: "HTML5 语义化标签详解",
    excerpt: "本文将深入探讨 HTML5 新增的语义化标签，如 &lt;header&gt;, &lt;article&gt;, &lt;section&gt; 等，并说明它们如何提升网页的可访问性和 SEO。",
    content: "<p>这里是文章的完整HTML内容...</p>",
    author: "作者名",
    date: "2023-10-27",
    tags: ["HTML5", "前端基础"],
    coverImage: "images/post1-cover.jpg"
  },
  {
    id: 2,
    title: "CSS Grid 布局入门指南",
    excerpt: "学习如何使用 CSS Grid 创建复杂的二维布局，通过实例快速掌握 grid-template-columns, grid-area 等核心属性。",
    content: "<p>这里是另一篇文章的完整内容...</p>",
    author: "作者名",
    date: "2023-10-20",
    tags: ["CSS3", "布局"],
    coverImage: "images/post2-cover.jpg"
  },
  // ... 可以继续添加更多文章
];

2. 在首页动态渲染最新文章列表
在 js/main.js 中编写逻辑。

// js/main.js
document.addEventListener('DOMContentLoaded', function() {
  // 1. 移动端菜单切换
  const menuToggle = document.querySelector('.menu-toggle');
  const navLinks = document.querySelector('.nav-links');
  if(menuToggle && navLinks) {
    menuToggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });
  }

  // 2. 在首页渲染文章列表
  const postListContainer = document.getElementById('post-list');
  if (postListContainer && typeof blogPosts !== 'undefined') {
    // 只显示最新的3篇文章
    const recentPosts = blogPosts.slice(0, 3);
    renderPosts(recentPosts, postListContainer);
  }

  // 渲染文章的通用函数
  function renderPosts(posts, container) {
    container.innerHTML = ''; // 清空容器
    posts.forEach(post => {
      const postElement = document.createElement('article');
      postElement.className = 'post-card';
      postElement.innerHTML = `
        <img src="${post.coverImage}" alt="${post.title}" class="post-cover">
        <div class="post-content">
          <h3><a href="post.html?id=${post.id}">${post.title}</a></h3>
          <p class="post-meta">${post.date} • ${post.tags.join(', ')}</p>
          <p class="post-excerpt">${post.excerpt}</p>
          <a href="post.html?id=${post.id}" class="read-more">阅读全文</a>
        </div>
      `;
      container.appendChild(postElement);
    });
  }
});

3. 在文章详情页根据URL参数加载对应内容
post.html 页面本身是静态的，但内容由 JS 动态填充。

// 在 post.html 中引入的 JS 逻辑
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const postId = parseInt(urlParams.get('id'));

  if (postId && typeof blogPosts !== 'undefined') {
    const post = blogPosts.find(p => p.id === postId);
    if (post) {
      // 动态设置页面标题和内容
      document.title = `${post.title} - 我的博客`;
      const articleContainer = document.getElementById('article-content');
      if(articleContainer) {
        articleContainer.innerHTML = `
          <h1>${post.title}</h1>
          <div class="post-meta">发布日期: ${post.date} | 标签: ${post.tags.join(', ')}</div>
          <div class="post-body">${post.content}</div>
        `;
      }
    } else {
      // 未找到文章的处理
      document.getElementById('article-content').innerHTML = `<h2>文章未找到</h2>`;
    }
  }
});

四、部署上线

纯 HTML/CSS/JS 网站可以免费部署在众多静态网站托管平台上。

平台	特点	免费额度	部署方式
GitHub Pages	与 GitHub 仓库无缝集成，适合技术博客	完全免费	将代码推送到 GitHub 仓库，在设置中开启 Pages
Vercel	部署速度极快，支持自动 CI/CD	完全免费（个人项目）	关联 GitHub 仓库，自动部署
Netlify	功能强大，提供表单、身份验证等扩展	完全免费（基础功能）	拖拽文件夹或关联 Git 仓库

以 GitHub Pages 为例，部署步骤：

在 GitHub 上创建一个新的仓库，例如 my-personal-blog。
将你的项目文件夹（包含所有 HTML, CSS, JS 文件）通过 Git 推送到该仓库。
进入仓库的 Settings -> Pages。
在 Source 下拉菜单中，选择你的部署分支（通常是 main 或 master）。
点击 Save。几分钟后，你的网站就会在 https://[你的用户名].github.io/my-personal-blog/ 上线。

五、进阶优化建议

使用静态站点生成器 (SSG)：当文章数量增多时，手动管理 blogData.js 会变得繁琐。可以考虑使用 Jekyll、Hugo 或 VuePress 等工具。它们允许你用 Markdown 写文章，在构建时自动生成静态 HTML 文件，但最终产物仍是纯前端文件。
添加评论系统：静态网站本身无法处理数据。可以集成第三方服务，如 Giscus（基于 GitHub Discussions）或 Utterances（基于 GitHub Issues），它们通过 GitHub 账户实现评论功能。
SEO 优化：
- 确保每个页面有唯一的 <title> 和 <meta name="description">。
- 使用语义化的 HTML5 标签。
- 为图片添加 alt 属性。
- 生成 sitemap.xml 并提交给搜索引擎。

通过以上步骤，你已经完成了一个功能完整、可部署的纯前端个人博客网站。这套方案兼顾了学习成本、开发效率和运行性能，是个人项目起步的绝佳选择。

参考来源

openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

如何为 Agent 设计好用的工具

这篇文章改变了我对"工具"的理解。快速实现工具，包装在 MCP 服务器或 DXT 中，在 Claude Code 或 Claude Desktop 中测试。这篇文章分享了 Anthropic 在实践中总结的工具设计方法论——甚至包括如何用 Claude 来优化 Claude 的工具。工具描述被加载到 Agent 的上下文中，直接引导 Agent 的行为。"，Agent 可能调用天气工具，也可能根据

openEuler 社区

Linux进程信号——像收快递一样理解 Linux 信号

openEuler 社区

Redis通信协议-RESP协议

当我们使用redis-cli执行一条命令时，背后发生了一系列精妙的通信过程。客户端如何告诉服务器它想执行什么命令？服务器又如何将“OK”这个结果准确无误地返回给客户端？这一切的奥秘，都藏在 Redis 自研的通信协议——之中。RESP 协议是 Redis 客户端与服务端之间沟通的“通用语言”。理解它，不仅能让你更深刻地认识 Redis 的工作原理，还能帮助你从零开始实现一个自己的 Redis 客户