快速入门：搭建现代化博客

🚀 前言

在这篇教程中，我将分享如何使用纯 HTML、CSS 和 JavaScript 搭建一个现代化的个人博客， 并将其部署到 Cloudflare Pages 上。整个过程不需要安装任何依赖，也不需要复杂的构建工具。

准备工作

你需要准备以下内容：

• 一个 GitHub 账号
• 一个 Cloudflare 账号（免费）
• 一个代码编辑器（推荐 VS Code）
• 基础的 HTML/CSS 知识

第一步：创建项目结构

首先，创建以下文件结构：

my-blog/
├── index.html      # 首页
├── styles.css      # 样式文件
├── script.js       # 交互脚本
├── posts/          # 博客文章
│   └── hello.html
├── _headers        # Cloudflare 配置
└── _redirects      # 重定向规则

第二步：编写 HTML

创建 index.html 作为博客首页。记得使用语义化的 HTML 标签， 如 <header>、<nav>、<article> 等。

第三步：设计 CSS

现代化博客的 CSS 要点：

• CSS 变量 - 使用 :root 定义主题颜色
• 暗色主题 - 深色背景更护眼，也更有科技感
• 玻璃拟态 - 使用 backdrop-filter: blur()
• 渐变色 - 让设计更有层次感
• 响应式 - 使用媒体查询适配移动端

第四步：部署到 Cloudflare Pages

部署步骤非常简单：

1. 将代码推送到 GitHub 仓库
2. 登录 Cloudflare Dashboard
3. 进入 Pages → Create a project
4. 连接你的 GitHub 仓库
5. 构建设置保持默认（留空即可）
6. 点击 Deploy！

Cloudflare Pages 提供免费的托管服务，包括自动 HTTPS、全球 CDN 加速， 以及每次 git push 自动部署的功能。

总结

恭喜你！现在你已经拥有了一个现代化的个人博客。虽然它看起来简单， 但它拥有快速的加载速度、优雅的设计，以及零成本的托管方案。

下一步，你可以考虑添加更多功能，比如评论系统（使用 Giscus）、 搜索功能、RSS 订阅等。记住，简单往往是最好的选择。