使用 Astro 搭建个人博客

301 字

2 分钟

使用 Astro 搭建个人博客

2026-03-20

blog

Astro

/

建站

/

学习记录

为什么选择 Astro？#

Astro 是一个现代化的静态网站生成器，具有以下优势：

零 JS 默认 —— 只在需要时加载 JavaScript
框架无关 —— 支持 React、Vue、Svelte 等
内容优先 —— 原生 Markdown 和 MDX 支持
极快的构建 —— 基于 Vite 构建

安装与配置#

1
# 克隆 Fuwari 主题
2
git clone https://github.com/saicaca/fuwari.git my-blog
3
cd my-blog
4

5
# 安装依赖
6
pnpm install
7

8
# 启动开发服务器
9
pnpm dev

项目结构#

1
src/
2
├── config.ts          # 站点配置
3
├── content/
4
│   └── posts/         # 博客文章
5
├── pages/             # 页面路由
6
├── components/        # UI 组件
7
└── styles/            # 样式文件

数学公式支持#

本站支持 $\LaTeX$ 数学公式，例如：

行内公式： $E = mc^2$

块级公式：

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

代码高亮#

支持多种语言的代码高亮：

1
def fibonacci(n: int) -> int:
2
    """计算斐波那契数列第 n 项"""
3
    if n <= 1:
4
        return n
5
    return fibonacci(n - 1) + fibonacci(n - 2)
6

7
# 动态规划优化
8
def fibonacci_dp(n: int) -> int:
9
    dp = [0, 1]
10
    for i in range(2, n + 1):
11
        dp.append(dp[-1] + dp[-2])
12
    return dp[n]