{"id":23380632,"url":"https://github.com/agility/agilitycms-gatsby-starter","last_synced_at":"2025-04-08T07:43:21.948Z","repository":{"id":47930994,"uuid":"357589058","full_name":"agility/agilitycms-gatsby-starter","owner":"agility","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-11T18:59:04.000Z","size":1785,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-14T04:51:14.655Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agility.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-13T14:47:57.000Z","updated_at":"2021-08-11T18:59:07.000Z","dependencies_parsed_at":"2022-08-12T14:31:21.516Z","dependency_job_id":null,"html_url":"https://github.com/agility/agilitycms-gatsby-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-gatsby-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-gatsby-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-gatsby-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-gatsby-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agility","download_url":"https://codeload.github.com/agility/agilitycms-gatsby-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801198,"owners_count":20998331,"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":[],"created_at":"2024-12-21T20:17:22.498Z","updated_at":"2025-04-08T07:43:21.924Z","avatar_url":"https://github.com/agility.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Agility CMS \u0026 Gatsby Starter\n\nThis is sample Gatsby starter site that uses Agility CMS and aims to be a foundation for building fully static sites using Gatsby and Agility CMS.\n\n[Live Website Demo](https://agilitycmsgatsbystarter.gatsbyjs.io/)\n\n[New to Agility CMS? Sign up for a FREE account](https://agilitycms.com/free)\n\n## About This Starter\n- Uses [Gatsby V3](https://www.gatsbyjs.com/blog/gatsby-v3/) - The latest version of Gatsby’s core framework which introduces massive improvement to the developer and user experience.\n- Uses [AgilityImage](https://github.com/agility/gatbsy-image-agilitycms) - A custom image component utilizing the new Gatsby Image Plugin that take's images stored within Agility CMS and handles all of the hard parts of displaying responsive images that follow best practices for performance on your website or application.\n- Uses [`gatsby-source-agilitycms`](https://github.com/agility/gatsby-source-agilitycms) - Our official Gatsby plugin that will only refresh content that has changed since your last build, so you can rest easy your builds will be fast, regardless of how many pages you have.\n- Supports full [Page Management](https://help.agilitycms.com/hc/en-us/articles/360055805831).\n- Supports Preview Mode.\n- Provides a functional structure that loads a Page Templates dynamically, and also dynamically loads and renders appropriate Agility CMS Page Modules (as React components).\n\n### Tailwind CSS\n\nThis starter uses [Tailwind CSS](https://tailwindcss.com/), a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.\n\nIt also comes equipped with [Autoprefixer](https://www.npmjs.com/package/autoprefixer), a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you.\n\n## Getting Started\n\nTo start using the Agility CMS \u0026 Gatsby Starter, [sign up](https://agilitycms.com/free) for a FREE account and create a new Instance using the Blog Template.\n\n1. Clone this repository\n2. Run `npm install` or `yarn install`\n3. Rename the `.env.development.example` file to `.env.development`\n4. Retrieve your `GUID` \u0026 `API Keys (Preview/Fetch)` from Agility CMS by going to [Settings \u003e API Keys](https://manager.agilitycms.com/settings/apikeys).\n\n[How to Retrieve your GUID and API Keys from Agility](https://help.agilitycms.com/hc/en-us/articles/360031919212-Retrieving-your-API-Key-s-Guid-and-API-URL-)\n\n\n## Running the Site Locally\n\n### Development Mode\n\nWhen running your site in `development` mode, you will see the latest content in from the CMS.\n\n#### yarn\n\n1. `yarn install`\n2. `yarn start` or `gatsby develop`\n\n#### npm\n\n1. `npm install`\n2. `npm run start` or `gatsby develop`\n\nTo clear your content cache locally, run `gatsby clean`\n\n### Production Mode\n\nWhen running your site in `production` mode, you will see the published from the CMS.\n\n#### yarn\n\n1. `yarn build` or `gatsby build`\n2. `yarn serve` or `gatsby serve`\n\n#### npm\n\n1. `npm run build` or `gatsby build`\n2. `npm run start` or `gatsby serve`\n\n## Deploying Your Site\n\nThe easiest way to deploy a Gatsby website to production is to use Gatsby Cloud from the Gatsby team. Gatsby Cloud is a platform that gives your Gatsby website superpowers! With intelligent caching and incremental builds, Gatsby Cloud takes the speed and performance of your Gatsby website to another level.\n\n[Deploy your site to Gatsby Cloud](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/agility/agilitycms-gatsby-starter)\n\n## Notes\n\n### How to Register Page Modules\n\n1. To create a new Page Module, create a new React component within the `src/components/agility-pageModules` directory.\n2. All of the Page Modules that are being used within the site need to be imported into the `index` file within the `src/components/agility-pageModules` directory and added to the `allModules` array:\n\n```\nimport RichTextArea from \"./RichTextArea\";\nimport FeaturedPost from \"./FeaturedPost\";\nimport PostsListing from \"./PostsListing\";\nimport PostDetails from \"./PostDetails\";\nimport Heading from \"./Heading\";\nimport TextBlockWithImage from \"./TextBlockWithImage\";\n\nconst allModules = [\n  { name: \"TextBlockWithImage\", module: TextBlockWithImage },\n  { name: \"Heading\", module: Heading },\n  { name: \"FeaturedPost\", module: FeaturedPost },\n  { name: \"PostsListing\", module: PostsListing },\n  { name: \"PostDetails\", module: PostDetails },\n  { name: \"RichTextArea\", module: RichTextArea },\n];\n```\n\n### How to Register Page Templates\n\n1. To create a new Page Template, create a new React component within the `src/components/agility-pageTemplates` directory.\n2. All of the Page Template that are being used within the site need to be imported into the `index` file within the `src/components/agility-pageTemplates` directory and added to the `allTemplates` array:\n\n```\nimport MainTemplate from \"./MainTemplate\";\n\nconst allTemplates = [\n  { name: \"MainTemplate\", template: MainTemplate }\n];\n```\n\n### How to Properly Link to an Internal Page\n\nTo link to internal pages, use the `Link` component from gatsby.\n\n```\nimport { Link } from 'gatsby';\n\n// where post.path is the url path \n\u003cLink to={post.path}\u003e\n  {post.title}\n\u003c/Link\u003e\n```\n\n### Resolving Linked Content\n\nIn the agilitycms-gatsby-starter, we resolve Linked Content by using [Gatsby Resolvers](https://www.gatsbyjs.org/blog/2019-03-04-new-schema-customization/). \n\nResolvers are added to your `gatsby-node.js` in your site, and they allow you to add a new field to your content node which will handle resolving your Linked Content reference.\n\nThis means you are telling GraphQL, when you query a specific property on a node, it will actually run a function to go and get your Linked Content and return it.\n\nAn example of this can be found [here](https://github.com/agility/agilitycms-gatsby-starter/blob/main/gatsby-node.js#L155) in this starter site:\n\n```\n// gatsy-node.js\n\nconst agility = require('./src/agility/utils')\n\n  const resolvers = {\n    // on the 'agilityPost' node type\n    agilityPost: {\n      // get the sitemap node that represents this item ( i.e. /blog/my-blog-post )\n      sitemapNode: agility.getDynamicPageItemSitemapNode(),\n\n      // get the category\n      linkedContent_agilityCategory: agility.getLinkedContentItem({\n        type: \"agilityCategory\",\n        linkedContentFieldName: \"category\",\n      }),\n    },\n  }\n  createResolvers(resolvers)\n}\n\n```\n\n[How to Resolve Linked Content](https://help.agilitycms.com/hc/en-us/articles/360042606992)\n\n### Previewing Content\n\nPreviewing content prior to publishing is crucial for Editors. You can set up and configure Previews to work with Gatsby Cloud so editors can preview content as their making edits within Agility CMS.\n\n[Set up Preview with Gatsby Cloud](https://help.agilitycms.com/hc/en-us/articles/360049998492)\n\n## Resources\n\n### Agility CMS\n- [Official site](https://agilitycms.com)\n- [Documentation](https://help.agilitycms.com/hc/en-us)\n\n### Gatsby\n- [Official site](https://www.gatsbyjs.com/)\n- [Documentation](https://www.gatsbyjs.com/docs/)\n\n### Gatsby Cloud\n- [Official site](https://www.gatsbyjs.com/cloud/)\n\n### Tailwind CSS\n- [Official site](http://tailwindcss.com/)\n- [Documentation](http://tailwindcss.com/docs)\n\n### Community\n- [Official Slack](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI)\n- [Blog](https://agilitycms.com/resources/posts)\n- [GitHub](https://github.com/agility)\n- [Forums](https://help.agilitycms.com/hc/en-us/community/topics)\n- [Facebook](https://www.facebook.com/AgilityCMS/)\n- [Twitter](https://twitter.com/AgilityCMS)\n\n## Feedback and Questions\nIf you have feedback or questions about this starter, please use the [Github Issues](https://github.com/agility/agilitycms-gatsby-starter/issues) on this repo, join our [Community Slack Channel](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) or create a post on the [Agility Developer Community](https://help.agilitycms.com/hc/en-us/community/topics).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-gatsby-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagility%2Fagilitycms-gatsby-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-gatsby-starter/lists"}