我的个人网站是怎么做出来的

我个人网站的 2013 版上线已经两个多月了，没想到这个并没有下多少功夫去设计和制作的网站却受到了不少人的喜爱和专业设计师的抬爱，我甚至还接到了相关的工作邀请。上线第一天，单日访问量竟然超过了建站三年以来的总和。上线后，我一直都想写一篇博文，简述一下网站的建设过程。但因为工作太多，一直没有心情写，忙完后又去中国的东北地区旅行了一个月，直到今天才有时间和心情写这篇博文。

上线以来，几乎每天都有人通过 Email 和微博问我：“你的网站是怎么做出来的？”，对于如此笼统的问题，我实在不知道该如何回答。现在，这个问题的所有答案几乎都在这篇博文里。

某一天的搜索引擎入口记录里，竟然有这么奇葩的关键词

我有个强迫症，做网站到每一个关键点时都会截图留念，所以现在可以展示一个相对连续的建设过程。这里不谈域名解析和服务器搭建，也不谈 HTML、CSS 和 Javascript 的具体代码，互联网上相关的优秀文章和教程已经相当丰富，大家自行查阅即可，我不再赘述。

建设过程 基本构想

国内外很多网页设计师都建议在开工之前先画草稿（线框）图，可我从来都不画，只是在一个记事本里记下所有在脑海里一闪而过的灵感。因为我往往是在打算做一个网站的时候，脑海里就已经大概浮现出了它的样子，虽然很模糊，但我认为它没必要太清晰。很多创意的灵感都是在做的过程中发现的，所以只要脑子里有一个大概的方向就可以开工了，具体的细节部份一边做一边想就好了，没必要一开始就自己把自己的思维给框住。根据大概的构想，我先整理出了一个大概的制作流程：

基本构想 → 设计规划 → 框架构建 → 优化文字 → 细节粗调 → Retina 处理 → 响应式处理 → 动画制作 → 细节微调 → 回迁上线 → 离线缓存和 Web App → 多语言版本

设计规划

谈到设计，就不得不谈到 Bootstrap。这是我首次使用 Bootstrap 框架制作网站。其实开始我一直在犹豫要不要用它，因为它预置了很多 CSS 样式和框架，用起来太方便了，以致于我觉得会减少那种完全自己设计制作的成就感。后来由于时间紧迫，加上 Bootstrap 的风格也正好是我想要的那种，所以就采用了它。页面由七个独立模块组成，按顺序分别是：简述、旅行、摄影、创造、Apple、联系和关于，每个模块都有它自己的特点。这种模块化的设计也方便做响应式处理。