Gatsby Starter Portfolio: Emma 使用教程

Gatsby Starter Portfolio: Emma 使用教程

gatsby-starter-portfolio-emmaMinimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.项目地址:https://gitcode.com/gh_mirrors/ga/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 支持等。

通过以上配置，可以自

gatsby-starter-portfolio-emmaMinimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-starter-portfolio-emma