Gatsby + React + Bootstrap 5 + Contentful 的博客启动器
webb-starter-gatsby-react-bootstrap5-contentful — Gatsby 启动器模板
作者 MauriceWebb
基于 Gatsby、React、Bootstrap 5 与 Contentful 的博客启动器,附带内容模型导入脚本与示例配置。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
内容模型与结构较简单,便于按项目需要调整
使用 Contentful Delivery API 的同步特性获取内容
通过 gatsby-image 与 Contentful Images API 输出响应式图片
提供 npm run setup 自动导入内容模型并生成 .contentful.json
包含 dev、build、serve 三条常用 npm 脚本
模板详细介绍
这是一个用于搭建静态博客的启动器模板,技术组合为 Gatsby、React、Bootstrap 5 和 Contentful。它源自 Contentful 社区维护的 Gatsby Contentful Starter 的精简版本,保留了博客所需的基本内容模型与页面结构,方便按需调整。
内容方面,模板通过 Contentful 的 Delivery API 获取数据,并使用其同步(synchronization)特性;图片由 gatsby-image 结合 Contentful Images API 生成响应式/自适应输出。仓库提供 npm run setup 命令,会询问 Space ID 以及 Management API 和 Delivery API 的访问令牌,随后把所需内容模型导入指定空间,并生成配置文件 .contentful.json;也可以手动把 .contentful.json.sample 重命名为 .contentful.json 后自行填写配置。
常用命令包括:npm run dev 以开发模式本地运行并支持热重载;npm run build 生成生产构建到 ./public,产物可放到任意静态托管;npm run serve 启动一个面向生产构建的本地服务,运行前需先完成构建。README 中未列出具体依赖版本,部署细节指向 Contentful 官方入门指南。
适合你的项目吗?
适用场景
- 用 Contentful 作为内容源搭建个人或团队博客
- 在 Gatsby 项目中接入 Contentful 内容模型与 Delivery API
- 需要一个带 Bootstrap 5 样式基础的静态博客起点
- 把构建产物部署到任意静态托管服务
适合人群
- 熟悉 Gatsby 与 React、希望用 Contentful 管理内容的开发者
- 需要可自行调整内容模型的博客项目
- 接受通过命令行完成初始配置与内容模型导入的团队
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后执行 npm install 安装依赖,也可用 gatsby new 基于该仓库创建项目
- 2
运行 npm run setup,按提示提供 Space ID 及 Management API、Delivery API 访问令牌,自动导入内容模型并生成 .contentful.json
- 3
若手动配置,将 .contentful.json.sample 重命名为 .contentful.json 并填入自己的配置
- 4
开发用 npm run dev;构建用 npm run build(输出到 ./public);本地预览生产构建用 npm run serve,需先构建
- 5
部署流程参见 Contentful 官方入门指南;演示图片等第三方素材需按各自许可核对
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 使用前必须拥有 Contentful 账号并获取 Space ID 以及 Management API 和 Delivery API 的访问令牌,否则无法导入内容模型或生成配置文件。
- 该模板是社区维护的 Gatsby Contentful Starter 的精简版本,功能相对有限,如需更多特性需参考原始版本。
- 内容发布依赖 Contentful 服务,自动化发布通常需要配合 Travis CI 或 Netlify 等外部服务,可能产生额外账号或费用。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
This command will ask you for a space ID, and access tokens for the Contentful Management and Delivery API and then import the needed content model into the space you define and write a config file (`./.contentful.json`).
README 原文
This is a simplified version of the [Gatsby Contentful Starter](https://github.com/contentful-userland/gatsby-contentful-starter) which is maintained by our Community.
README 原文
https://github.com/MauriceWebb/webb-starter-gatsby-react-bootstrap5-contentful/blob/master/LICENSEhttps://github.com/MauriceWebb/webb-starter-gatsby-react-bootstrap5-contentful/blob/master/README.mdWith Contentful and Gatsby you can connect your favorite static site generator with an API that provides an easy to use interface for people writing content and automate the publishing using services like [Travis CI](https://travis-ci.org/) or [Netlify](https://www.netlify.com/).
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 73 / 100
- 技术栈
- Gatsby · React · HTML
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2023-01-11
- 截图检查日期
- 2026-10-13
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Gatsby。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-13
查看当时使用的来源资料
SHA-256: f6b4479a1b3346d25c70c74c6f14b558c28a0202c3a5432386ad65b0d96c993a
2026-10-13T06:42:14.584Z
来源文件 / 仓库# Contentful Gatsby Starter Blog Create a [Gatsby](http://gatsbyjs.com/) blog powered by [Contentful](https://www.contentful.com). This is a simplified version of the [Gatsby Contentful Starter](https://github.com/contentful-userland/gatsby-contentful-starter) which is maintained by our Community.  Static sites are scalable, secure and have very little required maintenance. They come with a drawback though. Not everybody feels good editing files, building a project and uploading it somewhere. This is where Contentful comes into play. With Contentful and Gatsby you can connect your favorite static site generator with an API that provides an easy to use interface for people writing content and automate the publishing using services like [Travis CI](https://travis-ci.org/) or [Netlify](https://www.netlify.com/). ## Features - Simple content model and structure. Easy to adjust to your needs. - Use the [synchronization feature](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/synchronization) of our [Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/). - Responsive/adaptive images via [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/) and our [Images API](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/synchronization/initial-synchronization-of-entries-of-a-specific-content-type). ## Getting started See our [official Contentful getting started guide](https://www.contentful.com/developers/docs/tutorials/general/get-started/). ### Get the source code and install dependencies. ``` $ git clone https://github.com/contentful/starter-gatsby-blog.git $ npm install ``` Or use the [Gatsby CLI](https://www.npmjs.com/package/gatsby-cli). ``` $ gatsby new contentful-starter-blog https://github.com/contentful/starter-gatsby-blog/ ``` ### Set up of the needed content model and create a configuration file This project comes with a Contentful setup command `npm run setup`. This command will ask you for a space ID, and access tokens for the Contentful Management and Delivery API and then import the needed content model into the space you define and write a config file (`./.contentful.json`). `npm run setup` automates that for you but if you want to do it yourself rename `.contentful.json.sample` to `.contentful.json` and add your configuration in this file. ## Crucial Commands ### `npm run dev` Run the project locally with live reload in development mode. ### `npm run build` Run a production build into `./public`. The result is ready to be put on any static hosting you prefer. ### `npm run serve` Spin up a production-ready server with your blog. Don't forget to build your page beforehand. ## Deployment See the [official Contentful getting started guide](https://www.contentful.com/developers/docs/tutorials/general/get-started/). ## Contribution Feel free to open pull requests to fix bugs. If you want to add features, please have a look at the [original version](https://github.com/contentful-userland/gatsby-contentful-starter). It is always open to contributions and pull requests. You can learn more about how Contentful userland is organized by visiting [our about repository](https://github.com/contentful-userland/about).
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

gatsby-starter-gcn
gatsby-starter-gcn 是一个面向静态网站构建的 Gatsby 启动器,将内容管理、部署和前端开发串联起来。
Gatsby · 博客

gatsby-starter-morning-dew
:rocket: A Gatsby theme/starter to build lightning-fast blog/websites
Gatsby · 博客

starter-gatsby-blog
这是一个由 Contentful 社区维护的 Gatsby 博客启动器,目标是把静态站点的低维护成本与 Contentful 的友好编辑界面结合起来。
Gatsby · 社区

automatic-gatsbyjs-app-landing-page
Automatic GatsbyJS App Landing Page - Automatically generate iOS app landing page using GatsbyJS
Gatsby · 工具站

gatsby-starter-cv
A simple starter to get up and developing your digital curriculum with GatsbyJS
Gatsby · 启动器

clay-theme
Image-centric Gatsby theme for publishers, portfolios, photographers blogs and more.
Gatsby · 作品集
