使用Astro来搭建静态网站

发表于 |

介绍

Astro是一个基于JavaScript的静态站点生成器, 和Hexo有点类似, 支持Markdown构建内容, 但Astro性能会更好, 它具有独特的岛屿架构，按需加载JS，能显著减少初始加载时间, 非常适合需要快速首屏加载的场景比如如博客、营销网站、企业官网等等

Astro官网: 点击进入

环境搭建

这里以MacOs平台为例:

  1. 安装npm

    1
    brew install npm

  2. 安装nodejs

    这里指定nodejs版本为v18

    1
    npm install -g n

    然后

    1
    n v18

开始

  1. 创建工程模板

    1
    npm create astro@latest 工程名称

    image-20250907114519941

    根据提示一步步往下走即可

    image-20250907114710691

    完成后会在当前目录生成工程文件夹, 目录如下:

    image-20250907114814405

  2. 运行工程

    1
    npm run dev

    开启调试, 此时在浏览器地址栏输入http://localhost:4321/即可实时访问

    image-20250907123316643

  3. 打包静态文件

    工程编写完毕后, 即可输出网站静态文件

    1
    npm run build

    执行完毕后, 在工程目录下会自动生成dist文件夹

    image-20250907123606000

    将dist目录下的所有文件上传到你的静态服务器上就可访问了

Astro与React结合

Astro不仅可以和vue结合使用 还可以和React结合, 这里做一个简单Tailwind风格的网站演示

  1. 创建项目

    1
    npm create astro@latest my-toolbox -- --template framework-react

  2. 安装依赖

    1
    2
    3
    cd my-toolbox

    npm install @astrojs/tailwind tailwindcss react-dnd react-dnd-html5-backend

  3. 初始化Tailwind

    1
    npx tailwindcss init -p

  4. 配置Tailwind.config.js

    1
    2
    3
    4
    5
    6
    7
    export default {
      content: ['./src/*/.{astro,js,jsx,ts,tsx}'],
      theme: {
        extend: {},
      },
      plugins: [],
    }

  5. 配置astro.config.mjs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import { defineConfig } from 'astro/config';
    import react from '@astrojs/react';
    import tailwind from '@astrojs/tailwind';

    export default defineConfig({
      integrations: [
        react(),
        tailwind({
          config: {
            applyBaseStyles: false,
          },
        }),
      ],
      server: {
        port: 3000,
      },
      build: {
        format: 'file',
      },
    });

  6. 编写主页

  7. 工作流页面

  8. 工具注册中心

工程目录结构介绍

以下是示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
src/
├── components/          # 可复用的UI组件
│   ├── ToolCard.astro  # (或 .vue/.jsx)
│   └── Modal.astro
├── layouts/            # 页面布局组件
│   └── BaseLayout.astro
├── pages/              # 页面路由
│   ├── index.astro     # 主页
│   ├── tool/           # 独立工具页面
│   │   ├── [toolId].astro
│   │   └── image-to-word.astro
│   └── workflow.astro   # 工作流构建器页面
├── core/               # 核心逻辑
│   ├── tool-registry.js
│   ├── workflow-engine.js
│   └── storage-manager.js # 本地存储管理
└── styles/
    └── global.css      # 全局样式
public/                  # 静态资源
    ├── images/
    └── js/lib/         # 可能需要的第三方Wasm库等

本文为作者原创 转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%