MoeHome 开源个人主页：纯静态、配置驱动、零运行时依赖

第一版规划：终端风格 + RSS+GitHub+链接导航#

最初的想法很简单：

1. 模拟终端风格作为个人介绍
2. 通过 RSS 地址获取最新博客文章
3. 展示 GitHub 个人项目
4. 增加链接导航板块，用字体图标+卡片形式展示主流社交平台

但慢慢地，我觉得这个方案缺少点什么。

活人感的缺失#

纯静态的主页展示，总觉得少了点「活人感」。

刚好，我一直在用 Memos 记录碎片化想法，体验真的很棒。为了达成品牌风格的一致性，我决定：通过 Memos 的 API 作为动态信息流，它支持标签筛选。

这样，主页就能实时展示我最近的思考和分享，不再是一潭死水。

双向沟通：留言板的诞生#

有了”输出”，还需要”输入”。

我需要接受外界的「信号」，留言页面也就此诞生。筛选了几个开源评论系统后，最终选择集成 Waline 和 Artalk 两种方案，体验一致，切换自由。

为了让留言板与整体设计风格统一，我选择独立于项目的 UI 方案，打造了一个终端风格的弹幕交互界面。讲真，这是我觉得做得最厚重的一块。

为什么选择纯静态?#

• SEO 友好：构建生成纯静态 HTML，搜索引擎完美支持
• 性能极致：前端无框架，构建时自动压缩优化
• 部署简单：构建输出即插即用，支持任意静态托管

核心功能模块#

字体策略#

采用“西文优先 + 系统回退”策略:

• 仅加载 JetBrains Mono 等宽字体（约 30KB）
• 中文使用系统字体，避免大文件加载
• 国内 Google Fonts 镜像加速

性能友好，加载速度快。

环境准备#

1
# 克隆项目
2
git clone https://github.com/moewah/MoeHome.git
3
cd MoeHome
4

5
# 安装依赖
6
npm install

配置修改#

编辑 src/config.js按需修改:

1
site: {
2
    name: 'YourName',
3
    tagline: '技术博主 / 开源爱好者 / AI 探索者',
4
    url: 'https://example.com',
5
}
6

7
profile: {
8
    name: 'YourName',
9
    avatar: 'images/avatar.webp'
10
}
11

12
links: [
13
    {
14
        name: 'Blog',
15
        url: 'https://yourblog.com',
16
        icon: 'fa-solid fa-pen-nib',
17
        enabled: true
18
    }
19
]

构建 & 部署#

1
# 构建
2
npm run build
3

4
# 本地预览
5
npx serve dist -p 8080
6
# 访问 http://localhost:8080
7

8
# 部署:上传 dist/ 目录到任意静态托管