logo

第十一章：项目实战：创建个人博客

作者
Modified on
Reading time
6 分钟阅读:..评论:..

在本章节中，我们将结合前面所学的 HTML 知识，通过一步一步的实战指导，教你如何创建一个简单但功能完整的个人博客网页。这不仅能巩固你的 HTML 基础，还能让你体验到完成一个项目的成就感。

章节内容

  1. 项目介绍与规划
  2. 页面结构与布局
  3. 内容填充与样式美化
  4. 部署与发布

1. 项目介绍与规划

项目目标

我们的目标是创建一个包含以下几个主要页面的个人博客：

  • 主页
  • 关于我
  • 博客文章列表
  • 单篇文章详情

功能需求

  • 主页：展示博客的简介和最新文章的链接。
  • 关于我：介绍博主的个人信息和背景。
  • 博客文章列表：按发布时间或分类展示所有文章。
  • 单篇文章详情：显示单篇文章的全文内容。

技术需求

  • HTML：用于构建页面的结构。
  • CSS：用于美化页面（本章节不详细讲解，但会给出简单示例）。
  • JavaScript：实现一些交互功能（本书不涉及，但读者可以自行扩展）。

2. 页面结构与布局

主页布局

首先，我们来设计主页的 HTML 结构。主页主要包含网站的标题、导航栏、博客简介和最新文章列表。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的个人博客</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>欢迎来到我的个人博客</h1>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="blog.html">博客文章</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>博客简介</h2>
        <p>欢迎光临我的个人博客，这里记录了我的学习心得和生活杂记。</p>
      </section>
      <section>
        <h2>最新文章</h2>
        <ul>
          <li><a href="post1.html">文章标题1</a></li>
          <li><a href="post2.html">文章标题2</a></li>
          <li><a href="post3.html">文章标题3</a></li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2024 我的个人博客</p>
    </footer>
  </body>
</html>

关于我页面布局

接下来是关于我页面，这个页面主要展示博主的个人信息。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关于我</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>关于我</h1>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="blog.html">博客文章</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>个人信息</h2>
        <p>你好，我是XXX，一个热爱编程和写作的博主。</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2024 我的个人博客</p>
    </footer>
  </body>
</html>

博客文章列表页面布局

博客文章列表页面用于展示所有博客文章的标题和简介。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客文章</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>博客文章</h1>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="blog.html">博客文章</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>所有文章</h2>
        <ul>
          <li>
            <h3><a href="post1.html">文章标题1</a></h3>
            <p>文章简介1...</p>
          </li>

          <li>
            <h3><a href="post1.html">文章标题1</a></h3>
            <p>文章简介1...</p>
          </li>
          <li>
            <h3><a href="post2.html">文章标题2</a></h3>
            <p>文章简介2...</p>
          </li>
          <li>
            <h3><a href="post3.html">文章标题3</a></h3>
            <p>文章简介3...</p>
          </li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2024 我的个人博客</p>
    </footer>
  </body>
</html>

单篇文章详情页面布局

单篇文章详情页面用于展示单篇文章的完整内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文章标题1</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>文章标题1</h1>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="blog.html">博客文章</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>文章副标题</h2>
        <p>这是文章的内容...</p>
        <p>更多内容...</p>
      </article>
    </main>
    <footer>
      <p>&copy; 2024 我的个人博客</p>
    </footer>
  </body>
</html>

3. 内容填充与样式美化

在我们完成了页面的基本结构和布局之后，现在我们来填充内容并使用 CSS 进行样式美化。

添加 CSS 样式

我们将创建一个名为 styles.css 的文件，并在其中添加基本的样式规则。

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 0 1rem;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

main h2 {
  font-size: 1.5rem;
  color: #333;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

更新 HTML 文件

确保所有的 HTML 文件都引用了 styles.css，以应用我们定义的样式。

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的个人博客</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>欢迎来到我的个人博客</h1>
      <nav>
        <ul>
          <li><a href="index.html">主页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="blog.html">博客文章</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>博客简介</h2>
        <p>欢迎光临我的个人博客，这里记录了我的学习心得和生活杂记。</p>
      </section>
      <section>
        <h2>最新文章</h2>
        <ul>
          <li><a href="post1.html">文章标题1</a></li>
          <li><a href="post2.html">文章标题2</a></li>
          <li><a href="post3.html">文章标题3</a></li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2024 我的个人博客</p>
    </footer>
  </body>
</html>

4. 部署与发布

将项目托管到 GitHub

  1. 创建一个新的 GitHub 仓库。
  2. 将项目推送到 GitHub 仓库。
git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repository-url>
git push -u origin master

使用 GitHub Pages 部署博客

  1. 在 GitHub 仓库的设置中，找到 "GitHub Pages" 部分。
  2. 选择 "main" 分支作为源，然后保存。
  3. 访问提供的 GitHub Pages URL，查看你的网站。

使用 Netlify 或 Vercel 进行部署

  1. 创建一个 Netlify 或 Vercel 账号。
  2. 连接你的 GitHub 仓库。
  3. 部署项目，Netlify 和 Vercel 将自动生成并提供一个 URL。

通过这一章的学习，你已经掌握了如何从零开始创建一个个人博客网页。希望这个实战项目能帮助你巩固所学知识，提升实际开发能力。接下来，我们将继续深入学习 HTML 的最佳实践，提高你的编码水平和开发效率。

< 第十章：引入与嵌入外部资源
第十二章：最佳实践 >