安装

环境准备

在开始搭建Fispo博客系统前，请确保已完成以下工具的安装：

Node.js运行环境
- 要求版本：18.0.0及以上
- 官方下载地址：Node.js
Git版本控制工具
- 官方下载地址：Git
Markdown编辑器
- 推荐使用：VSCode（需安装Markdown插件）
- 其他支持 Markdown 语法的编辑器也可使用

安装 Fispo 初始化工具

完成环境配置后，通过 npm 全局安装 Fispo 初始化工具：

npm install -g @fispo/create-fispo

初始化项目

执行以下命令创建博客项目：

bash

create-fispo <项目目录名>

文件结构

初始化后，您的项目文件夹将如下所示：

.
└── docs                     # 存放博客相关内容
    ├── post                 # 文章目录（Markdown/MDX）
    └── public               # 存放公共资源文件的目录
├── .gitignore
├── .npmrc
├── fispo.config.ts          # 配置文件
├── package.json
├── README.md
└── package.json

配置文件

通过fispo.config.ts文件进行站点配置，基础配置示例如下：

typescript

import { defineConfig } from "fispo-core";

export default defineConfig({
  // 站点基础信息
  title: "XXX17的个人博客",
  author: "XXX17",
  description: "学无止境",
  
  // 主题配置
  themeConfig: {
    navMenus: [
      {
        title: "首页",
        path: "/",
        icon: {
          prefix: "fas",
          iconName: "home",
        },
      },
      {
        title: "标签",
        path: "/tag",
        icon: {
          prefix: "fas",
          iconName: "tag",
        },
      },
      {
        title: "分类",
        path: "/category",
        icon: {
          prefix: "fas",
          iconName: "folder-open",
        },
      },
      {
        title: "关于",
        path: "/about/",
        icon: {
          prefix: "fas",
          iconName: "heart",
        },
      },
    ],
  },
});

完整配置说明请参考：配置项

启动项目

工具已自动在package.json中注入以下脚本：

json

{
  "scripts": {
    "dev": "fispo dev",      // 开发服务器（含热更新）
    "build": "fispo build",  // 生产环境构建
    "preview": "fispo preview", // 构建后预览
    "deploy": "fispo deploy" // 部署到服务器
  }
}

dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：

npm run dev

除了 npm 脚本，还可以直接调用 Fispo:

npx fispo dev

开发服务器默认会运行在 http://localhost:5173 上。在浏览器中访问 URL 以查看新站点的运行情况吧！

上次更新：2025-07-29

下一页建站