首先要说的是这个一个非常纠结的项目，由于我的拖延还有一部分技术原因。折腾了挺久，也走了不少的弯路。在这儿做一个笔记，当作是一个总结

1.架设个人网站的需求

a.从上古版本说起

最开始有个人网站的需求是因为，作为一个作品集大量都是动态图形的，pdf的作品集显然没法弄。但是keynote一是兼容性的问题，毕竟不是每个人都是用的苹果，二是，做出来后发现文件实在是太大。再来就是如果使用keynote形式，作品本身是不具有交互行为的，浏览也是单一的线性浏览动线。表现力达不到我的需求，于是才有了做一个个人网站的想法。
最开始版本的个人网站我用的wordpress+魔改了现成的主题。优点就是快捷，而且自带后台管理。完成架设只用了两天。但是wordpress实在是太臃肿了，而且我大量的动态图形的内容只能用gif形式去展现。gif最大的问题就是巨大，同时质量也堪忧。当时我实测完整加载完我的作品需要50m，也就是如果使用20m带宽浏览，满速情况下也需要1分钟才能loading完图片。而我刚好用的是一个速度差强人意的服务器。很多时候浏览者需要长达几分钟去等待某几张动图的加载。
image.png
（早期个人网站截图）

我后来试过使用apng去替代gif(apng是一直新规格的用于替代gif的动态图格式，在现代浏览器以及安卓、iOS平台都有不错的支持)，质量是上去了，但是大小还是没压缩下来太多。
后来在浏览汤不热（？）的时候，我惊觉汤不热在大量动图的时候也能做到加载迅猛，一查发现是使用了视频（h.264）以假乱真代替了gif。这个方式展现的动图加载非常快，而且几乎不存在性能问题。于是我准备把gif都替换成视频，不过wordpress要这样做的话，基本涉及到二次开发主题了。如果只是为了这一个需求显然有点划不来，于是干脆我就重新梳理了个人网站的需求列表，另起炉灶重写了一个。

b.需求

需求来讲，我的作品很多都是单一不成结构的。但是工作中的项目又是成组的。单单展示图片的话，我认为是不够全面的，因为我认为很多项目中的思考可能和设计产出也一样重要，但是如果把他们堆叠在一起都放在首页上，整个首页未免显得过于臃肿和杂乱。怎么把作品整合到一起是我首先需要解决的问题。
思考后我选择按照作品种类去分类而不是优先按照项目分类，分别分为3D/动态，UI/平排，还有一个是为将来发展预留的插画分类。至于项目，我把它和分享经验（因为在之前项目中我也记了挺多多媒体技术笔记的，之后会陆续迁移过来）放到一起，而about页我的理解是类似简历一样的东西。而侧重点不同的是，我在about页主要去阐述解释了我的技能栈。而life页更多的是一个日常生活的记录，我基本把它当lofter用了。

image.png

2.技术选型

a.选型

梳理完成需求后，我遇到的第一个问题就是，用什么来写。虽然我之前有一点前端的经验，但是无奈前端的技术更迭实在是太快。硬生生的要做前端的工作对于我来说还是需要挺多时间的。

wordpress:这个基本是完全被否定了，不是说不好用，之前前面也有提到，我轻量快迭代的需求似乎wordpress并不怎么符合。
第三方建站解决方案:基本就是一个灵活的博客+wordpress自定义主题。否定的理由同上
hexo:hexo是一个和wordpress相似的，基于node.js的静态博客生产框架（我姑且是这样理解的）。在大学的时候我有用过一段时间hexo，不得不说非常好用，markdown写文章，非常多主题，也可以魔改。但是我还是没用的缘故是，hexo更像是一个博客，而我的个人网站更像一个图册，要魔改太费劲了（对于一个设计师来说）。
react/vue自己撸一个:我承认，我最开始想的是这样去做。由于新的framerX一直在鼓吹react，我确实有学习react的排期，想到是正好趁着这个机会去学习一下react。但是在我做了一周发现，作为一个之前使用jquery的设计师来讲，react真的不是那么短期好入门的，而且对于轻量级的网站，react真的有点杀鸡用牛刀了。而且framerX需要的react的技能点和实际建站使用react的技能点其实不太相同，所以在基本入门react后，并好在只完成了网站的css静态部分后，我迷途知返，重回jquery怀抱（其实对于一个设计来讲，这真的没啥好丢人的（只是不够优雅，有机会再试试react吧））。

b.采坑

于是，最后我回归了我用得最熟的jquery，基本在代码上本着的是怎么简单怎么来，网站核心的图片流用的是masonry.js去做，然后imagesloaded去检测图片加载。纯静态的网站，甚至未来计划直接放在阿里云的OSS上，连服务器都不用租了（要不是因为github page的速度太慢了，我就直接放github上了）。

UPDATE 2021/3 我后来真把他全部放阿里云的OSS上了，真的巨便宜，我这静态网站没有任何后端交互，完美符合我的需求，OSS现在一个月是1块。我一口气开了3年。（气的客服给我打电话确认）本来OSS是要计算流量费的，但我看我的账单，我月流量都在0.001rmb左右，阿里云直接四舍五入给我免了，所以我开了一年都没收到过流量费。速度也挺快的

然后这次踩的最大的坑在于视频的加载上，这个坑可能对于前端大哥来讲挺简单的，但我着实折腾挺久。由于我头图首屏是一整个视频。为了体验，想到是先会有个loading，等视频加载完了之后再撤掉loading，实际体验中发现网站非常久都打不开，尽管我都已经把视频压缩到1m不到了。一看发现是视频的加载优先级是不如图片的。我一开始的思路是去调整优先级，告诉浏览器先去加载视频，但是倒腾了挺久都没搞定，最后直接先隐藏了所以图片，等加载完视频再显示图片开始加载。简单暴力的解决了这个问题…

以上就是全部的选型和采坑
个人网站网址是 aricakira.com
欢迎体验

3.未来迭代方向

1.首屏图部分是拿之前的图改的，有空可以重新做一个更好的版本
2.界面目前来看还是差一些元素，有空把icon补上，布局做一点优化
3.loading 动效是三分钟随手logo做的。有计划做一个logo的延展动效替代loading动效
4.后期会上线vlog分类和插画分类（关键是看我手头拿得出手的作品够不够多）
5.移动端的视频兼容问题，版本最开始上线的时候简单暴力的写了一个提示就完事了，其实并没有解决这个问题