%20(2).svg)
项目简介
本项目是基于Gatsby框架构建的博客系统，融合了React、GraphQL、MDX和TailwindCSS等技术，具备动态页面创建、内容管理和样式定制功能。借助Gatsby的静态站点生成能力，可快速构建高性能博客网站。
项目的主要特性和功能
- 动态页面创建：利用Gatsby的
createPagesAPI，依据MDX文件动态生成页面。 - MDX支持：采用MDX格式编写博客内容，支持在Markdown中嵌入React组件，实现更灵活的内容展示。
- GraphQL数据查询：通过GraphQL查询站点元数据和博客内容，便于数据管理与展示。
- TailwindCSS样式定制：集成TailwindCSS，提供丰富样式选择和灵活定制能力。
- 插件扩展：支持使用Gatsby插件扩展功能，如图片优化、代码高亮、自动生成锚点等。
- 环境变量配置：支持通过
.env文件配置环境变量，方便开发和生产环境切换。
安装使用步骤
1. 安装依赖
确保已安装Node.js和npm（或yarn），在项目根目录下运行以下命令安装依赖：
bash
npm install
2. 启动开发服务器
安装完成后，运行以下命令启动开发服务器：
bash
gatsby develop
开发服务器启动后，可在浏览器中访问http://localhost:8000查看项目。
3. 构建生产环境
部署项目前，运行以下命令构建生产环境的静态文件：
bash
gatsby build
构建完成后，生成的静态文件存于public目录，可将这些文件部署到支持静态文件托管的平台。
4. 配置环境变量
项目支持通过.env文件配置环境变量。可在项目根目录下创建.env和.env.development文件，分别配置开发和生产环境的环境变量。
示例：
```bash
API_KEY=your_api_key
GATSBY_API_KEY=your_gatsby_api_key
API_KEY=your_dev_api_key ```
5. 使用MDX编写博客
在src/content目录下创建.mdx文件编写博客内容，可使用Markdown语法并嵌入React组件。
示例：
```mdx
title: "我的第一篇博客" date: "2023-10-01"
这是我的第一篇博客，使用MDX编写。 ```
6. 自定义样式
项目集成了TailwindCSS，可在globals.css中自定义样式，或在组件中直接使用Tailwind的类名。
示例：
css
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】