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 的最佳实践,提高你的编码水平和开发效率。