个人技术博客 - 从零搭建到云端部署

项目愿景：打造一个现代化、高性能、功能完善的个人技术博客，作为技术分享与个人品牌展示的平台。通过 Hexo 静态站点生成器与 Cloudflare 全球 CDN 的结合，实现毫秒级访问体验。

🏗️ 核心功能模块

1. 响应式主题设计

基于 Tailwind CSS 深度定制的博客主题，提供优雅的阅读体验。

• 深色/浅色模式: 自动适配系统主题偏好，支持手动切换
• 响应式布局: 完美适配桌面端、平板与移动设备
• 流畅动画: CSS3 过渡动画，提升交互体验

2. 作品集展示系统

专门设计的 Portfolio 页面，以卡片形式展示项目作品。

• 项目卡片: 缩略图、标签、日期、GitHub 链接一目了然
• 分类筛选: 支持按技术栈或项目类型筛选
• 详情页面: 每个项目都有独立的详细介绍页

3. 简历密码保护

为个人简历页面添加前端密码验证，保护隐私信息。

• 密码验证: 访问简历需输入授权密码
• 会话记忆: 同一浏览器会话内无需重复验证
• 双语支持: 中英文简历一键切换

4. Cloudflare 全球部署

利用 Cloudflare Pages 实现自动化部署与全球 CDN 加速。

• Git 集成: 推送代码自动触发构建部署
• 自定义域名: 绑定个人域名，支持 HTTPS
• 边缘缓存: 全球 300+ 节点，访问速度极快
  

🛠️ 技术架构

前端技术栈

• Hexo: 快速、简洁的静态博客框架
• Tailwind CSS: 原子化 CSS 框架，高效定制样式
• EJS 模板: 灵活的模板引擎，支持组件化开发

部署架构

• GitHub: 私有仓库托管源代码
• Cloudflare Pages: 自动构建与全球 CDN 分发
• Cloudflare Workers: 边缘计算支持

特色功能实现

• 密码保护: 基于 JavaScript + sessionStorage 的前端验证
• 双语切换: 通过 EJS 条件渲染实现中英文页面切换
• SEO 优化: sitemap.xml、meta 标签、结构化数据

📁 项目结构

1
2
3
4
5
6
7
8
9
10
11
12

blog/
├── source/
│   ├── _posts/          # 博客文章
│   ├── about/           # 关于页面
│   ├── portfolio/       # 作品集页面
│   ├── resume/          # 中文简历
│   └── resume-en/       # 英文简历
├── themes/
│   └── tailwind-blog/   # 自定义主题
│       ├── layout/      # 页面模板
│       └── source/      # 静态资源
└── _config.yml          # Hexo 配置

📈 项目亮点总结

1. 现代化设计: Tailwind CSS 打造的简洁优雅界面
2. 隐私保护: 简历页面密码验证，保护个人信息
3. 国际化支持: 中英文双语简历，一键切换
4. 自动化部署: Git 推送即部署，无需手动操作
5. 高性能: Cloudflare 全球 CDN，毫秒级响应

这个博客不仅是技术分享的平台，更是我全栈开发能力的实践证明。从前端设计到后端部署，每一个细节都经过精心打磨。欢迎访问体验！