实战：使用Astro搭建个人博客

IKUN_CXKPRO

这里该写什么?

公告

无公告。

标签

沙雕刷屏器微信问题解决小米手环教程 Astro Debian favicon.im Fuwari IP Linux OOBE win10/11禁止更新 Windows Windows11 Xiaomi Band

站点统计

文章

9

分类

3

标签

15

总字数

6,356

运行时长

0 天

最后活动

0 天前

1911 字

10 分钟

实战：使用Astro搭建个人博客

2025-11-02

教程

Astro

/

Fuwari

前言#

这篇文章是我用 Astro 重构个人博客的经验总结。内容分为以下几部分：

为什么想要重构博客
为什么选择了astro
博客迁移过程
Astro 的优缺点

如果你也有类似的需求，希望这篇文章对你有帮助。

为什么想要重构博客#

zibll的界面确实很好看。配置完了之后也特别好用，但是各种配置完就是一直优化不好访问速度

主要原因还是因为优化不好，而且优化很麻烦，且必须加cdn速度才能上来。

第二个就是续费不起cdn，用cf的cdn速度特别慢,甚至有些地方无法访问。

还有一个原因是希望了解下时下流行的 Island 架构，并且借助这次重构，尝试找到比较便捷的高性能内容站点解决方案。

为什么选择了Astro#

关注 Astro 其实有段时间了，但由于当时的网站还很稳定，所以并没有怎么去研究

最近QQ群里有不少人用 Astro 改写了自己的博客或者是其它类型的内容站点，风评很好。看了官方文档之后，确实和我之前理解的不同，Astro 会更专注在内容站点，而 Next.js 更偏向于构建 Web APP。

尝试了跑了一个 demo 之后，发现上手特别简单，技术栈很熟悉。

默认支持 Markdown 和 MDX 的渲染，挺不错的。但是由于之前的博客使用的是wordpress，而且我之前压根没写过md，所以想试试使用Astro来重构博客，看看效果怎么样，结果就是特别好。

接下来说干就干。

博客迁移过程#

搭建Astro#

首先：新建个文件夹。这里我是直接使用了Fuwari主题

saicaca

/

fuwari

Waiting for api.github.com...

00K

0K

Waiting...

直接把项目源代码给fork一下，解压到你的项目文件夹
然后在项目文件夹下运行pnpm install和pnpm add sharp，安装一下依赖。
然后就可以食用了。 Fuwari-demo

配置Astro网站设置#

这个挺简单的，在src/config.js文件中，修改一下网站的相关信息就行了。
配置文件的结构，我拿manus简单画了下结构图，如下：

1
配置文件
2
 |- siteConfig (网站配置)
3
 |   |- title (网站标题)
4
 |   |- subtitle (网站副标题)
5
 |   |- lang (语言)
6
 |   |- themeColor (主题颜色)
7
 |   |   |- hue (色相)
8
 |   |   '- fixed (是否固定)
9
 |   |- banner (顶部横幅)
10
 |   |   |- enable (是否启用)
11
 |   |   |- src (图片路径)
12
 |   |   |- position (图片位置)
13
 |   |   '- credit (图片署名)
14
 |   |       |- enable (是否显示署名)
15
 |   |       |- text (署名文字)
16
 |   |       '- url (署名链接)
17
 |   |- toc (文章目录)
18
 |   |   |- enable (是否启用)
19
 |   |   '- depth (显示深度)
20
 |   '- favicon (网站图标)
21
 |
22
 |- navBarConfig (导航栏配置)
23
 |   '- links (链接列表)
24
 |       |- (预设链接: Home, Archive, About)
25
 |       '- (自定义链接)
26
 |           |- name (链接名称)
27
 |           |- url (链接地址)
28
 |           '- external (是否为外部链接)
29
 |
30
 |- profileConfig (个人资料配置)
31
 |   |- avatar (头像路径)
32
 |   |- name (昵称)
33
 |   |- bio (个人简介)
34
 |   '- links (社交链接列表)
35
 |       |- name (平台名称)
36
 |       |- icon (图标代码)
37
 |       '- url (个人主页链接)
38
 |
39
 |- licenseConfig (许可证配置)
40
 |   |- enable (是否启用)
41
 |   |- name (许可证名称)
42
 |   '- url (许可证链接)
43
 |
44
 '- expressiveCodeConfig (代码高亮配置)
45
     '- theme (代码高亮主题)

这里放一下我的配置文件，仅供参考：

1
/*
2

3
./src/config.ts
4
最后修改:2025/11/2 16:27
5

6
*/
7
import type {
8
  ExpressiveCodeConfig,
9
  LicenseConfig,
10
  NavBarConfig,
11
  ProfileConfig,
12
  SiteConfig,
13
} from "./types/config";
14
import { LinkPreset } from "./types/config";
15

16
export const siteConfig: SiteConfig = {
17
  title: "CXKPRO_BLOG",
18
  subtitle: "主页",
19
  lang: "zh_CN", // 语言代码, 例如 'en', 'zh_CN', 'ja' 等
20
  themeColor: {
21
    hue: 250, // 主题色的默认色相，范围从 0 到 360。例如 red: 0, teal: 200, cyan: 250, pink: 345
22
    fixed: false, // 对访问者隐藏主题颜色选择器
23
  },
24
  banner: {
25
    enable: true,
26
    src: "assets/images/banner.png", // 相对于 /src 目录。如果以 '/' 开头，则相对于 /public 目录
27
    position: "top", // 相当于 object-position，仅支持 'top', 'center', 'bottom'。默认为 'center'
28
    credit: {
29
      enable: true, // 显示横幅图片的署名文本
30
      text: "Windows Insider Program 11th Anniversary", // 要显示的署名文本
31
      url: "https://www.microsoft.com/zh-cn/windowsinsider/articles/celebrating-11-years-together", // (可选) 指向原始艺术作品或艺术家页面的 URL 链接
32
    },
33
  },
34
  toc: {
35
    enable: true, // 在文章右侧显示目录
36
    depth: 2, // 目录中显示的最大标题深度，范围从 1 到 3
37
  },
38
  favicon: [
39
    // 将此数组留空以使用默认的 favicon
40
    // {
41
    //   src: '/favicon/icon.png',    // favicon 的路径，相对于 /public 目录
42
    //   theme: 'light',              // (可选) 'light' 或 'dark'，仅在您为亮色和暗色模式设置了不同的 favicon 时使用
43
    //   sizes: '32x32',              // (可选) favicon 的尺寸，仅在您有不同尺寸的 favicon 时设置
44
    // }
45
  ],
46
};
47

48
export const navBarConfig: NavBarConfig = {
49
  links: [
50
    LinkPreset.Home,
51
    LinkPreset.Archive,
52
    LinkPreset.About,
53
    // {
54
    //   name: "GitHub",
55
    //   url: "https://github.com/saicaca/fuwari", // 内部链接不应包含基础路径 ，因为它会自动添加
56
    //   external: true, // 显示外部链接图标，并将在新标签页中打开
57
    // },
58
  ],
59
};
60

61
export const profileConfig: ProfileConfig = {
62
  avatar: "assets/images/CXKPRO.png", // 相对于 /src 目录。如果以 '/' 开头，则相对于 /public 目录
63
  name: "IKUN_CXKPRO",
64
  bio: "这里该写什么?",
65
  links: [
66
    // {
67
    //   name: "Twitter",
68
    //   icon: "fa6-brands:twitter", // 访问 https://icones.js.org/ 获取图标代码
69
    //   // 如果某个图标集未被包含 ，您需要手动安装
70
    //   // `pnpm add @iconify-json/<icon-set-name>`
71
    //   url: "https://twitter.com",
72
    // },
73
    {
74
      name: "GitHub",
75
      icon: "fa6-brands:github",
76
      url: "https://github.com/IKUN-CXKPRO",
77
    },
78
    {
79
      name: "QQ",
80
      icon: "fa6-brands:qq",
81
      url: "https://wpa.qq.com/msgrd?v=3&uin=3078517671&site=qq&menu=yes",
82
    },
83
  ],
84
};
85

86
export const licenseConfig: LicenseConfig = {
87
  enable: true,
88
  name: "CC BY-NC-SA 4.0",
89
  url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
90
};
91

92
export const expressiveCodeConfig: ExpressiveCodeConfig = {
93
  // 注意：某些样式（例如背景颜色 ）已被覆盖，请参阅 astro.config.mjs 文件。
94
  // 请选择一个暗色主题，因为本博客主题目前仅支持暗色背景
95
  theme: "github-dark",
96
};