第十一章:项目实战:创建个人博客
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- Modified on
- Reading time
- 6 分钟
阅读:.. 评论:..
在本章节中,我们将结合前面所学的 HTML 知识,通过一步一步的实战指导,教你如何创建一个简单但功能完整的个人博客网页。这不仅能巩固你的 HTML 基础,还能让你体验到完成一个项目的成就感。
章节内容
- 项目介绍与规划
- 页面结构与布局
- 内容填充与样式美化
- 部署与发布
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>© 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>© 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>© 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>© 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>© 2024 我的个人博客</p> </footer> </body> </html>
4. 部署与发布
将项目托管到 GitHub
- 创建一个新的 GitHub 仓库。
- 将项目推送到 GitHub 仓库。
git init git add . git commit -m "Initial commit" git remote add origin <your-repository-url> git push -u origin master
使用 GitHub Pages 部署博客
- 在 GitHub 仓库的设置中,找到 "GitHub Pages" 部分。
- 选择 "main" 分支作为源,然后保存。
- 访问提供的 GitHub Pages URL,查看你的网站。
使用 Netlify 或 Vercel 进行部署
- 创建一个 Netlify 或 Vercel 账号。
- 连接你的 GitHub 仓库。
- 部署项目,Netlify 和 Vercel 将自动生成并提供一个 URL。
通过这一章的学习,你已经掌握了如何从零开始创建一个个人博客网页。希望这个实战项目能帮助你巩固所学知识,提升实际开发能力。接下来,我们将继续深入学习 HTML 的最佳实践,提高你的编码水平和开发效率。