从三月份开始搭建的个人网站终于调试到我觉得可以上线公开了。并不是实打实写那么久啦，中途忙着上学也停了很长时间。

最低配的小服务器（加载可能会慢），

不敢打包票的代码性能（可能会bug），

但总之，欢迎光临 ！

↓↓↓

openwater.ink

以及，善始善终写一篇开发记录。

（ 网站浏览录屏 ）

“如果自己建个人作品集网站需要学习多少东西？”

这回算是完整地、身体力行地去检验了一番。

我不是个专业搞开发的，相信读我文章的大多数朋友们也不是，所以这次我会尽量用更通俗的语言来叙述，让有兴趣了解的朋友们能够知道大概发生了什么，设计网站时想了些什么。

实话说，做这件事情对我来说并不容易，所以在学习心态上的收获是挺大的。没有耐心看网站实现过程的同学可以考虑直接空降最后，虽然我也是片面之谈，但如果你也在为相似的事情努力，说不定能帮到你一些。

前文链接>>我质朴的梦想：个人网站

接续上一篇网站开发记录的进度，当时虽然基本上把首页的效果做了出来，但其实还有很多工作需要去做。

实现网页效果

首先当然是继续未完成的网页制作。

整体的设计思路，风格印象上我希望是简洁的，但同时又是有些调皮有趣的个性在里面。同时我还希望支持简单的响应式设计，但为了善待自己，只配置了大屏幕（宽度>768px）和小屏幕两种情况。

网站的结构

着手进入视觉设计之前，要考虑好信息构架，也就是要做些什么内容。

概括地划分，就是几个部分：首页、关于我、作品目录、详情页、导航。

并不复杂，逐个解决。

导航

因为导航会出现在所有页面里，所以我先考虑它。

- 图形按钮

网站的首页链接。这个位置通常是放一个网站的logo，虽然用文字也没问题，但作为一个读图的视觉动物，我还是希望它是图形化的。于是首页图标做了一杯闭眼微笑的开水。如果你把鼠标悬停在上面，它就会变得激动，也是一种对“注了水的主页”的影射。

( 首页图标 - 开水 )

而“关于我”可不就是对浏览网站的人打声招呼嘛！于是干脆做成了那杯开水说话的气泡框。如果鼠标悬停，就能看到这样的效果。

(“关于我”图标 - “ Hi ” )  

- 菜单位置

我希望主页“水中方块”上面的空间是尽量开阔纯净的，所以works和projects被安排到了左下角，而画面中除了这两个单词和顶部的图形之外，剩下的都是“水池”的空间，舒爽。

但同时，如果小屏幕也把works和projects放在左下角，那就会非常影响操作。

所以小屏状态时还是让他们位于画面顶部。

作品目录页

- 简洁分类与清爽布局

许多作品放在一起时，是否要分类展示、以及标准是什么，是需要明确的。

比方说有的网站会按“品牌包装”、“交互设计”等形式领域来作区分。

但我对这种划分方式并不是很满意，因为我的作品真要分类，那真是各种各样的都有，而且有的作品让我觉得很难定性。所以就决定不按形式来分类，而是分成了“works（作品）”和“projects（项目）”，区分标准只是基于项目的周期、复杂度和完成度而已。

看回视觉上的设计，矩阵式排列是一个基础的想法。

因为不做细致分类，所以更加希望目录页里的作品项目看起来是清晰的、不负担的。所以首先调节了作品封面图的大小和间距，让他们在各种屏幕尺寸下都能保持一个舒适的间距。

( Works页：阵列 x 响应式设计 )  

- “作品” 与 “项目” 的区分。

两个东西本质上都是作品，但为了让用户能有更明显的区别感受，我安排了不同的形状。

Works量多，用比较方的矩形来排矩阵。

Project量少，可以只排一列，封面做成长条矩形。区别一目了然。

( Works页：矩形矩阵)  

( Projects页：长条矩形)  

小屏也有一些细微区别，不过没有大屏幕那么直接。

( 手机端：Works页 vs Projects页)  

- 不展示标题的考虑

我也重新考虑了目录页里作品信息的必要程度。

觉得标题信息对我其实没有那么重要。

为什么这么说呢？

首先，从认知的顺序来看，图片就是“视觉传达系作品”最容易被捕捉的信息了，如果用户有兴趣，自然可以再点进去看更多。

其次标题文字也不会有人会那么用心去辨别或记忆，除非作品依赖绝妙的标题，显然我不符合。那么在目录里展不展标题信息其实不算是一个必要项，这样还能让这个页面更清爽。

于是就决定不在此展示标题文字了。

至于时间信息，或许未来的某一天会考虑进化一下呈现方式。

- 鼠标悬停效果

取消了标题文字的展示，信息就很少了，如果鼠标悬停只是让封面尺寸稍稍变大，界面会显得有些沉闷。于是还设计了这样轻微旋转并投影黄色的效果，让网页更有一点自己的性格。同时也可以强化卡片被选择的感觉。

作品详情页

- 文字在左，图片在右

详情页的设计决定延续首页和目录页的基因，把works和projects链接安排在同样的位置。因为我更希望页面间链接关系是简单的，尽量不要有由于布局上的变化带来的迷惑；再则是因为不用写更多的代码

(详情页：左文字右图片)

标题时间等信息就也统一放在左边，右边放作品的图片。有需要的时候可以加文字，也可以按自己希望来设置背景色、布局方式等。可以说，从代码层面掌控一切的好处就是，拥有非常高的自由度。（也有很多由于菜的不自由）

- 浏览辅助组件

这个部分是辅助浏览的组件按钮，在这个地方，我对于信息语义的考虑是比较多的。

（ 详情页组件）

“前一篇”、“后一篇”功能，并不少见。

但这有一个语义上的迷雾——“前一篇”到底指的是更新的一篇，还是更旧的一篇呢？你敢保证大家的解读都是一样的吗？

在英文的语境下，这是很好辨别的（older和newer），但是中文就要斟酌了。

于是我使用了“新”和“早”这两个字来区分。（为什么不是旧？因为不好听）

( 切换文章 ) 

“新”和“早”不是一个普及度很广的用法，甚至在第一次看还有点迷惑。但用户一旦get到了，应该就再也不会弄混了。这也算是一点私心：个人网站不是什么大平台，一些不寻常的设计反而可以落地实践。

另外就是“返回顶部”功能。功能本身没什么好说，但按钮的设计还是考虑了一番。

一个是为了让页面的按钮不要东一个西一个，我把它和新旧文章按钮整合到一起成为一个组件。但不是用“顶”字来表示，而是使用了图形，因为想要信息一眼就能区分，箭头的方向感也更直观。

( 回到顶部 ) 

当然，初次看到，应该也会有误解这是“上一篇”按钮的人。但这个误操作的破坏性并不算大：如果你已经想跳转文章了，那么意外地回到顶部并不会打断你的阅读。

- 可以被点开浏览的图片画廊

考虑到有些内容可能有放大浏览的需求，另外增加了点击图片就能以画廊模式浏览的功能。

( 画廊模式 ) 

- 多图片瀑布流布局

有些作品是集合了很多尺寸比例不一的图片，所以我希望这样的页面里图片是能自动以瀑布流的方式来布局，不出现某一栏空位过大的情况。于是对于有这样需求的页面，就单独加了瀑布流脚本。

( 瀑布流布局 ) 

别以为这些简单又常见的需求实现起来就简单，对于菜鸡来说每一个功能的增加都是《作为开发者的自己，想打作为产品经理的自己》的故事。

全局的细节

- 藏在鼠标形状里的情怀

编程的入门，我是从Processing开始的。

而最早学会的命令是画圆或方块。

最早认识的特殊变量，是代表鼠标位置的mouseX、mouseY。就像这样。

所以，出于情怀，我把网页里的鼠标变成了方块，如果悬停到链接上，光标就会变成圆形。（有时候加载不出来我也不知道为啥）

- 主题黄的贯穿

主题黄的使用，贯穿了整个网站。

除了光标图形、鼠标悬停效果的应用之外，包括被选中文本的背景色也设置成了黄色。选中文本背景色的设计，一定程度上可以给大面积浅灰色的页面增加一些视觉上的活力。

比如，如果在“关于我”页面里选中了文本，就很像被荧光笔划重点的感觉。

让网站上线

网站做好了，怎么样让它能被互联网上的其他人访问呢？

首先给大家建立一个最基本的概念，网站是如何运行起来的。

( 网页运作原理概念图 简化版 ) 

如果不知道服务器是什么，

就当成在网站背后运作的一台电脑就行。

- 域名、服务器、备案

首先不管三七二十一，作为一个网站，注册一个域名（通俗来说，就是网址）是必要的。

如你所见，我注册了openwater.ink这个域名。

然后简单来说，国内的域名，要想投入使用，就得备案。

要想备案，就得买服务器。

( 国内备案流程 ) 

在敲代码写网站的阶段，我一直在用免费的GitHub Pages，但在国内访问的速度并不理想。所以纠结了很久，最终还是自己买了阿里云的ECS服务器。

在这个阶段里，为了知道自己要做些什么，为什么这么做，首先要了解互联网运作的原理，也就是IP地址、DNS解析等知识。学过这些，顺带会造福家里的网络环境——再也不用担心搞不清家里的网络配置了。

接着，需要面对阿里云的控制台进行操作，那总不能一头雾水地一通乱点。怎么选购服务器，后台界面的那些信息是什么意思，那就要去了解服务器的相关知识了。

（其实对于个人网站也不用想太多，最低配就够用了）

买了服务器，就可以备案域名了。我大概等了一周，收到了备案成功的消息。

- 把网站部署到服务器上

“部署”这个词听着有点太专业，很多同学可能没概念。

其实就是把你写好的那些网站文件上传到服务器里，并通过一些后台设置，让你的域名和这些文件关联起来，这样别人输入了网址就能访问到你的网站。(参考上面那张概念图)

那问题就来了，服务器的后台长这个黑黢黢的样子，怎么上传文件呢？

( 直接远程连接的服务器 ) 

这种命令行界面是基于Linux系统的，然后……别的俺什么也不懂。

但是没关系，照着网上的教程，装一个“宝塔”图形界面，就能轻松地管理服务器里的东西了。感恩GUI的存在。

上传了文件，并设置好网站域名，别人就可以访问到自己的网站了！

- 调试

做到这里，我已经第1001次以为“我做完啦！！”……燃鹅没有。

在真实的网络环境中，暴露了问题。

首先是，加载速度慢。

所以主要做了两件事情：压缩图片文件大小、把引用国外CDN的脚本换成直接放在网站文件目录里引用。速度得到了比较明显的改善。

另外，如果使用Safari浏览器，从别的页面点回首页，那些作品方块会加载不出来。

这才知道Safari浏览器有特殊的缓存机制，不会自动刷新通过“返回”等功能打开的页面的JS。所以还要在JS代码里加一个“如果首页没有方块就强制刷新页面”的功能。

顺便，因为访问需要一定程度的等待时间，所以最后还加了个简单的加载动画。

调试至此，没有什么很大的问题了。终于可以公开上线了！

一砖一瓦，

把从小学就萌芽的质朴的梦想给圆了！开心！