Gatsby Starter Portfolio: Bella 项目教程

Gatsby Starter Portfolio: Bella 项目教程

1. 项目介绍

Gatsby Starter Portfolio: Bella 是一个为设计师和摄影师量身定制的单页 Gatsby 项目启动器。它基于 Prismic.io 作为内容管理系统（CMS），提供了简洁、快速且美观的网站构建基础。该项目的目标是为用户提供一个最小化的、快速的网站启动平台，特别适合用于设计或摄影作品集的展示。

主要特点

• Gatsby v2.0.0：使用最新的 Gatsby 版本。
• 可配置性：通过 website.js 文件轻松更改重要信息。
• Google Fonts：集成 Google Fonts，提供丰富的字体选择。
• Prismic.io 作为 CMS：使用 Prismic.io 作为内容管理系统。
• Emotion + Emotion-Grid：用于 CSS 样式管理。
• SEO 优化：包括 Sitemap、Schema.org JSON-LD、OpenGraph 标签、Twitter 标签等。
• 离线支持：支持 WebApp Manifest 和离线访问。
• 响应式图片：支持不同屏幕尺寸的图片优化。

2. 项目快速启动

2.1 检查开发环境

确保你的开发环境已经安装了 Node.js、Gatsby CLI 和 node-gyp。

2.2 克隆项目

使用以下命令克隆项目并安装依赖：

gatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-bella.git
cd project-name

2.3 配置 Prismic.io

如果你选择使用 Prismic.io 作为 CMS，你需要创建一个与项目中相同的“自定义类型”。具体步骤如下：

1. 登录 Prismic.io 并创建一个新的“自定义类型”。
2. 命名为“Case Study”，API ID 为 case_study。
3. 在 JSON 编辑器中粘贴以下内容：

{
  "Content": {
    "uid": {
      "type": "UID",
      "config": {
        "label": "SEO",
        "placeholder": "SEO"
      }
    },
    "header_image": {
      "type": "Image",
      "config": {
        "constraint": {
          "width": 1920,
          "height": 1080
        },
        "thumbnails": [],
        "label": "Header Image"
      }
    },
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1",
        "label": "Title",
        "placeholder": "Case study title"
      }
    },
    "subtitle": {
      "type": "StructuredText",
      "config": {
        "single": "heading2",
        "label": "Subtitle",
        "placeholder": "Subtitle"
      }
    },
    "content": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, list-item, o-list-item",
        "label": "content",
        "placeholder": "Case study content"
      }
    }
  }
}

4. 在 gatsby-config.js 中配置 Prismic API Key。

2.4 开发环境启动

在 Prismic.io 中添加内容并发布后，运行以下命令启动本地开发服务器：

npm run dev

3. 应用案例和最佳实践

3.1 设计师作品集

Gatsby Starter Portfolio: Bella 非常适合用于展示设计师的作品集。通过 Prismic.io 管理内容，设计师可以轻松更新和维护自己的作品展示。

3.2 摄影师作品集

对于摄影师来说，该项目提供了大字体和图片展示的特性，非常适合展示高质量的摄影作品。通过响应式设计和优化图片加载，确保在不同设备上都能有良好的展示效果。

3.3 个人博客

虽然该项目主要针对作品集，但也可以通过适当的修改用于个人博客。通过 Prismic.io 管理文章和内容，可以轻松实现内容的更新和发布。

4. 典型生态项目

4.1 Gatsby Starter Portfolio: Emma

这是一个类似的项目，专注于提供简洁的设计和快速的加载速度。适合用于个人作品集和博客。

4.2 Gatsby Starter Portfolio: Emilia

另一个专注于设计和摄影作品集的 Gatsby 启动器，提供了丰富的样式和布局选项。

4.3 Gatsby Starter Portfolio: Cara

这个项目提供了更多的自定义选项和插件支持，适合需要更多功能和扩展性的用户。

通过这些生态项目，用户可以根据自己的需求选择最适合的 Gatsby 启动器，快速搭建自己的网站。