上传

先是 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，结果发现它很不适合我用的主题，有些字符甚至看不见了…… 苦逼啊……

后来我又试了 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。于是我升级了。

然后就是导航栏的链接。我之前一直没能解决这问题，后来在网上搜，一下子就找着了解决方法。但是，把代码插到哪儿又是一个问题。经历了长时间的尝试与错误，我才找到了合适的地方插入。

邮件

这一部分是最气人的。在测试了 Discuz 和 Typecho 的邮件功能（当然 Typecho 是用插件来实现的）后，我生气地发现，阿里云的主机不支持邮件发送！目前也没有好的解决方法，一年后再看吧，或许我会考虑换主机提供商。

实际上，一年后，我几乎荒废了这个网站……

Discuz

Discuz 显然比 Typecho 好弄：插件和模板都是从应用中心下的，毫无压力。这或许就是我前几天一直把心思用在 Typecho 的原因吧。但 Discuz 的设置太多太繁琐，尤其是 Rewrite 规则（相比之下，Typecho 的 Rewrite 规则设置没让我动一行代码）。而且，Discuz 的插件和模板再也不像我以前见到的那样，现在付费的太多了，免费的又添加了很多限制，让你不得不掏钱。所以找到好一点的免费模板和插件在现在变得很难。

但令我怎么也想不到的是，通过备案后，Discuz 的服务器地址怎么也改不回来了！我又因为误操作把 Discuz 毁了，只好重装。然后，苦逼的事情发生了：我需要一个个下载将近 20 款插件和 2 个主题！同时，因为我绑定了 QQ，每安装一次插件，都要验证！我花了一个下午才把插件安装完。

主页

在《网站的准备——前期》中我已说过，我在此之前已经做了一系列网页。但现在我又不想要了，于是我开始重新做主页。

首先是欢迎页面。在看到翁天信 - Dandy Weng这个个人网站的主页后，我就决定做一个基于视差滚动的欢迎页面。但翁天信对于这个效果的实现方法没有讲明（参见我的个人主页第五次改版介绍 | Dandy's Blog），而且我无法在网站的源代码中找到实现这种效果的方法，所以我就疯狂地找能够实现视差滚动的插件。

这类插件比较多，但几乎没有一个能完全模拟翁天信 - Dandy Weng中的视差滚动效果，而且绝大多数插件的效果糟糕的透顶。

我本来好不容易看中了 One Page Scroll 这个插件，还写进去了网站内容，但我偶然间发现它不支持移动设备！我果断放弃，但我再次寻找插件却花了更长的时间，好在最终我找到了。

我最终找到的是 fullPage.js——我之前差点把它排除，由于它用的 jquery 都是来自谷歌的，加上已知原因，所以无法显示效果。但我发现，它还提供了一个纯 js 版的，够用了，效果挺好，我就用了。

我还对原代码进行了一些修改，以开启右边的导航点，这样不会让人以为就一页，我也就只能帮到这儿了。

把文字放进去了之后，我就着手找合适的背景图片。第一张是公路图片，第二张是幼芽的图片，第三张是打开的窗户的图片，第四张不设图片。

公路图片好找，出来的结果一大堆。幼芽的图片不太好找，我找了一个多小时。最难找的当属打开的窗户的图片了，我在百度里找不着，又去国外的几个图片网站找，找了三个小时才找到一张好点的，但也不是我想要的打开的推拉窗——难道国外不兴推拉窗？另外，关于窗户的图片挺多，但绝大多数都是关闭的窗户，关于打开的窗户的图片看起来还不到千分之一，这让我很纳闷。

好不容易把整个欢迎页面做完，第二天，我又发现，这个页面在我的手机上显示不正常…… 于是，我又苦逼地改代码，终于让它看起来正常了一些。由于 JS 加载时间有点长，欢迎页内容在加载 JS 之前就被显示出来，堆叠在一起，很难看。我又让它事先不显示，到 JS 加载完成之后再显示出来（这个方法很管用，我在后来做“关于我”的页面时也用到了这方法）。至此，欢迎页面大功告成。大家可以欣赏一下（截图时我把导航栏和导航点隐去了，以便宣传）：

然后，我又草草地弄了个首页，设置好 Cookies，设置好相关的转换可视性的 PHP，这样，访客第一次浏览主页时会进入欢迎页面，以后就是直接进入主页了。Cookies 有效期为 10 年，够了。如果你错过了欣赏欢迎页，也别流泪伤心，清除 www.hlworks.org 下面的 IndexHasLoaded 这个 Cookies，再刷新就行了。

其实，我草草地主页有一个原因：应付新浪的审核。详情请见“社交网络连接与 SEO”一章。

产品和实验室

这个相对好做。主要问题就是在滚动图上，弄了半天也没法让它自适应缩放。

404 页

我自己做了一个 404 图片，个人感觉挺不错。

我是不会告诉你，我最先想用 PS 做，但 PS 的钢笔工具太难用了，于是我就用 Flash 做，累死人了！但最终还要放到 PS 中去掉白色填充、改变线条颜色。

然后我花了三个多小时做好了 404 页，并设置好。但这时候出了很大的问题：404 页的图片显示不了了！后来，我发现，404 页中不能用相对于文档的路径。我将图片地址改为相对于服务器的路径后，问题解决了。

以下是 404 页的效果图：

但 Typecho 无法与别的平台共享 404 页，我只好将相同的代码复制到 404.php 中。

Typecho 背景图片

我有一个网点本，用来做设计的。我原本想扫描上面的图像作为背景的，但最终我还是用 PS 模拟上面的图像作为背景，这样显得更干净。

但这也是极其麻烦的。首先，我需要确定背景色。首先，我想的是米黄色，并轻易地搜到了它的颜色代码。但当我用该颜色填充背景时，感觉不对劲，就不用了。然后，我又搜“道林纸”（我的网点本用的是道林纸）的图片，希望根据图片中的纸张颜色确定背景色。最终，我成功了。

然后就是最苦逼的步骤了：在上面绘制网点。我原本要每 50 像素一个点的，但全部完成后发现太稀疏了，于是马上改成每 20 像素一个点。修改网点距离的同时，我还要修改图像尺寸，以保证背景平铺时衔接自然。单单这一项我就花了 3 个小时（连同吃饭、休息）。

最后就是最重要的步骤了——在上面绘制手稿图。说实话，我在上面用铅笔工具的地方只有三处——因为我没有数位板——其他的都用字、简单的几何图形代替了。

最大的问题是字体的选择上。我在字体网站上翻了半天，最终发现，方正静蕾简体的字体和我的字体有点像，于是我果断用它。但该字体在 PS 中的显示效果不好：行间距、字间距太大——不是一般的大！于是我又苦逼的修改行间距和字间距…… 关键是，我在这张图里大量的用了字符……

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

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 自身的问题，除非重新编译，没有好的解决方法，但我懒得改，怕改错、改混乱。

导航点是在左下角的，我无法将它们放在中间，我已经尽力了，如果你有解决方案，赶快告诉我，我将不胜感激。（官方版本未提供横版导航点，我也是问了作者，作者才给出替代方案的，详见 https://github.com/alvarotrigo/pagePiling.js/issues/70 。）

以上就是我的网站的大致准备过程。