我個(gè)人網(wǎng)站的 2013 版上線(xiàn)已經(jīng)兩個(gè)多月了，沒(méi)想到這個(gè)并沒(méi)有下多少功夫去設(shè)計(jì)和制作的網(wǎng)站卻受到了不少人的喜愛(ài)和專(zhuān)業(yè)設(shè)計(jì)師的抬愛(ài)，我甚至還接到了相關(guān)的工作邀請(qǐng)。上線(xiàn)第一天，單日訪(fǎng)問(wèn)量竟然超過(guò)了建站三年以來(lái)的總和。上線(xiàn)后，我一直都想寫(xiě)一篇博文，簡(jiǎn)述一下網(wǎng)站的建設(shè)過(guò)程。但因?yàn)楣ぷ魈?，一直沒(méi)有心情寫(xiě)，忙完后又去中國(guó)的東北地區(qū)旅行了一個(gè)月，直到今天才有時(shí)間和心情寫(xiě)這篇博文。

　　上線(xiàn)以來(lái)，幾乎每天都有人通過(guò) Email 和微博問(wèn)我：“你的網(wǎng)站是怎么做出來(lái)的?”，對(duì)于如此籠統(tǒng)的問(wèn)題，我實(shí)在不知道該如何回答?，F(xiàn)在，這個(gè)問(wèn)題的所有答案幾乎都在這篇博文里。

　　某一天的搜索引擎入口記錄里，竟然有這么奇葩的關(guān)鍵詞

　　我有個(gè)強(qiáng)迫癥，做網(wǎng)站到每一個(gè)關(guān)鍵點(diǎn)時(shí)都會(huì)截圖留念，所以現(xiàn)在可以展示一個(gè)相對(duì)連續(xù)的建設(shè)過(guò)程。這里不談?dòng)蛎馕龊头?wù)器搭建，也不談 HTML、CSS 和 JavaScript 的具體代碼，互聯(lián)網(wǎng)上相關(guān)的優(yōu)秀文章和教程已經(jīng)相當(dāng)豐富，大家自行查閱即可，我不再贅述。

　　建設(shè)過(guò)程 基本構(gòu)想

　　國(guó)內(nèi)外很多網(wǎng)頁(yè)設(shè)計(jì)師都建議在開(kāi)工之前先畫(huà)草稿(線(xiàn)框)圖，可我從來(lái)都不畫(huà)，只是在一個(gè)記事本里記下所有在腦海里一閃而過(guò)的靈感。因?yàn)槲彝窃诖蛩阕鲆粋€(gè)網(wǎng)站的時(shí)候，腦海里就已經(jīng)大概浮現(xiàn)出了它的樣子，雖然很模糊，但我認(rèn)為它沒(méi)必要太清晰。很多創(chuàng)意的靈感都是在做的過(guò)程中發(fā)現(xiàn)的，所以只要腦子里有一個(gè)大概的方向就可以開(kāi)工了，具體的細(xì)節(jié)部份一邊做一邊想就好了，沒(méi)必要一開(kāi)始就自己把自己的思維給框住。根據(jù)大概的構(gòu)想，我先整理出了一個(gè)大概的制作流程：

　　基本構(gòu)想 → 設(shè)計(jì)規(guī)劃 → 框架構(gòu)建 → 優(yōu)化文字 → 細(xì)節(jié)粗調(diào) → Retina 處理 → 響應(yīng)式處理 → 動(dòng)畫(huà)制作 → 細(xì)節(jié)微調(diào) → 回遷上線(xiàn) → 離線(xiàn)緩存和 Web App → 多語(yǔ)言版本

　　設(shè)計(jì)規(guī)劃

　　談到設(shè)計(jì)，就不得不談到 Bootstrap。這是我首次使用 Bootstrap 框架制作網(wǎng)站。其實(shí)開(kāi)始我一直在猶豫要不要用它，因?yàn)樗A(yù)置了很多 CSS 樣式和框架，用起來(lái)太方便了，以致于我覺(jué)得會(huì)減少那種完全自己設(shè)計(jì)制作的成就感。后來(lái)由于時(shí)間緊迫，加上 Bootstrap 的風(fēng)格也正好是我想要的那種，所以就采用了它。頁(yè)面由七個(gè)獨(dú)立模塊組成，按順序分別是：簡(jiǎn)述、旅行、攝影、創(chuàng)造、Apple、聯(lián)系和關(guān)于，每個(gè)模塊都有它自己的特點(diǎn)。這種模塊化的設(shè)計(jì)也方便做響應(yīng)式處理。

　　框架構(gòu)建

　　解析測(cè)試版域名，掛一個(gè)簡(jiǎn)單的頁(yè)面測(cè)試

　　引入 Bootstrap，測(cè)試

　　研究了一下 Bootstrap 的文檔，做出了大概的框架，開(kāi)始做地圖的部份

　　細(xì)節(jié)粗調(diào)

　　這一步把所有的元素都擺到位，實(shí)現(xiàn)各元素基本的功能。

　　逐步輸入地圖的坐標(biāo)點(diǎn)數(shù)據(jù)

　　坐標(biāo)點(diǎn)數(shù)據(jù)輸入完成，簡(jiǎn)單做一下完善地圖的細(xì)節(jié)

　　給 header 換個(gè)背景

　　用簡(jiǎn)單的文字先拼出各個(gè)模塊大概的樣子

　　當(dāng)時(shí)的記事本草稿

　　Retina 處理

　　Retina 也就算高清視網(wǎng)膜屏幕的支持，作為一個(gè)果粉，這點(diǎn)當(dāng)然不能放過(guò)。不過(guò)這個(gè)當(dāng)時(shí)比較頭疼，先是用了一些 jQuery 的 Retina 框架，普遍都有加載速度慢的問(wèn)題?？磥?lái)還是不能偷懶，只有自己寫(xiě)。思路是用 JavaScript 檢測(cè) devicePixelRatio，將值寫(xiě)入 Cookie 后刷新頁(yè)面，然后用 PHP 讀取該 Cookie，輸出對(duì)應(yīng)的圖片(高清或普通)。在 Retina Macbook Pro 上測(cè)試還遇到不少奇葩問(wèn)題，逐個(gè)修復(fù)后最終效果非常震撼。后來(lái)發(fā)現(xiàn) iPhone 等小屏幕 Retina 設(shè)備不需要使用針對(duì) Retina Macbook / iPad 制作的大尺寸圖片，只要將普通尺寸的圖片縮小即可，故給 JS 增加了檢測(cè) screenwidth，PHP 再做相應(yīng)的調(diào)整，就提高了小屏幕 Retina 設(shè)備的加載速度。

　　響應(yīng)式處理

　　我在響應(yīng)式設(shè)計(jì)開(kāi)始流行之前就已經(jīng)在實(shí)際應(yīng)用了，到現(xiàn)在已經(jīng)非常熟悉，所以毫無(wú)鴨梨的快速制作調(diào)試完成。

　　動(dòng)畫(huà)制作

　　動(dòng)畫(huà)的設(shè)計(jì)和制作花費(fèi)了我不少時(shí)間，既要有特色，又要夠酷夠炫，又不可浮夸，還要考慮性能。我本來(lái)還設(shè)計(jì)了很多動(dòng)畫(huà)，但實(shí)現(xiàn)后經(jīng)過(guò)反復(fù)測(cè)試，在某些設(shè)備和瀏覽器下非常容易崩潰，于是又移除了很多特效。但這個(gè)聯(lián)系方式的交互和動(dòng)畫(huà)仍是我的得意之作，在一個(gè)郵箱地址中隱藏了幾個(gè)不同的聯(lián)系信息，可以分別顯示。

　　細(xì)節(jié)微調(diào)

　　這里優(yōu)化了不少細(xì)節(jié)，譬如字體、字色、陰影、紋理、滾動(dòng)條等等，均使用 CSS3 實(shí)現(xiàn)，包括標(biāo)題文字的漸變和倒影。最后 header 背景還是選了我在甘南的尕海拍的一幅作品。

　　有一些略為浮夸的設(shè)計(jì)也換掉了，比如下面這兩個(gè)就是被換掉的頭像彩色陰影和 Apple 模塊的角標(biāo)

　　回遷上線(xiàn)

　　測(cè)試完成，從測(cè)試服務(wù)器遷回主服務(wù)器，換回域名。把網(wǎng)站發(fā)給位于全球各地、使用不同網(wǎng)絡(luò)的朋友測(cè)試。

　　離線(xiàn)緩存和 Web App

　　說(shuō)實(shí)話(huà)，這倆功能其實(shí)沒(méi)有什么實(shí)際意義，因?yàn)檫@畢竟不是功能型網(wǎng)站，絕大多數(shù)訪(fǎng)客只會(huì)訪(fǎng)問(wèn)一次，而這兩個(gè)功能都是反復(fù)訪(fǎng)問(wèn)時(shí)才有用處。但是考慮到這兩項(xiàng)技術(shù)我已經(jīng)用的比較熟了，搬到這上面來(lái)也用不了多少時(shí)間，所以順手就做了，讓大家體驗(yàn)一下 HTML 5 離線(xiàn)緩存在一秒內(nèi)加載完一個(gè)網(wǎng)頁(yè)是多爽的一件事。考慮到旅行模塊的地圖需要?jiǎng)討B(tài)更新，所以沒(méi)有緩存它，而是用 AJAX 在頁(yè)面載入完成后再加載并渲染地圖。

　　多語(yǔ)言版本

　　一開(kāi)始的計(jì)劃是要做多語(yǔ)言版本的，包括香港粵語(yǔ)繁體版、臺(tái)灣正體版和英文版，但到現(xiàn)在還沒(méi)有時(shí)間制作。

　　常見(jiàn)問(wèn)題 FAQ

　　網(wǎng)站上線(xiàn)以來(lái)，天天都有人問(wèn)我各種各樣的問(wèn)題，現(xiàn)在我按問(wèn)題出現(xiàn)的頻率排序，一起回答一下。

　　如果還有什么問(wèn)題，也可以在此評(píng)論提出。但最好在提問(wèn)前先搜索一下，我不喜歡回答任何 Google 知道的問(wèn)題。

　　你的網(wǎng)頁(yè)設(shè)計(jì)是怎么學(xué)的？

　　(HTML / CSS / JavaScript / PHP / MySQL …)

　　我不是專(zhuān)業(yè)的設(shè)計(jì)師或程序猿，也沒(méi)有花費(fèi)太多的時(shí)間精力來(lái)學(xué)習(xí)這方面的知識(shí)，只是愛(ài)好而已。但我從小就對(duì)自己喜愛(ài)的事物有著無(wú)盡的好奇心和極強(qiáng)的自學(xué)、探索能力，這也是我在多個(gè)領(lǐng)域都能勉強(qiáng)算是“小有成就”的原因，嘿嘿。在網(wǎng)頁(yè)設(shè)計(jì)方面，我?guī)缀鯖](méi)有讀過(guò)相關(guān)的書(shū)，只是研究?jī)?yōu)秀網(wǎng)站的代碼，遇到不懂的就 Google。

　　網(wǎng)站用了多長(zhǎng)時(shí)間開(kāi)發(fā)？

　　先說(shuō)說(shuō)開(kāi)發(fā)時(shí)間吧。我的個(gè)人網(wǎng)站每年都會(huì)徹底地重新設(shè)計(jì)一次，往年的更新一般都在過(guò)年前完成。但今年太忙，無(wú)奈拖至四月中旬才開(kāi)工，五月中旬上線(xiàn)，平均每天只忙活一兩個(gè)小時(shí)。這期間還心血來(lái)潮做了一個(gè)智能手表 Pebble 的應(yīng)用下載平臺(tái) Pebbapps，后來(lái)發(fā)現(xiàn)實(shí)際意義不大，浪費(fèi)了不少時(shí)間。真正花在個(gè)人網(wǎng)站制作上的時(shí)間應(yīng)該在 20 小時(shí)左右。

　　網(wǎng)站是用什么軟件做的？

　　問(wèn)這個(gè)問(wèn)題的同學(xué)一看就是對(duì) Web 開(kāi)發(fā)還沒(méi)有基本的了解，理論上只要能進(jìn)行文本編輯的軟件都可以用作網(wǎng)站開(kāi)發(fā)。我以前是用 Windows / Mac 自帶的記事本，簡(jiǎn)簡(jiǎn)單單，沒(méi)有任何復(fù)雜的功能，沒(méi)有代碼提示器也養(yǎng)成了我寫(xiě)代碼的嚴(yán)謹(jǐn)習(xí)慣。后來(lái)做的網(wǎng)站 JavaScript 之類(lèi)的代碼多了，記事本有點(diǎn)眼花繚亂，就開(kāi)始用 Office FrontPage，至少代碼能上色了。后來(lái)在 Mac 上用 Dreamweaver 習(xí)慣之后，PC 上也開(kāi)始用了，但也從來(lái)沒(méi)用過(guò)其他的功能，最喜歡的就是可以把編輯器調(diào)成黑色背景。

　　網(wǎng)站的加載速度怎么這么慢？

　　這有兩個(gè)原因：

　　其一，是服務(wù)器在美國(guó)，并且只有一個(gè)節(jié)點(diǎn)，因?yàn)槲疫€是未成年無(wú)法備案，無(wú)法將服務(wù)器放在國(guó)內(nèi)，所以我所有網(wǎng)站的訪(fǎng)問(wèn)速度都普遍較慢;

　　其二，網(wǎng)站本身的前端性能確實(shí)不夠好，但這是網(wǎng)站采用大量圖片和動(dòng)畫(huà)的代價(jià)。我曾在加載速度和展示效果間做過(guò)權(quán)衡，后來(lái)考慮到這畢竟不是功能型網(wǎng)站，絕大多數(shù)訪(fǎng)客只會(huì)訪(fǎng)問(wèn)一次，所以還是將效果放在了首位。后來(lái)我也發(fā)現(xiàn)一些可以提高加載速度的改進(jìn)方法，但現(xiàn)在暫時(shí)還沒(méi)有時(shí)間實(shí)現(xiàn)。

　　網(wǎng)站能開(kāi)源嗎？

　　這個(gè)網(wǎng)站沒(méi)有后臺(tái)程序，是靜態(tài)頁(yè)面，所以用瀏覽器的開(kāi)發(fā)者工具就能看到所有的代碼。我的所有代碼可供研究或?qū)W習(xí)之用，但最好不要直接整個(gè)復(fù)制，那樣你學(xué)不到任何東西。

　　你真的才 17 歲？

　　我真沒(méi)想到這個(gè)問(wèn)題會(huì)有這么多人問(wèn)……難道這個(gè)還能有假?我又不是李天一。(XD)