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

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

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

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

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

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

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

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

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

　　框架構(gòu)建

　　解析測試版域名，掛一個簡單的頁面測試

　　引入 Bootstrap，測試

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

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

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

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

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

　　給 header 換個背景

　　用簡單的文字先拼出各個模塊大概的樣子

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

　　Retina 處理

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

　　響應(yīng)式處理

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

　　動畫制作

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

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

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

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

　　回遷上線

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

　　離線緩存和 Web App

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

　　多語言版本

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

　　常見問題 FAQ

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

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

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

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

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

　　網(wǎng)站用了多長時間開發(fā)？

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

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

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

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

　　這有兩個原因：

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

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

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

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

　　你真的才 17 歲？

　　我真沒想到這個問題會有這么多人問……難道這個還能有假?我又不是李天一。(XD)