起因与初衷
AMeng 是一位非常有才华的平面设计师。她一直希望有一个属于自己的线上作品集,方便展示她的设计作品,也能更好地与客户和朋友分享。作为她的另一半,我决定帮她实现这个愿望。
站点的起步
一开始我在 GitHub 上寻找适合设计师的开源个人网站模板。经过一番筛选,找到了一个结构清晰、界面简洁的 React/Next.js 项目。这个项目本身支持 MDX 文章、图片展示和响应式设计,非常适合 AMeng 的需求。
个性化定制
为了让网站更符合 AMeng 的风格,我做了如下定制:
- 根据她的品牌色和喜好调整了配色方案和字体,整体视觉更贴合她的设计理念。
- 优化了首页和作品集页面的布局,突出她的代表作。
- 增加了作品详情页,支持大图预览和项目描述,方便访客深入了解每个设计项目。
- 针对移动端做了适配,保证手机和平板浏览体验一致。
- 增加了联系表单,方便客户通过网站直接联系她。
技术选型与部署
- 站点基于 Next.js,支持静态导出,方便部署。
- 所有内容和图片都托管在 GitHub 上,方便版本管理和后续维护。
- 使用 Cloudflare Pages 进行自动化部署,每次推送到主分支都会自动构建和上线,速度快且免费。
- 域名也通过 Cloudflare 进行解析,支持 HTTPS 和全球加速。
部署流程
- 在 GitHub 上 fork 并 clone 了模板项目。
- 本地根据 AMeng 的需求进行定制和内容填充。
- 将代码推送到 GitHub 仓库。
- 绑定 Cloudflare Pages,配置自动化构建和部署。
- 配置自定义域名和 HTTPS。
- 邀请 AMeng 一起体验和完善细节。
一些小插曲
- 在适配移动端时遇到过图片加载过慢的问题,后来通过图片压缩和懒加载优化了解决方案。
- 为了让 AMeng 能方便地更新内容,我还写了简单的文档,教她如何用 Markdown 编辑作品和文章。
- 网站上线后,AMeng 很开心,也收到了不少朋友和客户的好评。
展望
后续还计划增加更多交互动效和多语言支持,让 AMeng 的作品能被更多人看到。如果你也想为身边的设计师朋友搭建个人网站,欢迎参考我们的经验!