文寫完于2015-08-29。由于技術進步，其中的描述不一定適用于現在，請自行定奪。

上傳

先是Discuz和Typecho。它們的上傳挺簡單，把壓縮包上傳，然后在主機控制面板里解壓縮即可。難的是Typecho的插件和主題的上傳。阿里云的FTP太差勁，總是出現421錯誤。每當FileZilla提示“421 There are too many connections from your internet address.”時，我都會有一種暈眩的感覺。關鍵是，我已經把并發連接數設為1、失敗后等待45秒再繼續傳輸、最大重試次數設為20了，而且我確定沒有別的連接，還是不行。

Typecho插件

Typecho插件的啟用也是個問題。我用的Typecho是1.0版的，有些插件還不支持：有些插件啟用后，編輯器的工具欄不見了；有些插件無法啟用，直接報404錯誤；有一個插件則是在網頁上方報錯，關鍵是，那個插件是計數插件，對于我選擇的主題來說非常重要（后來我找到了Stat的修改版，終于成功了)。

最讓人頭疼的是代碼的顯示插件。我想找到一個設置簡單、支持代碼多、好看的代碼顯示插件。最初找到的是Code Highlight，結果發現它很不適合我用的主題，有些字符甚至看不見了……苦逼啊……

DNSHH主題下使用Code Highlight后的效果

后來我又試了CodeBox插件，結果更慘不忍睹：

CodeBox的顯示效果

你在逗我嗎？！

然后我又試了好多插件，但都不滿意。有些插件居然要在編輯時在代碼前面添加你的代碼語言！這太反人類了！而且，我寫的代碼大多數都是HTML、CSS、PHP、JS混在一塊的，你讓我咋說？

后來我才知道，許多Markdown的渲染器都是這樣操作的……

現在，我暫時使用Syntax Highlighter，

同時，我發現有些插件有沖突，比如QRCode和JustArchives，前者會阻礙后者的運行。

Typecho主題

從接觸到Typecho開始，我就看上了Ben做的主題DNSHH，所以我用的主題是這個。

剛開始是從typecho.cc下的，1.1版。但是該版本無法設置圖片logo。我當時百思不得其解，ben-lab.com不就是用圖片作logo的嗎？后來才發現，該主題已經升級到1.2版了，那個版本可以設置圖片logo。于是我升級了。

然后就是導航欄的鏈接。我之前一直沒能解決這問題，后來在網上搜，一下子就找著了解決方法。但是，把代碼插到哪兒又是一個問題。經歷了長時間的嘗試與錯誤，我才找到了合適的地方插入。

此外，這款主題有一些小問題，如果你在用1.2版，請看我的文章：DNSHH 1.2版主題的一些小問題的解決方法 。

郵件

這一部分是最氣人的。在測試了Discuz和Typecho的郵件功能（當然Typecho是用插件來實現的）后，我生氣地發現，阿里云的主機不支持郵件發送！目前也沒有好的解決方法，一年后再看吧，或許我會考慮換主機提供商。

實際上，一年后，我幾乎荒廢了這個網站……

Discuz

Discuz顯然比Typecho好弄：插件和模板都是從應用中心下的，毫無壓力。這或許就是我前幾天一直把心思用在Typecho的原因吧。但Discuz的設置太多太繁瑣，尤其是Rewrite規則（相比之下，Typecho的Rewrite規則設置沒讓我動一行代碼）。而且，Discuz的插件和模板再也不像我以前見到的那樣，現在付費的太多了，免費的又添加了很多限制，讓你不得不掏錢。所以找到好一點的免費模板和插件在現在變得很難。

但令我怎么也想不到的是，通過備案后，Discuz的服務器地址怎么也改不回來了！我又因為誤操作把Discuz毀了，只好重裝。然后，苦逼的事情發生了：我需要一個個下載將近20款插件和2個主題！同時，因為我綁定了QQ，每安裝一次插件，都要驗證！我花了一個下午才把插件安裝完。

主頁

在《網站的準備——前期》中我已說過，我在此之前已經做了一系列網頁。但現在我又不想要了，于是我開始重新做主頁。

首先是歡迎頁面。在看到“翁天信 - Dandy Weng”這個個人網站的主頁后，我就決定做一個基于視差滾動的歡迎頁面。但翁天信對于這個效果的實現方法沒有講明（參見“我的個人主頁第五次改版介紹 | Dandy's Blog”），而且我無法在網站的源代碼中找到實現這種效果的方法，所以我就瘋狂地找能夠實現視差滾動的插件。

這類插件比較多，但幾乎沒有一個能完全模擬網站中的視差滾動效果，而且絕大多數插件的效果糟糕的透頂。

我本來好不容易看中了One Page Scroll這個插件，還寫進去了網站內容，但我偶然間發現它不支持移動設備！我果斷放棄，但我再次尋找插件卻花了更長的時間，好在最終我找到了。

我最終找到的是fullPage.js——我之前差點把它排除，由于它用的jquery都是來自谷歌的，加上已知原因，所以無法顯示效果。但我發現，它還提供了一個純js版的，夠用了，效果挺好，我就用了。

我還對原代碼進行了一些修改，以開啟右邊的導航點，這樣不會讓人以為就一頁，我也就只能幫到這兒了。

把文字放進去了之后，我就著手找合適的背景圖片。第一張是公路圖片，第二張是幼芽的圖片，第三張是打開的窗戶的圖片，第四張不設圖片。

公路圖片好找，出來的結果一大堆。幼芽的圖片不太好找，我找了一個多小時。最難找的當屬打開的窗戶的圖片了，我在百度里找不著，又去國外的幾個圖片網站找，找了三個小時才找到一張好點的，但也不是我想要的打開的推拉窗——難道國外不興推拉窗？另外，關于窗戶的圖片挺多，但絕大多數都是關閉的窗戶，關于打開的窗戶的圖片看起來還不到千分之一，這讓我很納悶。

好不容易把整個歡迎頁面做完，第二天，我又發現，這個頁面在我的手機上顯示不正常……于是，我又苦逼地改代碼，終于讓它看起來正常了一些。由于JS加載時間有點長，歡迎頁內容在加載JS之前就被顯示出來，堆疊在一起，很難看。我又讓它事先不顯示，到JS加載完成之后再顯示出來（這個方法很管用，我在后來做“關于我”的頁面時也用到了這方法）。至此，歡迎頁面大功告成。大家可以欣賞一下（截圖時我把導航欄和導航點隱去了，以便宣傳）：

第一頁

第二頁

第三頁

第四頁

然后，我又草草地弄了個首頁，設置好Cookies，設置好相關的轉換可視性的PHP，這樣，訪客第一次瀏覽主頁時會進入歡迎頁面，以后就是直接進入主頁了。Cookies有效期為10年，夠了。如果你錯過了欣賞歡迎頁，也別流淚傷心，清除IndexHasLoaded這個Cookies，再刷新就行了。

其實，我草草地主頁有一個原因：應付新浪的審核。詳情請見“社交網絡連接與SEO”一章。

產品和實驗室

這個相對好做。主要問題就是在滾動圖上，弄了半天也沒法讓它自適應縮放。

404頁

我自己做了一個404圖片，個人感覺挺不錯。

我做的404圖片

我是不會告訴你，我最先想用PS做，但PS的鋼筆工具太難用了，于是我就用Flash做，累死人了！但最終還要放到PS中去掉白色填充、改變線條顏色。

然后我花了三個多小時做好了404頁，并設置好。但這時候出了很大的問題：404頁的圖片顯示不了了！后來，我發現，404頁中不能用相對于文檔的路徑。我將圖片地址改為相對于服務器的路徑后，問題解決了。

以下是404頁的效果圖：

404頁效果圖

但Typecho無法與別的平臺共享404頁，我只好將相同的代碼復制到404.php中。

Typecho背景圖片

我有一個網點本，用來做設計的。我原本想掃描上面的圖像作為背景的，但最終我還是用PS模擬上面的圖像作為背景，這樣顯得更干凈。

但這也是極其麻煩的。首先，我需要確定背景色。首先，我想的是米黃色，并輕易地搜到了它的顏色代碼。但當我用該顏色填充背景時，感覺不對勁，就不用了。然后，我又搜“道林紙”（我的網點本用的是道林紙）的圖片，希望根據圖片中的紙張顏色確定背景色。最終，我成功了。

然后就是最苦逼的步驟了：在上面繪制網點。我原本要每50像素一個點的，但**全部完成**后發現太稀疏了，于是馬上改成每20像素一個點。修改網點距離的同時，我還要修改圖像尺寸，以保證背景平鋪時銜接自然。單單這一項我就花了3個小時（連同吃飯、休息）。

最后就是最重要的步驟了——在上面繪制手稿圖。說實話，我在上面用鉛筆工具的地方只有三處——因為我沒有數位板——其他的都用字、簡單的幾何圖形代替了。

最大的問題是字體的選擇上。我在字體網站上翻了半天，最終發現，方正靜蕾簡體的字體和我的字體有點像，于是我果斷用它。但該字體在PS中的顯示效果不好：行間距、字間距太大——不是一般的大！于是我又苦逼的修改行間距和字間距……關鍵是，我在這張圖里大量的用了字符……

最后，當家里的表在午夜敲了12下時，我終于完成了背景的制作。大家可以看一下：

Typecho背景

Typecho頭像

由于Typecho是使用Gravatar獲取頭像的，而Gravatar因為已知原因經常登不上，所以我一直沒設置頭像。

然而，有一天，Gravatar居然奇跡般的能登上了！我就馬上進行相關設置，最終設置好了頭像。

但奇怪的是， GravatarCache 不工作了！經檢查發現， GravatarCache 緩存的文件是JPG格式的，而我的頭像是PNG格式的……

社交網絡連接與SEO

這是每一個站長都必須要做的事。說實話，這一方面還算是比較簡單的。但，手續太繁瑣！

作為一個社交性相對較弱的網站，我不需要太多的社交網絡連接。Discuz上用QQ、微信、新浪微博，其他地方頂多放幾個分享/關注控件即可。

但Discuz的“QQ互聯”插件中，我怎么也上傳不了logo。

這還是小事，我處理新浪微博的連接時，居然還要審核！在審核上，我失敗了兩次：第一次原因是“沒有看到合作組件上線，請在網站頁面上添加微博合作組件后再提交審核”，因為我當時還沒做主頁，所以我就在默認主頁上進行了一些輕微的修改后再次提交審核，結果仍然未通過，理由是“網站資源過少，請完善網站建設后再提交審核；沒有看到合作組件上線，請在網站頁面上添加微博合作組件后再提交審核”。好吧，我知道為什么了，但為什么第一次的時候不說呢？

最后，我不得已做了一個簡單的主頁，再次提交審核。當郵件發過來的時候，我的心臟跳得很厲害（郵件標題是“APP審核友情提示”，并不知道是否審核通過）。我的手顫巍巍地點開了郵件，得到的卻是審核成功的提示！SO GREAT!

然后我趕緊更新了百度分享的代碼。

關于

關于頁面我分成了兩部分：關于煥藍、關于我。“關于煥藍”頁面中有鏈接鏈接到“關于我”。

“關于煥藍”頁面不難做，除了時間軸。我好不容易才在Helloweba搜到了比較好的時間軸，然后好不容易才把它調好，使其符合網站的整體風格。想要時間軸的看源碼自己擺弄，記得在后面加一個引用自Helloweba的聲明。

“關于我”頁面倒是想了半天。我在網上瘋狂地搜尋橫向視差滾動單頁插件，找了兩天，才找到了一個pagePiling.js ，和之前的fullPage.js是一個人寫的——我偶然間發現那個人是劍橋的！和fullPage.js相似，我也差點拋棄它，但原因不一樣：這次我把源碼下載到本地，將使用谷歌CDN的地方換成了BootCSS CDN，但在手機上測試時，不知何故（可能是網絡問題），顯示不正常。

Bootstrap、pagePiling 來相配，天生是一對……不過，其實，Bootstrap應該是百搭的。

但是，我實在無法解決同一行寬度不同的列中，較短的列如何垂直居中的問題，索性放棄。我原本想加一些圖片，但最終放棄了。

就這樣，“關于我”頁面草草完成。

我還加了背景音樂，點擊右上角的按鈕即可播放。注意：目前已知Safari的Windows版不支持，原因未知。

注意：如果在手機上瀏覽，最好在豎屏狀態上瀏覽（UC瀏覽器中如果打開“適應屏幕”選項，最好在橫屏狀態下瀏覽），對于其他狀態的顯示問題，應該是Bootstrap自身的問題，除非重新編譯，沒有好的解決方法，但我懶得改，怕改錯、改混亂。

導航點是在左下角的，我無法將它們放在中間，我已經盡力了，如果你有解決方案，趕快告訴我，我將不勝感激。（官方版本未提供橫版導航點，我也是問了作者，作者才給出替代方案的。）

以上就是我的網站的大致準備過程。