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

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

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

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

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

建设过程 基本构想

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

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

设计规划

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

框架构建

解析测试版域名，挂一个简单的页面测试

引入 Bootstrap，测试

研究了一下 Bootstrap 的文档，做出了大概的框架，开始做地图的部份

细节粗调

这一步把所有的元素都摆到位，实现各元素基本的功能。

逐步输入地图的坐标点数据

坐标点数据输入完成，简单做一下完善地图的细节

给 header 换个背景

用简单的文字先拼出各个模块大概的样子

当时的记事本草稿

Retina 处理

Retina 也就算高清视网膜屏幕的支持，作为一个果粉，这点当然不能放过。不过这个当时比较头疼，先是用了一些 jQuery 的 Retina 框架，普遍都有加载速度慢的问题。看来还是不能偷懒，只有自己写。思路是用 JavaScript 检测 devicePixelRatio，将值写入 Cookie 后刷新页面，然后用 PHP 读取该 Cookie，输出对应的图片（高清或普通）。在 Retina Macbook Pro 上测试还遇到不少奇葩问题，逐个修复后最终效果非常震撼。后来发现 iPhone 等小屏幕 Retina 设备不需要使用针对 Retina Macbook / iPad 制作的大尺寸图片，只要将普通尺寸的图片缩小即可，故给 JS 增加了检测 screenwidth，PHP 再做相应的调整，就提高了小屏幕 Retina 设备的加载速度。

响应式处理

我在响应式设计开始流行之前就已经在实际应用了，到现在已经非常熟悉，所以毫无鸭梨的快速制作调试完成。

动画制作

动画的设计和制作花费了我不少时间，既要有特色，又要够酷够炫，又不可浮夸，还要考虑性能。我本来还设计了很多动画，但实现后经过反复测试，在某些设备和浏览器下非常容易崩溃，于是又移除了很多特效。但这个联系方式的交互和动画仍是我的得意之作，在一个邮箱地址中隐藏了几个不同的联系信息，可以分别显示。

细节微调

这里优化了不少细节，譬如字体、字色、阴影、纹理、滚动条等等，均使用 CSS3 实现，包括标题文字的渐变和倒影。最后 header 背景还是选了我在甘南的尕海拍的一幅作品。

有一些略为浮夸的设计也换掉了，比如下面这两个就是被换掉的头像彩色阴影和 Apple 模块的角标

回迁上线

测试完成，从测试服务器迁回主服务器，换回域名。把网站发给位于全球各地、使用不同网络的朋友测试。

离线缓存和 Web App

说实话，这俩功能其实没有什么实际意义，因为这毕竟不是功能型网站，绝大多数访客只会访问一次，而这两个功能都是反复访问时才有用处。但是考虑到这两项技术我已经用的比较熟了，搬到这上面来也用不了多少时间，所以顺手就做了，让大家体验一下 HTML 5 离线缓存在一秒内加载完一个网页是多爽的一件事。考虑到旅行模块的地图需要动态更新，所以没有缓存它，而是用 AJAX 在页面载入完成后再加载并渲染地图。

多语言版本

一开始的计划是要做多语言版本的，包括香港粤语繁体版、台湾正体版和英文版，但到现在还没有时间制作。

常见问题 FAQ

网站上线以来，天天都有人问我各种各样的问题，现在我按问题出现的频率排序，一起回答一下。

如果还有什么问题，也可以在此评论提出。但最好在提问前先搜索一下，我不喜欢回答任何 Google 知道的问题。

你的网页设计是怎么学的？

（HTML / CSS / JavaScript / PHP / MySQL …）

我不是专业的设计师或程序猿，也没有花费太多的时间精力来学习这方面的知识，只是爱好而已。但我从小就对自己喜爱的事物有着无尽的好奇心和极强的自学、探索能力，这也是我在多个领域都能勉强算是“小有成就”的原因，嘿嘿。在网页设计方面，我几乎没有读过相关的书，只是研究优秀网站的代码，遇到不懂的就 Google。

网站用了多长时间开发？

先说说开发时间吧。我的个人网站每年都会彻底地重新设计一次，往年的更新一般都在过年前完成。但今年太忙，无奈拖至四月中旬才开工，五月中旬上线，平均每天只忙活一两个小时。这期间还心血来潮做了一个智能手表 Pebble 的应用下载平台 Pebbapps，后来发现实际意义不大，浪费了不少时间。真正花在个人网站制作上的时间应该在 20 小时左右。

网站是用什么软件做的？

问这个问题的同学一看就是对 Web 开发还没有基本的了解，理论上只要能进行文本编辑的软件都可以用作网站开发。我以前是用 Windows / Mac 自带的记事本，简简单单，没有任何复杂的功能，没有代码提示器也养成了我写代码的严谨习惯。后来做的网站 JavaScript 之类的代码多了，记事本有点眼花缭乱，就开始用 Office FrontPage，至少代码能上色了。后来在 Mac 上用 Dreamweaver 习惯之后，PC 上也开始用了，但也从来没用过其他的功能，最喜欢的就是可以把编辑器调成黑色背景。

网站的加载速度怎么这么慢？

这有两个原因：

其一，是服务器在美国，并且只有一个节点，因为我还是未成年无法备案，无法将服务器放在国内，所以我所有网站的访问速度都普遍较慢；

其二，网站本身的前端性能确实不够好，但这是网站采用大量图片和动画的代价。我曾在加载速度和展示效果间做过权衡，后来考虑到这毕竟不是功能型网站，绝大多数访客只会访问一次，所以还是将效果放在了首位。后来我也发现一些可以提高加载速度的改进方法，但现在暂时还没有时间实现。

网站能开源吗？

这个网站没有后台程序，是静态页面，所以用浏览器的开发者工具就能看到所有的代码。我的所有代码可供研究或学习之用，但最好不要直接整个复制，那样你学不到任何东西。

你真的才 17 岁？

我真没想到这个问题会有这么多人问……难道这个还能有假？我又不是李天一。（XD）

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有