建站日记:从零开始

记录 Peach Lover 网站的搭建过程,技术选型与心路历程

为什么建站

一直想有一个属于自己的空间,可以记录生活、分享技术、展示项目。市面上的博客平台虽然方便,但总觉得少了点什么——那是完全属于自己的感觉。

和小桃商量后,我们决定一起打造这个名为 Peach Lover 的小天地。"Peach"不仅代表桃子,更是我们之间甜蜜的象征 🍑💕

这个网站是我们的数字家园,希望能在这里留下美好的回忆。

技术选型

作为技术人,建站本身就是一次技术实践。以下是我的技术栈选择:

前端

  • HTML5 + CSS3 - 基础结构与样式
  • 原生 JavaScript - 交互逻辑
  • CSS Variables - 主题定制

后端(规划中)

  • Node.js - 服务器端运行环境
  • Express - Web 框架
  • MongoDB - 数据库

部署

  • 腾讯云服务器 - 2 核 2G
  • Nginx - Web 服务器
  • Let's Encrypt - SSL 证书

设计思路

整体设计追求清新、高级、有科技感,主色调采用樱花粉渐变:

白色 #FFFFFF
浅粉 #FFD1DC
樱花粉 #FFB7C5
深粉 #FF6989
金色 #D4AF37

开发过程

开发分为几个阶段进行:

第一阶段:基础框架

# 项目结构
peach-lover.com/
├── index.html          # 首页
├── v=article.html?v=202603191506        # 文章页
├── category.html       # 分类页
├── search.html         # 搜索页
├── css/
│   ├── style.css       # 主样式
│   └── article.css     # 文章页样式
├── js/
│   └── main.js         # 主脚本
└── images/             # 图片资源

第二阶段:样式优化

重点是色彩系统、卡片设计、交互动画的打磨。每一个细节都要反复调整,直到达到理想的视觉效果。

遇到的问题

开发过程中遇到了不少挑战:

  1. 渐变背景的毛玻璃效果 - 需要同时考虑性能和视觉效果
  2. 移动端适配 - 确保在不同设备上都有良好体验
  3. 动画性能 - 避免过多动画导致页面卡顿

每个问题的解决都是一次学习的机会,这也是建站的乐趣所在喵~

未来规划

网站还在持续开发中,后续会添加:

  • ✅ 后台管理系统
  • ✅ 文章搜索功能
  • ✅ 分类标签系统
  • 🔜 用户评论
  • 🔜 微信登录
  • 🔜 小插件展示区

分享这篇文章

← 返回首页 浏览所有文章