Gatsby Starter Portfolio: Emma 使用教程
1. 项目的目录结构及介绍
gatsby-starter-portfolio-emma/
├── src/
│ ├── pages/
│ │ └── index.mdx
│ ├── assets/
│ │ └── images/
│ ├── components/
│ │ └── Layout.tsx
│ ├── styles/
│ │ └── theme.ts
├── static/
│ └── favicon.ico
├── .gitignore
├── .npmrc
├── .nvmrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── gatsby-config.ts
├── package.json
└── tsconfig.json
目录结构说明:
src/
: 源代码目录,包含页面、组件、样式等。pages/
: 页面文件,使用 MDX 格式。assets/
: 资源文件,如图片等。components/
: 组件文件。styles/
: 样式文件。
static/
: 静态文件目录,如 favicon 等。.gitignore
: Git 忽略文件配置。.npmrc
: npm 配置文件。.nvmrc
: Node 版本管理配置文件。CHANGELOG.md
: 更新日志。LICENSE
: 项目许可证。README.md
: 项目说明文档。gatsby-config.ts
: Gatsby 配置文件。package.json
: 项目依赖和脚本配置。tsconfig.json
: TypeScript 配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 package.json
中的脚本配置。以下是常用的启动命令:
{
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
}
}
启动命令说明:
npm run develop
: 启动开发服务器,默认运行在http://localhost:8000
。npm run build
: 构建生产环境版本。npm run serve
: 启动本地服务,预览构建后的生产环境版本。npm run clean
: 清除缓存和构建文件。
3. 项目的配置文件介绍
gatsby-config.ts
这是 Gatsby 的主要配置文件,包含站点元数据、插件配置等。
module.exports = {
siteMetadata: {
title: `Gatsby Starter Portfolio: Emma`,
description: `Minimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images.`,
author: `@lekoarts_de`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-portfolio-emma`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `static/favicon.ico`,
},
},
`gatsby-plugin-gatsby-cloud`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
配置文件说明:
siteMetadata
: 站点元数据,包括标题、描述、作者等。plugins
: 插件配置,包括图像处理、文件系统源、PWA 支持等。
通过以上配置,可以自