Astro 博客搭建教程：框架选择与项目初始化完整指南

2025-10-10

从零开始的博客网站

astro

1. 技术选型#

个人博客框架大致分为两类：

静态博客：例如 Astro、Hugo
动态博客：例如 WordPress，或者自己编写 Spring Boot + Vue / React

当然也可以在CSDN、稀土掘金之类的平台上直接上传文档。

静态博客和动态博客的运行方式完全不同：静态博客在写完文章后，通过构建生成静态HTML页面；动态博客则在每次访问时实时从服务器或数据库获取内容并渲染页面。以下是静态博客和动态博客的简单比较

静态博客和动态博客的优缺点#

	静态博客	动态博客
性能	✅ 访问速度快	❌ 每次请求需查询数据库和渲染，速度可能较慢
成本	✅ 服务器要求低，可直接托管在平台	❌ 对服务器性能有一定要求
安全	✅ 无后端服务，注入风险低	⚠️ 若配置不当，可能存在 SQL 注入或其他安全风险
维护	✅ 更新文章只需上传文件，可结合 Git 自动构建	❌ 需要维护数据库及相关服务
功能	⚠️ 无动态能力，评论、用户登录需第三方支持	✅ 功能更丰富，可实现用户交互

基于个人网站的需求和机器性能的限制，本文选择使用Astro作为博客框架

2. 选择主题#

Astro 官网的“资源-主题”页签页面提供大量免费和付费主题。
当然你也可以在其他推荐博文寻找合适主题，例如：

大部分主题的 GitHub 仓库都会提供部署好的 Demo 页面，方便预览效果。

本站使用的主题是Fuwari

saicaca

/

fuwari

Waiting for api.github.com...

00K

0K

Waiting...

3. 构建项目#

第一步：fork上述的Fuwari项目#

第二步：使用VSCode或者Webstorm将仓库克隆到本地#

1
git clone https://github.com/your-username/fuwari.git

第三步：安装依赖#

1
# 安装pnpm，如果已安装 pnpm 可跳过此步骤
2
npm install -g pnpm
3

4
# 安装依赖
5
pnpm install

第四步：启动项目#

1
pnpm dev

这个时候就可以打开 http://localhost:4321/查看初试页面效果了

4. 修改配置#

1
import type {
2
  ExpressiveCodeConfig,
3
  LicenseConfig,
4
  NavBarConfig,
5
  ProfileConfig,
6
  SiteConfig,
7
} from "./types/config";
8
import { LinkPreset } from "./types/config";
9

10
// 网站基本信息配置
11
export const siteConfig: SiteConfig = {
12
  title: "Fuwari", // 网站的标题
13
  subtitle: "Demo Site", // 网站的二级标题
14
  lang: "en", // 网站的使用语言
15
  themeColor: {
16
    hue: 250, // 默认主题色
17
    fixed: false, // fixed为true则隐藏调整主题色的选择器
18
  },
19

20
  // 主页图片相关
21
  banner: {
22
    enable: false, // 是否启用主页图片
23
    src: "assets/images/demo-banner.png", // 主页图文件路径，基于src文件夹
24
    position: "center", // 显示方式，可选项为：'top', 'center', 'bottom'。'center'为默认选项
25
    credit: {
26
      enable: false, // 显示图片的版权信息
27
      text: "", // 版权信息文本
28
      url: "", // 点击版权信息文本后跳转到的地址
29
    },
30
  },
31
  toc: {
32
    enable: true, // 博文右侧是否显示目录
33
    depth: 2, // 目录层级
34
  },
35

36
  // 网站图标
37
  favicon: [
38
    // 置空则显示默认图标
39
    // {
40
    //   src: '/favicon/icon.png',    // 网站图标图文件路径，基于public文件夹
41
    //   theme: 'light',              // (可选项) 可选项：'light' or 'dark', 仅在需要在亮色和暗色模式显示不同图标时配置
42
    //   sizes: '32x32',              // (可选项) 网站图标尺寸
43
    // }
44
  ],
45
};
46

47
// 导航栏配置
48
export const navBarConfig: NavBarConfig = {
49
  links: [
50
    LinkPreset.Home,
51
    LinkPreset.Archive,
52
    LinkPreset.About,
53
    // 链接
54
    {
55
      name: "GitHub",
56
      url: "https://github.com/saicaca/fuwari",
57
      external: true, // 外部链接or内部链接
58
    },
59
  ],
60
};
61

62
// 个人信息配置
63
export const profileConfig: ProfileConfig = {
64
  avatar: "assets/images/demo-avatar.png", // 头像图片地址。基于src文件夹
65
  name: "Lorem Ipsum", // 昵称
66
  bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // 个人简介
67

68
  // 配置个人信息下方显示的链接
69
  links: [
70
    {
71
      name: "Twitter",            // 链接名称
72
      icon: "fa6-brands:twitter", // 链接图标，可以在https://icones.js.org找到更多的icon
73
      url: "https://twitter.com", // 链接地址
74
    },
75
    {
76
      name: "Steam",
77
      icon: "fa6-brands:steam",
78
      url: "https://store.steampowered.com",
79
    },
80
    {
81
      name: "GitHub",
82
      icon: "fa6-brands:github",
83
      url: "https://github.com/saicaca/fuwari",
84
    },
85
  ],
86
};
87

88
// 博文下方的许可协议配置
89
export const licenseConfig: LicenseConfig = {
90
  enable: true,
91
  name: "CC BY-NC-SA 4.0",
92
  url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
93
};
94

95
// markdown代码框主题配置
96
export const expressiveCodeConfig: ExpressiveCodeConfig = {
97
  theme: "github-dark",
98
};