830 字

4 分钟

搭建博客教程（一）

2025-08-10

2025-08-11

博客

博客开发

/

前端开发

准备工作：

Node.js：v18.20.8 或 v20.3.0、v22.0.0 或更高版本。

文本编辑器： VSCode并且安装官方Astro扩展。

终端： Astro通过其命令行界面（CLI）访问。

Github： GitHub 注册一个GitHub账号，并且创建一个Github仓库。

Git： 下载Git，并做好相关配置。

Obsidian

一、部署工作#

1. 安装#

在你的电脑选择一个你用来存放博客项目的文件夹，用终端打开输入一下命令：git clone https://github.com/saicaca/fuwari.git cd到项目所在目录，安装你的依赖：pnpm insall 启动你的项目pnpm dev

2.博客自定义#

2.1 博客配置#

你可以通过配置文件 src/config.ts 自定义博客，以我自己的配置文件为例：

1
export const siteConfig: SiteConfig = {
2
  title: 'mioの小窝',
3
  subtitle: '四季正与你们擦肩而过',
4
  lang: 'zh_CN',         // 在这里设置你的博客语言，'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
5
  themeColor: {
6
    hue: 250,         // 在这里设置你的主题色， Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
7
    fixed: false,     // 选择是否固定主题色，默认false
8
  },
9
  banner: {
10
    enable: true,
11
    src: 'assets/images/魔法使之夜.jpg',   // 在这里设置你的首页横幅图片，Relative to the /src directory. Relative to the /public directory if it starts with '/'
12
    position: 'center',      // 在这里设置你的横幅图片位置，Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
13
    credit: {
14
      enable: false,         // 这里可以设置你的横幅图片的作者信息，Display the credit text of the banner image
15
      text: '',              // Credit text to be displayed
16
      url: ''                // (Optional) URL link to the original artwork or artist's page
17
    }
18
  },
19
  toc: {
20
    enable: true,           // 这里可以设置是否显示文章目录，Display the table of contents on the right side of the post
21
    depth: 2                // 文章目录默认显示到2级，Maximum heading depth to show in the table, from 1 to 3
22
  },
23
  favicon: [    // Leave this array empty to use the default favicon
24
    // {
25
    //   src: '/favicon/icon.png',    // Path of the favicon, relative to the /public directory
26
    //   theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
27
    //   sizes: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
28
    // }
29
  ]
30
}

2.2 顶部导航栏Github部分#

1
export const navBarConfig: NavBarConfig = {
2

3
links: [
4

5
LinkPreset.Home,
6

7
LinkPreset.Archive,
8

9
LinkPreset.About,
10

11
{
12

13
name: 'GitHub',
14

15
url: 'https://github.com/saicaca/fuwari', // 想要跳转的url
16

17
external: true, //是否显示外部链接图标并将在新标签中打开
18

19
},
20

21
],
22

23
}

2.3 左侧信息栏配置#

1
export const profileConfig: ProfileConfig = {
2

3
avatar: 'assets/images/avatar.png', // 头像图片文件路径
4

5
name: 'mio', // 你的昵称
6

7
bio: '四季正与你们插肩而过', // 你的签名
8

9
links: [ // 社交栏配置
10

11
{
12

13
name: 'Twitter',
14

15
icon: 'fa6-brands:twitter', // https://icones.js.org/ icon图标网站
16

17
url: 'https://twitter.com/',
18

19
},
20

21
{
22

23
name: 'Steam',
24

25
icon: 'fa6-brands:steam',
26

27
url: 'https://steamcommunity.com',
28

29
},
30

31
{
32

33
name: 'GitHub',
34

35
icon: 'fa6-brands:github',
36

37
url: 'https://github.com',
38

39
},
40

41
{
42

43
name: 'Email',
44

45
icon: 'material-symbols:mail',
46

47
url: '',
48

49
},
50

51
],
52

53
}

2.4 文章格式#

执行 pnpm new-post <filename> 创建新文章页面后就可以在 src/content/posts/ 目录中编辑你的第一篇文章了。文章需包含以下内容：

1
---
2

3
title: My First Blog Post <!-- 你的文章标题 -->
4

5
published: 2023-09-09 <!-- 文章发布时间 -->
6

7
description: This is the first post of my new Astro blog. <!-- 简单描述你的文章，可有可无 -->
8

9
image: /images/cover.jpg <!-- 文章主页的封面，可有可无 -->
10

11
tags: [Foo, Bar] <!-- 文章标签 -->
12

13
category: Front-end <!-- 文章分类 -->
14

15
draft: false <!-- 文文章是否为草稿，默认false；设置为true后部署后不可见，但本地开发预览时仍可见 -->
16

17
language: '' <!-- 可有可无，按需设置 -->
18

19
---