如何创建个人博客并配置 Nginx

本文详细记录了如何从零开始创建一个现代化的个人博客网站，并使用 Nginx 进行部署的完整过程。

项目概述

本次任务是创建一个现代化、响应式的个人博客网站，并部署在 Nginx 服务器上。博客包含以下功能：

• 首页（文章列表 + 侧边栏）
• 关于页面
• 归档页面
• 文章详情页
• 暗色/亮色主题切换
• 响应式设计（适配移动端）
• 回到顶部按钮
• 移动端菜单

博客部署路径：/nginx/geren/boke

准备工作

首先检查系统环境和必要工具：

# 检查 nginx 是否安装
which nginx && nginx -v 2>&1 || echo "nginx not installed"

# 检查目标目录是否存在
ls /nginx/ 2>/dev/null || echo "/nginx/ not exists"

检查结果：

• Nginx 已安装 (版本 1.20.1)
• /nginx/ 目录不存在，需要创建

创建博客文件结构

创建博客所需的目录结构：

mkdir -p /nginx/geren/boke/{css,js,images,posts}

最终文件结构：

/nginx/geren/boke/
├── index.html
├── about.html
├── archive.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── posts/
│   └── hello-world.html
└── images/

编写 HTML 页面

首页 (index.html)

首页采用现代布局，包含：

• 固定导航栏
• 头部横幅（Hero Section）
• 文章卡片列表
• 侧边栏（个人信息、搜索、分类等）
• 页脚

关键特性：

• 使用语义化 HTML5 标签
• SEO 友好
• 支持键盘导航
• 无障碍访问

关于页面 (about.html)

关于页面展示博主信息和技术栈：

• 博主介绍
• 技能清单（网格布局）
• 联系方式
• 个人格言引用

归档页面 (archive.html)

归档页面采用时间线布局：

• 年份分组
• 时间线装饰
• 文章列表
• 日期标签

文章详情页 (posts/hello-world.html)

文章详情页包含：

• 文章标题和元信息
• 正文内容
• 代码高亮
• 引用块
• 列表格式

设计 CSS 样式

CSS 变量系统

使用 CSS 变量实现主题切换：

:root {
    /* 亮色模式变量 */
    --bg-primary: #ffffff;
    --text-primary: #212529;
    --accent: #667eea;
    /* ... */
}

[data-theme="dark"] {
    /* 暗色模式变量 */
    --bg-primary: #1a1b26;
    --text-primary: #c0caf5;
    --accent: #7aa2f7;
    /* ... */
}

响应式设计

通过媒体查询实现多设备适配：

@media (max-width: 1024px) {
    /* 平板布局 */
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* 手机布局 */
    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        background: var(--nav-bg);
    }
}

动画效果

添加平滑的动画提升用户体验：

• 导航栏滚动阴影
• 文章卡片悬停效果
• 主题切换过渡
• 元素进入动画

添加 JavaScript 交互

主题切换功能

// 读取保存的主题
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

// 主题切换按钮事件
themeToggle.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
});

移动端菜单

mobileMenuBtn.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    mobileMenuBtn.classList.toggle('active');
});

回到顶部按钮

window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
        backToTop.classList.add('visible');
    } else {
        backToTop.classList.remove('visible');
    }
});

backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

其他功能

• 搜索功能（演示版）
• 文章卡片渐入动画
• 平滑加载效果

配置 Nginx 服务器

创建 Nginx 配置文件

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  localhost;

    root /nginx/geren/boke;
    index index.html;

    charset utf-8;

    access_log /var/log/nginx/boke_access.log;
    error_log  /var/log/nginx/boke_error.log;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }
}

性能优化配置

# 静态资源缓存
location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# Gzip 压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;

安全配置

# 安全头
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;

# 禁止访问隐藏文件
location ~ /\. {
    deny all;
}

解决常见问题

问题1: 请求被默认 server 处理

现象：直接访问 http://localhost/ 返回 Nginx 测试页面，而不是博客页面。

原因：localhost 解析到 IPv6 (::1)，而原配置只监听 IPv4。

解决方案：

listen       80 default_server;
listen       [::]:80 default_server;  # 添加 IPv6 监听

问题2: 默认 server 冲突

现象：多个 server 块都声明为 default_server。

解决方案：确保只有一个 server 块有 default_server 指令，或使用更具体的 server_name 匹配。

最终测试与验证

配置测试

# 测试 Nginx 配置语法
nginx -t

# 重新加载配置
nginx -s reload

功能测试

# 测试所有页面
curl -I http://localhost/index.html
curl -I http://localhost/about.html
curl -I http://localhost/archive.html
curl -I http://localhost/posts/hello-world.html

多设备测试

• 桌面端：正常显示，响应式布局
• 平板端：侧边栏变为两列网格
• 手机端：移动端菜单，垂直布局

总结

本次个人博客项目成功实现了所有预期功能，具有以下特点：

• 现代化设计：简洁美观的 UI，良好的用户体验
• 响应式布局：完美适配各种设备
• 性能优化：Gzip 压缩，静态资源缓存
• 安全配置：安全头，访问控制
• 易于维护：模块化代码结构

博客已成功部署，可以通过 http://localhost 访问。后续可以继续添加新功能，如：

• RSS 订阅
• 评论系统
• 搜索功能增强
• 更多文章内容
• 分析统计

这个博客模板可以作为其他项目的起点，只需修改内容即可快速搭建新的网站。