Lai追求 / USER_ID: laiqfun
[ Back ] WORDS : 1,327
//

【网站开发历程】从2024年开始的漫长建设旅程

为什么建站

我学习web开发最早可以追溯到2019年——当时还在编程猫社区,看见其他工作室在建站,我也学着给我的跃动工作室建站。一开始还是用一个平台,一层模板,然后你可以修改内容和图片。后面在b站学会了html/css,现在还能查到当时编程猫社区发的贴子。后来,就一直在搞源计划源码星球乃至后面22年的曈星阁。

直到24年曈星阁的故事慢慢落下帷幕,我才开始考虑为自己搭建一个网站——我想为自己建一个独一无二的个人网站。

于是,注册了一个域名laiq.fun。寓意Lai追求(quest)+fun(有点意思)

建站历程

我是一个有点完美主义的人,不管是以前还是现在的个人网站,建了一版又一版。也是从24年拖到了26年。

这里,我能找的记录就有5版废稿:

图片1

图片2

图片3

图片4 图片4

图片5 图片5

4、5是上线过laiq.fun的版本,他们都拥有我精心调过的动画,但是很显然,他们的设计还是远远不够我想要的那种独特创意但是又方便阅读的感觉。

26年,我再次拾起建站计划,这次借助AI的力量尝试了多种模板布局,最终采用了Gemini给我的这套设计,最终变成了如今我的网站的模样。

(其实在这次正式定设计前还pass了一个上线过的版本,那个版本带有一个终端的设计)

最新版本的网站设计的亮点

个人空间感

在最新版本中,我去掉了cover的设计。

过去的设计一直在往“官网”的感觉上设计,觉得要做一个很酷炫的cover,要惊艳第一次进来的人。

但在这次的设计中,我更加偏向“blog”的感觉了。

cover可以是作为一个-1页面彩蛋,但绝对不会是首屏:

  1. 首屏cover像是给上了一个锁屏,好看但是远离网站的核心内容了,与我“酷但是不影响内容”的理念不符。
  2. 首屏cover破坏了网站一体感。加header->cover变成一张普通壁纸了;不加header->无法快速转到其他页面;cover里面另外塞nav->过于游戏化,不像个网站

在最新版本中,页面布局是一个“空间”的感觉。

我的头像和名字很自然的在header上,表示这里是我的空间。塞了一个“VIEW CARD”以一个游戏卡片的形式展示我的信息。

header以及左边的装饰栏固定住,增加整体感,blog和work都在空间中展示。

本次的设计相对克制,有趣的东西都被设计成了彩蛋,整体重心在内容上——blog和work

略带hack风格/游戏风格

这里提一嘴,这风格其实并不是我作为技术爱好者所以喜欢的风格,而是“银狼是我老婆!”,所以设计元素多少带点老婆的味道😋

hack风格/游戏风格不是说上来就是对比度高的,“炫酷”的颜色搭配,整的过于浮夸,影响正常阅读体验。

  1. DIRECTORY 切换分类就是切换文件夹,打开blog就是打开文件
  2. ProfileCard 底部进度条直观感受blog的数量,如果红了说明网站要装不下了(其实是因为快达到我预期的100blog数量了)
  3. 分类的十六进制数->我的分类一个就要占2bit空间
  4. 塞了个银狼的标志,未来作为激活更加hack风格的主题切换彩蛋入口
  5. VIEW CRAD 游戏卡片展示个人信息

使用astro

astro太适合用于搭建我的个人网站了

  • 内容驱动
  • 高性能
  • 比流行框架(vue/nuxt、react/nextjs)轻量化
  • 比hexo这种更加自由