665 字
3 分钟
重构个人主页
2025-10-12
统计加载中...
TIP

XUIOO.COM 目前个人主页已完工!#

前言#

这个 个人主页 的项目其实很早以前就留意过,只是当时觉得太单调,过于简洁了,于是就选了 Zyyo 的一个开源项目 ,原来的个人主页样式是这样的:

Alt text

然后我上B站,一直搜一直搜,花里胡哨的挺多,但是真正有ins高级感,真正实用的却很少

Alt text

像是这个 房间式 3D 个人主页 Three.js构建,虽然他这个挺新颖的,脑回路也是真够意思,UI效果也相对来说挺好了,但是可能我们都习惯了传统的操作,像是他展示的那个折叠菜单,可能普通人要找好一会儿,至于服务器能耗,那一边就不知道了,UP主也没有给源码!

下面是哔哩哔哩的视频:

可能是3D式,基于源码比较复杂吧,博主也在调试中等项目,成熟了估计就会在上 Github 开源了,不过收费也有可能…

货比三家后,也就这个项目UI最好看了,关键他还可以 Docker 部署,但是不太建议,建议大家还是用传统的 pnpmbuild ,这样子生成的静态页面会更加节能!操作管理也更加方便!

Alt text

配置#

  • 拉取:

    # 本地电脑终端执行
    git clone https://github.com/imsyy/home.git

ㅤㅤ或者 点击这里 下载 .zip 自行解压!

  • .env.example 就是配置文件,将它改名改成 .env ,然后按照里面的注释,文字教程走即可,没有难度!

部署#

这边官方文档有挺多种方式去部署的,但是我只推荐本地手动部署,其他的你需要你也可以 点击这里看一下

用 pnpm 静态部署#

TIP

除了 pnpm ,你也可以用 npmyarm ,没有测试过,官方文档 pnpm#

  • 安装 node.js 环境

    node > 16.16.0

    npm > 8.15.0

  • 后以 管理员权限 运行 cmd 终端,并 cd 到 项目根目录

  • 终端 中输入:

    # 安装 pnpm
    npm install -g pnpm
    # 安装依赖
    pnpm install
    # 预览
    pnpm dev
    # 构建
    pnpm build

构建完成后,静态资源会在 dist 目录 中生成,可将 dist 文件夹下的文件上传至服务器,也可使用 Vercel 等托管平台一键导入并自动部署!

(附)视频全流程#

你要是实在不懂的就去 哔哩哔哩 跟着大佬的视频走:(但是我更推荐你能够主动阅读,而不是被动接收)

我的心情:正常

重构个人主页
https://blog.xuioo.com/posts/6541012/
作者
XUIOO
发布于
2025-10-12
许可协议
CC BY-NC-SA 4.0

评论区

———— 来留下你的痕迹吧 ————

部分信息可能已经过时

封面
示例歌曲
示例艺术家
封面
示例歌曲
示例艺术家
0:00 / 0:00