{"id":18250633,"url":"https://github.com/eneax/gatsby-datocms","last_synced_at":"2026-04-30T07:39:17.595Z","repository":{"id":103947973,"uuid":"515852657","full_name":"eneax/gatsby-datocms","owner":"eneax","description":"Experimenting with GatsbyJS, DatoCMS and Gatsby Cloud","archived":false,"fork":false,"pushed_at":"2022-07-20T06:29:27.000Z","size":1828,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-04T20:01:04.664Z","etag":null,"topics":["datocms","gatsby-cloud","gatsbyjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eneax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-20T05:58:46.000Z","updated_at":"2024-04-29T14:05:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee69b7eb-7da1-4819-b9bc-cb3e296f4a61","html_url":"https://github.com/eneax/gatsby-datocms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eneax/gatsby-datocms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eneax%2Fgatsby-datocms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eneax%2Fgatsby-datocms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eneax%2Fgatsby-datocms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eneax%2Fgatsby-datocms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eneax","download_url":"https://codeload.github.com/eneax/gatsby-datocms/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eneax%2Fgatsby-datocms/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260581152,"owners_count":23031549,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datocms","gatsby-cloud","gatsbyjs"],"created_at":"2024-11-05T09:45:25.857Z","updated_at":"2026-04-30T07:39:12.548Z","avatar_url":"https://github.com/eneax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.gatsbyjs.com\"\u003e\n  \u003cimg alt=\"Gatsby\" src=\"https://www.gatsbyjs.com/Gatsby-Monogram.svg\" width=\"60\" /\u003e\n\u003c/a\u003e\n\n# Gatsby Starter DatoCMS Homepage\n\nCreate a homepage using Gatsby and DatoCMS. This starter demonstrates how to use DatoCMS to build a homepage and can be customized to match your own visual branding.\n\n[View the Demo](https://gatsbydatocmshomepagets.gatsbyjs.io/)\n\n**Note:**\nThis version of the DatoCMS homepage starter is written in TypeScript. If you want to use DatoCMS but JavaScript is more your style, there is also a JavaScript version maintained on [GitHub](https://github.com/gatsbyjs/gatsby-starter-datocms-homepage).\n\n## Quick start\n\nYou will need a new or existing DatoCMS project to use this starter and will be asked for a Read-only API token as well as the [environment][] during installation.\nYou can find your API token under the Settings \u003e API tokens section of your project settings, and Environment can be found under the Settings \u003e Environments section. By default your environment will be named \"main\".\n\n[environment]: https://www.datocms.com/docs/scripting-migrations/introduction#whats-an-environment\n\n1. **Create a Gatsby site**\n\n   Use the Gatsby CLI to get started locally:\n\n   ```sh repo\n   npx gatsby new my-homepage https://github.com/gatsbyjs/gatsby-starter-datocms-homepage-ts\n   ```\n\n1. **Create your DatoCMS project**\n\n[![Clone DatoCMS project](https://dashboard.datocms.com/clone/button.svg)](https://dashboard.datocms.com/clone?projectId=60908\u0026name=Homepage+Starter)\n\nThis will clone the data model and records backing the demo site to populate your DatoCMS project.\n\n1. **Run the setup script**\n\nAfter setting up the cloned DatoCMS project, from your site's root directory, run:\n\n```sh\ncd my-homepage\nyarn setup\n```\n\nThis will run a script to create `.env.development` and `.env.production` files for you populated with your DatoCMS project environment variables.\n\n1. **Start developing**\n\n   In your site directory, start the development server:\n\n   ```sh\n   yarn start\n   ```\n\n   Your site should now be running at \u003chttp://localhost:8000\u003e\n\n1. **Open the source code and start editing**\n\n## Deploy your site\n\nOnce your content is available in DatoCMS, deploy your site to [Gatsby Cloud](https://gatsbyjs.com/products/cloud):\n\n1. Push your local site to a new repo in either GitHub, GitLab, or Bitbucket\n1. Log into your [Gatsby Cloud Dashboard][] and click on **Add a site**\n1. Use the **Import from a Git repository** option to find your site\n1. Add the environment variables from your `.env.production` file to Gatsby Cloud during setup\n1. Click **Build site** and your site should start building\n\nFor a more detailed walkthrough, see the tutorial on how to [build your site with Gatsby Cloud][tutorial].\n\n[gatsby cloud dashboard]: https://gatsbyjs.com/dashboard\n[tutorial]: https://www.gatsbyjs.com/docs/tutorial/part-1/#build-your-site-with-gatsby-cloud\n\n### Deploy without using the CLI\n\nAlternatively, you can deploy this starter directly to Gatsby Cloud.\nNote that you will need to set up your content in DatoCMS manually.\n\n[![Deploy to Gatsby](https://www.gatsbyjs.com/deploynow.png \"Deploy to Gatsby\")](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-datocms-homepage-ts)\n\n## Setting up Gatsby Cloud Preview\n\nTo enable Gatsby Preview with this site, see the documentation for\n[Installing Content Sync for DatoCMS][].\n\n[connecting to datocms]: https://support.gatsbyjs.com/hc/en-us/articles/360052324454-Connecting-to-DatoCMS\n[installing content sync for datocms]: https://support.gatsbyjs.com/hc/en-us/articles/4410387813907-Installing-Content-Sync-for-DatoCMS\n\n## What's included?\n\n```sh\n├── README.md\n├── gatsby-config.js\n├── gatsby-node.js\n├── src\n│   ├── components\n│   ├── pages\n│   ├── colors.css.ts\n│   ├── styles.css.ts\n│   └── theme.css.ts\n└── .env.EXAMPLE\n```\n\n1. **`gatsby-config.js`**: [Gatsby config][] file that includes plugins required for this starter.\n1. **`gatsby-node.js`**: [Gatsby Node][] config file that creates an abstract data model for the homepage content.\n1. **`src/`**: The source directory for the starter, including pages, components, and [Vanilla Extract][] files for styling.\n\n[gatsby config]: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/\n[gatsby node]: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/\n[vanilla extract]: https://vanilla-extract.style/\n\n## How to\n\n### Update the color theme\n\nTo update the colors used in this starter, edit the `src/colors.css.ts` file.\n\n```.ts\n// src/colors.css.ts\nexport const colors = {\n  background: \"#fff\",\n  text: \"#db3000\",\n  primary: \"#db3000\",\n  muted: \"#fffbfa\",\n  active: \"#751a00\",\n  black: \"#000\",\n}\n\n```\n\nIf you'd like to add additional colors, add additional keys to this object.\nThis file is imported into `src/theme.css.ts` and creates CSS custom properties, that can be imported and used in other `.css.ts` files.\n\nThe UI components file `src/components/ui.tsx` imports styles from `src/components/ui.css.ts`. You can see how the theme and color values are being used in this file.\n\n### Add your logo\n\n![Logo](./docs/images/logo.png)\n\nReplace the `src/components/brand-logo.tsx` component with your own brand logo.\nIf you have an SVG version, it can be rendered inline as a React component, following the example in this file. Note that SVG attributes will need to be camel cased for JSX.\n\nUsing an inline SVG for the logo allows it to pick up the colors used in CSS, which is how the logo colors are inverted for the mobile menu.\n\nIf you prefer to use an image, use the [`StaticImage`](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#staticimage) component from `gatsby-plugin-image` in place of the SVG in this file.\n\n### Customize headings, buttons, and other styles\n\n![Headings \u0026 Buttons](./docs/images/headings-buttons.png)\n\nTo further customize the look and feel of the homepage, edit the UI components in `src/components/ui.tsx` and styles in `src/components/ui.css.ts`.\n\n### Customize section components\n\nTo customize any of the sections of the homepage, edit the relevant component in `src/components`.\nMost of the styles for these components are handled with shared UI components in `src/components/ui.tsx`.\n\n### Create custom section components\n\nTo create a new type of section in your homepage, you'll want to create a new section component, using the existing components as an example.\nFor this example, we'll create a new \"Banner\" component.\n\n1. First, update your content model in DatoCMS\n\n   1. In your DatoCMS project, go to Settings \u003e Blocks Library to create a new block called \"Banner.\"\n\n      \u003cimg src=\"./docs/images/step-1.png\" alt=\"Step 1\" width=\"300\" /\u003e\n\n   1. For this example, add two Text fields to your new block type: `heading` and `text` – these can be _Single-line string_ types.\n\n      \u003cimg src=\"./docs/images/step-2.png\" alt=\"Step 2\" width=\"300\" /\u003e\n      \u003cimg src=\"./docs/images/step-3.png\" alt=\"Step 3\" width=\"300\" /\u003e\n      \u003cimg src=\"./docs/images/step-4.png\" alt=\"Step 4\" width=\"300\" /\u003e\n      \u003cimg src=\"./docs/images/step-5.png\" alt=\"Step 5\" width=\"300\" /\u003e\n\n   1. After saving the new block type, navigate to Settings \u003e Models and edit the _Homepage_ model.\n\n      \u003cimg src=\"./docs/images/step-6.png\" alt=\"Step 6\" width=\"500\" /\u003e\n\n   1. Edit the _Content_ field and under _Validations_, add the _Banner_ to the list of allowed blocks.\n\n      \u003cimg src=\"./docs/images/step-7.png\" alt=\"Step 7\" width=\"300\" /\u003e\n\n   1. Go to the _Content_ tab in your project select Homepage, scroll to the bottom and click _Create new_ to add content for your Banner, then save the _Homepage_.\n\n      \u003cimg src=\"./docs/images/step-8.png\" alt=\"Step 8\" width=\"500\" /\u003e\n\n1. Update `gatsby-node.js`\n\n   Edit your site's `gatsby-node.js` file, adding an interface for `HomepageBanner` that matches your content model in DatoCMS.\n   This allows the homepage to query the abstract `HomepageBanner` type.\n\n   ```js\n   // in gatsby-node.js\n   exports.createSchemaCustomization = async ({ actions }) =\u003e {\n     // ...\n     actions.createTypes(`\n       interface HomepageBanner implements Node \u0026 HomepageBlock {\n         id: ID!\n         blocktype: String\n         heading: String\n         text: String\n       }\n     `)\n     // ...\n     actions.createTypes(`\n       type DatoCmsBanner implements Node \u0026 HomepageBanner \u0026 HomepageBlock @dontInfer {\n         id: ID!\n         blocktype: String @blocktype\n         heading: String\n         text: String\n       }\n     `)\n     // ...\n   }\n   ```\n\n1. Next, create the Banner component:\n\n   ```jsx fileExt\n   // src/components/banner.tsx\n   import * as React from \"react\"\n   import { graphql } from \"gatsby\"\n   import { Section, Container, Heading, Text } from \"./ui\"\n\n   export default function Banner(props) {\n     return (\n       \u003cSection\u003e\n         \u003cContainer\u003e\n           \u003cHeading\u003e{props.heading}\u003c/Heading\u003e\n           \u003cText\u003e{props.text}\u003c/Text\u003e\n         \u003c/Container\u003e\n       \u003c/Section\u003e\n     )\n   }\n\n   export const query = graphql`\n     fragment HomepageBannerContent on HomepageBanner {\n       id\n       heading\n       text\n     }\n   `\n   ```\n\n1. Export the component from `src/components/sections.tsx`\n\n   ```js fileExt\n   // src/components/sections.tsx\n   export { default as HomepageHero } from \"./hero\"\n   export { default as HomepageFeature } from \"./feature\"\n   export { default as HomepageFeatureList } from \"./feature-list\"\n   export { default as HomepageLogoList } from \"./logo-list\"\n   export { default as HomepageBenefitList } from \"./benefit-list\"\n   export { default as HomepageTestimonialList } from \"./testimonial-list\"\n   export { default as HomepageStatList } from \"./stat-list\"\n   export { default as HomepageCta } from \"./cta\"\n   export { default as HomepageProductList } from \"./product-list\"\n\n   // add export for new component\n   export { default as HomepageBanner } from \"./banner\"\n   ```\n\n1. Add the GraphQL query fragment to the query in `src/pages/index.tsx`\n\n   ```js fileExt\n   // in src/pages/index.tsx\n   export const query = graphql`\n     {\n       homepage {\n         id\n         title\n         description\n         image {\n           id\n           url\n         }\n         blocks: content {\n           id\n           blocktype\n           ...HomepageHeroContent\n           ...HomepageFeatureContent\n           ...HomepageFeatureListContent\n           ...HomepageCtaContent\n           ...HomepageLogoListContent\n           ...HomepageTestimonialListContent\n           ...HomepageBenefitListContent\n           ...HomepageStatListContent\n           ...HomepageProductListContent\n           # New component fragment\n           ...HomepageBannerContent\n         }\n       }\n     }\n   `\n   ```\n\n## Troubleshooting\n\n### Errors after making changes to the schema\n\nIf you've made changes to the `gatsby-node.js` file or changes to the DatoCMS data model, clear the Gatsby cache before running the develop server:\n\n```sh\nyarn clean \u0026\u0026 yarn start\n```\n\n---\n\n## 🎓 Learning Gatsby\n\nLooking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:\n\n- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.\n- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).**\n\n## 💫 Deploy\n\n[Build, Deploy, and Host On The Only Cloud Built For Gatsby](https://www.gatsbyjs.com/cloud/)\n\nGatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feneax%2Fgatsby-datocms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feneax%2Fgatsby-datocms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feneax%2Fgatsby-datocms/lists"}