个人博客网站搭建日记(一)

title: “个人博客网站搭建日记(一)” date: 2025-11-19T16:00:00+08:00 lastmod: 2025-01-19T20:00:00+08:00 draft: false author: “YEYUbaka” description: “从个人主页到完整博客网站的搭建过程” tags:

博客
技术
Hugo
网站搭建
web categories:
技术分享 cover: image: “images/posts/web1.jpeg” relative: true alt: “好看爱看” caption: "" showToc: true tocOpen: true

前言

一直想拥有一个属于自己的网站，既能展示个人作品，又能记录学习心得和技术思考。正好最近薅到了阿里云（爸爸）的2h2g服务器,经过几天的折腾，终于完成了从开源个人模板主页到完整博客网站的搭建。这篇文章记录下搭建过程，希望能给有同样需求的朋友一些参考。后续还会持续更新。

项目背景

最初的项目是一个简洁的开源个人主页home.github.io-1.0.7，基于静态 HTML 页面，展示个人简介和社交链接。随着内容越来越多，发现需要一个专门的博客系统来管理文章。

技术选型

静态网站生成器：Hugo

在和AI激情辩论下：经过对比 Jekyll、Hexo、Hugo 等主流静态网站生成器，最终选择了 Hugo，原因如下：

✅ 极快的构建速度：Hugo 用 Go 语言编写，构建速度远超其他工具
✅ 丰富的主题生态：有大量高质量主题可选
✅ Markdown 原生支持：写作体验友好
✅ 无需数据库：纯静态文件，部署简单
✅ 活跃的社区：文档完善，问题容易解决

主题选择：PaperMod

选择了 PaperMod 主题，这是一个基于 Hugo 的现代化主题，具有：

🎨 简洁美观的设计
🌙 内置夜间模式
📱 完全响应式
🔍 内置搜索功能
📊 支持文章统计
🏷️ 完善的分类和标签系统

搭建过程

1. 初始化 Hugo 项目

1
2
3
4
5
6
7
# 在现有项目目录下创建 blog 子目录
hugo new site blog
cd blog

# 添加 PaperMod 主题（使用 Git Submodule）
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/paper

2. 配置基础设置

编辑 config.toml，配置网站基本信息：

1
2
3
4
5
6
7
8
baseURL = 'http://localhost:1313/blog/'
languageCode = 'zh-cn'
hasCJKLanguage = true
title = "YEYU的blog"
theme = "paper"

[author]
  name = "YEYUbaka"

3. 集成音乐播放器

在主页 index.html 中集成了 APlayer 和 MetingJS，实现网易云音乐播放列表：

1
2
3
4
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<div id="aplayer" class="aplayer" data-id="3187536304" data-server="netease" data-type="playlist"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

遇到的问题：

播放器被遮罩层遮挡 → 通过设置 z-index: 9999 解决
浏览器阻止自动播放 → 移除 data-autoplay 属性，改为用户手动播放

4. 添加天气组件

集成了心知天气（Seniverse） API，在博客导航栏下方显示实时天气：

1
2
3
4
5
6
7
// 自定义天气组件
const config = {
    apiKey: 'apikey',
    location: 'wuhan',
    language: 'zh-Hans',
    unit: 'c'
};

优化过程：

最初使用官方 iframe 插件，但无法自定义样式
改为使用 API 方式，实现完全自定义的天气卡片
添加了蓝灰渐变背景，适配明暗两种主题模式

5. 页面布局优化

目录（TOC）右侧固定

通过自定义 CSS，将文章目录固定在页面右侧，方便阅读长文：

1
2
3
4
5
6
7
8
.post-single .toc {
    position: fixed;
    top: 130px;
    right: 40px;
    width: 260px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

返回顶部按钮

添加了自定义的返回顶部按钮，带有平滑滚动动画效果。

6. 备案号添加

根据国内网站要求，在所有页面底部添加了备案号：

1
© 2025 YEYU的blog · 鄂ICP备2025159185号-1 · Powered by Hugo & PaperMod

7. 关于页面优化

创建了详细的关于页面（about.md），包括：

个人简介
技能栈分类展示
技术图标展示（使用 Flexbox 布局，支持响应式换行）
GitHub 统计图表
联系方式

部署到 Windows 服务器

服务器环境

操作系统：Windows Server
Web 服务器：IIS 10
部署方式：静态文件部署

部署步骤

构建静态文件
1 2
cd blog hugo --minify
生成的文件在 public/ 目录
配置 IIS
- 创建新网站，指向 public 目录
- 设置默认文档为 index.html
- 配置 URL 重写规则（处理 Hugo 的 clean URLs）
自动化脚本
创建了 PowerShell 脚本 start-iis.ps1，实现一键启动网站：
- 检查 IIS 服务状态
- 检查应用程序池
- 启动网站
- 诊断绑定冲突

遇到的问题

端口冲突：默认网站占用 80 端口 → 停止默认网站或修改端口
应用程序池未启动 → 脚本中添加自动启动逻辑
绑定冲突 → 添加详细的诊断和修复功能

项目结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
home.github.io-1.0.7/
├── index.html              # 主页
├── 404.html                # 404 错误页
├── assets/                 # 静态资源
├── blog/                   # Hugo 博客
│   ├── content/
│   │   ├── posts/          # 文章目录
│   │   └── about.md        # 关于页面
│   ├── layouts/
│   │   └── partials/       # 自定义模板
│   ├── assets/
│   │   └── css/
│   │       └── extended/
│   │           └── custom.css  # 自定义样式
│   ├── static/
│   │   └── js/
│   │       └── weather.js  # 天气组件脚本
│   ├── themes/
│   │   └── paper/          # PaperMod 主题
│   ├── config.toml         # Hugo 配置
│   └── public/             # 构建输出目录
└── start-iis.ps1           # IIS 启动脚本

功能特性总结

已实现功能

✅ 完整的博客系统（文章、分类、标签、归档）
✅ 音乐播放器集成
✅ 实时天气显示
✅ 响应式设计，支持移动端
✅ 明暗主题切换
✅ 文章目录（TOC）右侧固定
✅ 返回顶部按钮
✅ 备案号显示
✅ SEO 优化
✅ 关于页面
✅ Windows 服务器部署

未来计划

添加评论系统（考虑 Giscus 或 Valine）
集成 Google Analytics
添加 RSS 订阅
优化搜索功能
添加友链页面
实现文章阅读量统计
添加文章分享功能

技术栈总结

静态网站生成器：Hugo
主题：PaperMod
前端：HTML、CSS、JavaScript
音乐播放器：APlayer + MetingJS
天气 API：心知天气（Seniverse）
部署：IIS（Windows Server）
自动化：PowerShell

心得体会

选择合适的工具很重要：Hugo 的构建速度确实很快，大大提升了开发效率
主题选择要慎重：好的主题能节省大量开发时间，PaperMod 的设计和功能都很完善
~~模板真好用嘻嘻😁~~
自定义要适度(~~理科生噩梦~~)：在主题基础上进行适度自定义，既能满足需求，又不会过度复杂化
部署要考虑实际环境：Windows 服务器部署虽然不如 Linux 常见(~~还是太卡了，技术不到位还不会Linux~~)，但通过脚本自动化也能很好地管理
持续优化：网站搭建不是一蹴而就的，需要根据实际使用情况不断优化
~~好事多磨!~~

参考资源

结语

经过几天的折腾，终于完成了博客网站的搭建。虽然过程中遇到了不少问题，但通过查阅文档、搜索解决方案，最终都一一解决了。现在有了一个功能完善、设计美观的个人博客，可以开始记录和分享自己的技术学习和生活思考了。

如果你也在考虑搭建个人博客，希望这篇文章能给你一些帮助。如果有什么问题，欢迎通过邮件或 GitHub 联系我！

相关链接：

前言#

项目背景#

技术选型#

静态网站生成器：Hugo#

主题选择：PaperMod#

搭建过程#

1. 初始化 Hugo 项目#

2. 配置基础设置#

3. 集成音乐播放器#

4. 添加天气组件#

5. 页面布局优化#

目录（TOC）右侧固定#

返回顶部按钮#

6. 备案号添加#

7. 关于页面优化#

部署到 Windows 服务器#

服务器环境#

部署步骤#

遇到的问题#

项目结构#

功能特性总结#

已实现功能#

未来计划#

技术栈总结#

心得体会#

参考资源#

结语#

💬 评论

前言