diff --git a/src/pages/index.astro b/src/pages/index.astro
index f8241d2..e7b7488 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,40 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { listRecentPosts } from '../lib/posts';
-const posts = await listRecentPosts(5);
+import { siteConfig } from '../site.config';
+const posts = await listRecentPosts(siteConfig.home.recentLimit);
 ---
 <BaseLayout title="首页">
-  <h2>最近文章</h2>
-  <ul>
-    {posts.slice(0, 5).map((p) => (
-      <li>
-        <a href={`/posts/${p.slug}/`}>{p.data.title}</a>
-      </li>
-    ))}
-  </ul>
+  {siteConfig.hero.enabled && (
+    <section style="margin: var(--space-8) 0;">
+      <h1 style="font-size: 2rem; margin: 0 0 var(--space-2);">{siteConfig.hero.title}</h1>
+      <p style="color: var(--color-muted); margin: 0 0 var(--space-4);">{siteConfig.hero.subtitle}</p>
+      <a href={siteConfig.hero.ctaHref} style="display:inline-block; padding: 8px 14px; border:1px solid var(--color-border); border-radius: var(--radius); background: color-mix(in oklab, var(--color-primary) 12%, transparent);">
+        {siteConfig.hero.ctaText}
+      </a>
+    </section>
+  )}
+
+  <section>
+    <h2 style="margin-bottom: var(--space-3)">最近文章</h2>
+    <div style="display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: var(--space-4);">
+      {posts.map((p) => (
+        <a href={`/posts/${p.slug}/`} style="display:block; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration:none; color:inherit;">
+          <h3 style="margin:0 0 var(--space-2); font-size: 1.1rem;">{p.data.title}</h3>
+          {siteConfig.home.showDates && (
+            <div style="color: var(--color-muted); font-size: 0.9em;">
+              {p.data.pubDate?.toLocaleDateString?.('zh-CN')}
+            </div>
+          )}
+          {siteConfig.home.showTags && p.data.tags?.length ? (
+            <div style="margin-top: var(--space-2); display:flex; flex-wrap:wrap; gap:6px;">
+              {p.data.tags.slice(0,3).map((t) => (
+                <span style="border:1px solid var(--color-border); padding:2px 6px; border-radius: 999px; color: var(--color-muted); font-size: 12px;">{t}</span>
+              ))}
+            </div>
+          ) : null}
+        </a>
+      ))}
+    </div>
+  </section>
 </BaseLayout>
diff --git a/src/site.config.ts b/src/site.config.ts
new file mode 100644
index 0000000..b25f46d
--- /dev/null
+++ b/src/site.config.ts
@@ -0,0 +1,19 @@
+export const siteConfig = {
+  siteName: '学习博客',
+  tagline: '持续沉淀，面向未来的知识库',
+  hero: {
+    enabled: true,
+    title: '欢迎来到学习博客',
+    subtitle: '记录、分享、迭代你的知识资产',
+    ctaText: '查看全部文章',
+    ctaHref: '/posts'
+  },
+  home: {
+    recentLimit: 8,
+    showTags: true,
+    showDates: true
+  }
+} as const;
+
+export type SiteConfig = typeof siteConfig;
+