返回

个人网站开发记录

📌 记录这个网站的过去,不是全部,有时更新

🙃 记性不好,想啥写啥

不忘初心

故事要从 2018 年下学期说起。

舍友彭大佬买了个腾讯云的学生机和域名,弄了备案,搭了个网页,主站忘了有什么了,只记得有一个“双叶一下,你就知道”的搜索网站,不过现在已经不能访问了 可以访问,虽然不是原来的内容了。后来他又搞了 博客,放在了 Github Page 上,用 Hexo 搭的,今天去看也不能访问了。。明明前段时间还能看的 可以访问。

大佬弄了服务器之后我也整了一个,不过是阿里云的,2019 年寒假又搞了备案。

--> 以上内容记录于 2020 年 2 月 1 日,修改于 2020 年 8 月 12 日。

不完整的发展史

发展史以界面设计为分界,截图选取自该设计的最后一次提交记录。

开始的开始

最初搞了个啥我也记不清了,好像是模仿大佬做了个搜索网站?

开始

第一个有意义的网站应该是 2019 年 1 月 31 日的版本,里面放了一个网易云音乐的外链播放器,歌曲是《小さな恋のうた》。不过这个版本并没有写 CSS。

2019

2019 / 02 / 01

网站早期图像

这个版本有 CSS 了。

图片放在阿里云 OSS 上,是动画《日常》中的两个人物,下面的话也是动画中的台词。

2019 / 03 / 01

网站早期图像

这个版本有了底栏和新 ICON。

主页图和音乐都挂了,其他页面由于路径问题,视频也放不出来。

主页的图是动画《未闻花名》的角色图,做了透明度处理,左下角的网易云音乐外链放的应该是主题曲《secret base ~君がくれたもの~》。

外链的日常还是上面那个。

网站早期图像

外链的紫罗兰永恒花园放了 OP 的视频进去,下面是歌词,中间有一个红线,是受坚果手机的影响。

2019 / 03 / 14

网站早期图像

这次用了 Material Design,可惜图还是挂了。

这是到现在也感觉比较满意的一版,用了很多 hover 效果。

不过没有什么内容,主要的就是一个引导型立项的宣传。

网站早期图像

下面放了一些无关紧要的东西。

网站早期图像

底栏还有一个 hover 效果,不过移动端的触摸没法适配,会穿透。。

不过我也没适配移动端。

2019 / 04 / 25

网站早期图片

这个版本终于加入 JS 了。

整体风格比上个简洁多了,虽然并没有什么内容。

网站早期图像

页面切换竟然是用 iframe 实现的。。

切换页面时有淡入的动画,但细节上还有一些问题。

2019 / 05 / 15

网站早期图像

这个版本很简单,存在时间也不长。

中间的“你好”和“再见”是把鼠标移到两边才出现。

2019 / 06 / 09

网站早期图片

网站早期图片

网站早期图像

这个版本到现在看也很惊艳。

适配了移动端界面,加入了黑暗模式,总之挺好看的。

唱片可以转,也会随鼠标移动有视差效果。

时间轴有一个从 0 到现在的动画效果。

视频只是一个视频,没有其他功能。

2019 / 08 / 10

网站早期图像

终于加入了笔记(博客/文章)这种东西,不过在这个版本里直接用 Typora 生成 html 文件放上去了。

到目前为止还是纯前端的东西。

2019 / 09 / 15

网站早期图像

整挺好看的。

这一版记得做了一段时间,主要在调三个卡片出现的动画,模仿 Windows 10 全屏开始菜单打开那种,不过最后仿的不太像。。但也挺好看的。

第一次从尝试从 Github API 来获取笔记的信息,不过这里的 token 失效了,否则笔记列表对应的也是这样的卡片。

2019 / 10 / 11

网站早期图像

由于我 Github 上对应的仓库删掉了,所以这里获取不到了。

网站早期图片

作品页也是从 Github 中获取的,左侧还设计了锚点导航。

总体来说挺简洁的,但细节上还有改进的地方。

2019 / 12 / 10

网站早期图片

主要是界面上的改动,可惜 API 已经无效了。

2019 / 12 / 23

网站早期图像

网站早期图像

界面小改,删了作品页,加了一个喜欢的音乐,点击标题就能下滑出来。

2020

2020 / 02 / 01

网站早期图像

网站早期图像

网站早期图像

网站早期图像

网站早期图像

感觉是有史以来我做的最完善的一个网站了。

利用 hash 监听和切换页面,单页无刷新。

有自己的后端程序,负责解析 markdown 文件和接收表单。

2020 / 02 / 09

网站截图

网站截图

网站截图

这一版加了搜索和标签的功能,界面设计也仿照正常的博客样式。

应该是比较完善了,之后大概会做管理页面。

2020 / 03 / 10

新版已经做的差不多了,但我觉得老版依旧挺好,所以下面是旧版的最后一个版本。

网站截图

网站截图

网站截图

网站截图

网站截图

比上个版本加了目录功能,还写了一个管理器页面。

换新版的原因是文章页面 ajax 获取比较慢的时候,页面不好处理,用户体验不好,所以下个版本要做静态页面。

2020 / 04 / 01

现在是 2020 年 4 月 1 日。

这是上次说的新版,整体风格更加完善了。

网站截图

网站截图

网站截图

网站截图

网站截图

设计最开始模仿的 IBM 的 Carbon Design,后来改了很多。大体布局应该短时间内不会变了,首页留了一个 Canvas,以后应该会画一些东西。

2020 / 05 / 16

现在是 2020 年 5 月 16 日。

整体风格和上次差不多,加入了项目的页面,但是感觉有点不对劲,尤其是移动端的页面。然后就想在项目的上面加一块有意义的东西,想了几天也没想好要加什么,所以就没加。

网站截图

网站截图

网站截图

网站截图

如果以后有时间完成 Lab 页面的话,可能会再完善一下首页,或者学学 Canvas 和 WebGL 之后在搞吧。大体上的风格在短时间内应该不会再变了,要变的话应该是暑假了。

之后会把精力放在其他项目上的。

2020 / 08 / 02

现在是 2020 年 8 月 2 日,好久没有更新了。

这次使用 GatsbyJS 从头制作,这个框架还挺好用的,各种功能基本一个命令就能装好,配置文档也比较详细(没中文),不过用的方便的前提是网好(依赖太难装了)。

这次的设计仍然不是很满意,所以之后还要大改一下,这次就当记录一下还算可以的一个版本。

网站截图

网站截图

网站截图

网站截图

网站截图

2020 / 09 / 20

现在是 2020 年 9 月 20 日,上次说的“大改”已经完成了,但是细节上还是有很多不满意的地方,不过总的来说已经挺正经了。

开学已经挺长时间了,这个学期还是几个课设,所以没有太多时间去大改动了,要改也只能一点点来了,我之前想的是自己做一套访客信息统计和评论系统,现在想还是太花时间了,所以最近打算把统计换成 Google Analytics,评论应该会自己做一个,然后其他的网站也会逐步重构一下,计划表在这 Roadmap · GitHub

网站截图

网站截图

网站截图

网站截图

现在

现在是 2020 年 10 月 26 日,这次的改动还比较小,主要是细节上的优化。

未来打算加一个对话框,里面具体有什么内容目前还在规划中。

网站截图

网站截图

网站截图