返回

替代Bento的个人主页

项目地址：GitHub Repository

在线预览：Live Demo

技术栈：React 18 + TypeScript + Rsbuild + MapLibre GL + ical.js

告别第三方服务，自建一个现代化的个人主页

背景：为什么选择自建？

前段时间，Bento 宣布停止维护。我厌倦了第三方服务的不稳定性，也尝试继续寻找一个 UI 风格能满足我审美的同类型站点，但始终没有找到满意的。

于是，我决定自建一个完全可控的个人主页，既能满足需求，又能完全掌控数据和功能。

项目介绍

这是一个采用 iOS 风格毛玻璃设计的个人主页/导航页项目，UI灵感来自于 yysuni。项目采用现代化的技术栈，实现了内容与展示的完全分离，所有配置都集中在一个文件中管理。

核心特性

🎨 精美的视觉设计

📦 丰富的功能模块

1. 用户信息卡片

2. 文章展示

3. 音乐播放器

4. 实时时钟

5. 日历组件 ⭐ 新功能

6. 世界地图 ⭐ 新功能

7. 社交链接

8. 图片展示

技术栈选择

前端框架

样式方案

功能库

核心设计理念

1. 配置驱动

所有内容都通过 src/config/content.ts 文件集中管理：

export const contentConfig: ContentConfig = {
  user: {
    name: '刷新',
    tag: 'Arknights Players | Nikon & Lumix Users | ...',
    avatar: 'https://...',
    menuItems: [...],
  },
  calendar: {
    icsUrl: '/中国大陆节假日.ics',
  },
  worldMap: {
    style: '/positron.json',
    markers: [...],
  },
  // ... 其他配置
};

优势：

2. 构建时数据生成

通过自定义 Rsbuild 插件，在构建时自动生成数据：

FetchBlogPlugin - 自动抓取博客最新文章

// 构建时自动抓取博客首页
// 提取最新文章信息
// 生成 blog-data.json

BgmListPlugin - 自动扫描音乐文件

// 扫描 public/bgm 目录
// 生成音乐列表 JSON
// 自动更新到配置中

优势：

3. 组件化设计

每个功能都是独立的组件，采用统一的目录结构：

components/
├── Calendar/
│   ├── Calendar.tsx
│   ├── Calendar.css
│   └── index.ts
├── WorldMap/
│   ├── WorldMap.tsx
│   ├── WorldMap.css
│   └── index.ts
└── ...

优势：

特色功能详解

📅 日历组件：ICS 文件支持

日历组件支持标准的 ICS (iCalendar) 格式文件，可以显示节假日和自定义事件：

calendar: {
  icsUrl: '/中国大陆节假日.ics', // 本地路径或远程 URL
}

功能特点：

使用场景：

🗺️ 世界地图：标记你的足迹

世界地图组件可以标记你去过的地方、居住地、想去的地方等：

worldMap: {
  style: '/positron.json', // 自定义地图样式
  markers: [
    {
      name: '北京',
      lat: 39.9042,
      lng: 116.4074,
      type: 'travel', // travel | residence | wish | airport
      description: '中国北京',
    },
  ],
  legend: [
    { type: 'travel', label: '旅行' },
    { type: 'residence', label: '居住' },
  ],
}

功能特点：

项目结构

index-page/
├── public/              # 静态资源
│   ├── bgm/           # 音乐文件目录
│   ├── *.ics          # ICS 日历文件
│   └── *.json         # 地图样式文件
├── plugins/            # 自定义 Rsbuild 插件
│   ├── fetch-blog-plugin.ts    # 博客文章抓取
│   └── bgm-list-plugin.ts      # 音乐列表生成
├── src/
│   ├── components/     # React 组件
│   ├── config/        # 配置文件
│   │   ├── content.ts         # 主配置文件
│   │   ├── blog-data.json     # 博客数据（自动生成）
│   │   └── bgm-data.json      # 音乐列表（自动生成）
│   └── App.tsx        # 主应用组件
└── rsbuild.config.ts   # Rsbuild 配置

自建的优势

1. 完全可控

2. 数据安全

3. 功能定制

4. 性能优化

5. 学习价值

快速开始

安装依赖

pnpm install

开发模式

pnpm run dev

构建生产版本

pnpm run build

配置内容

编辑 src/config/content.ts 文件，修改对应的配置项即可。

总结

自建个人主页虽然需要一些开发成本，但带来的好处是显而易见的：

  1. 完全可控：不再依赖第三方服务，数据在自己手中
  2. 功能丰富：可以根据需求自由扩展功能
  3. 性能优秀：构建时生成数据，运行时性能极佳
  4. 易于维护：配置驱动，修改内容无需改动代码
  5. 学习价值：深入理解现代前端开发流程

如果你也厌倦了频繁更换第三方服务，或者想要一个完全属于自己的个人主页，不妨试试自建。这个项目已经为你搭建好了基础框架，你只需要修改配置就能拥有一个精美的个人主页。

本文介绍了自建个人主页的动机、技术实现和优势。如果你对这个项目感兴趣，欢迎 Star 和 Fork！

下一篇
站点说明
×