38 |
39 | After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete. Next, you’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.
40 |
41 | ### Access Locally
42 |
43 | Pulldown a local copy of the Github repository Netlify created for you, with the name you specified in the previous step
44 |
45 | ```
46 | $ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
47 | $ cd [REPO_NAME]
48 | $ yarn
49 | $ netlify dev # or ntl dev
50 | ```
51 |
52 | This uses [Netlify Dev](https://www.netlify.com/products/dev/?utm_source=blog&utm_medium=netlifycms&utm_campaign=devex) CLI feature to serve any functions you have in the `netlify/functions` folder.
53 |
54 | To test the CMS locally, you'll need to run a production build of the site:
55 |
56 | ```
57 | $ npm run build
58 | $ netlify dev # or ntl dev
59 | ```
60 |
61 | ### Media Libraries (installed, but optional)
62 |
63 | Media Libraries have been included in this starter as a default. If you are not planning to use `Uploadcare` or `Cloudinary` in your project, you **can** remove them from module import and registration in `src/cms/cms.js`. Here is an example of the lines to comment or remove them your project.
64 |
65 | ```javascript
66 | import CMS from "netlify-cms-app";
67 | // import uploadcare from 'netlify-cms-media-library-uploadcare'
68 | // import cloudinary from 'netlify-cms-media-library-cloudinary'
69 |
70 | import AboutPagePreview from "./preview-templates/AboutPagePreview";
71 | import BlogPostPreview from "./preview-templates/BlogPostPreview";
72 | import ProductPagePreview from "./preview-templates/ProductPagePreview";
73 | import IndexPagePreview from "./preview-templates/IndexPagePreview";
74 |
75 | // CMS.registerMediaLibrary(uploadcare);
76 | // CMS.registerMediaLibrary(cloudinary);
77 |
78 | CMS.registerPreviewTemplate("index", IndexPagePreview);
79 | CMS.registerPreviewTemplate("about", AboutPagePreview);
80 | CMS.registerPreviewTemplate("products", ProductPagePreview);
81 | CMS.registerPreviewTemplate("blog", BlogPostPreview);
82 | ```
83 |
84 | Note: Don't forget to also remove them from `package.json` and `yarn.lock` / `package-lock.json` using `yarn` or `npm`. During the build netlify-cms-app will bundle the media libraries as well, having them removed will save you build time.
85 | Example:
86 |
87 | ```
88 | yarn remove netlify-cms-media-library-uploadcare
89 | ```
90 |
91 | OR
92 |
93 | ```
94 | yarn remove netlify-cms-media-library-cloudinary
95 | ```
96 |
97 | ## Getting Started (Without Netlify)
98 |
99 | ```
100 | $ gatsby new [SITE_DIRECTORY_NAME] https://github.com/netlify-templates/gatsby-starter-netlify-cms/
101 | $ cd [SITE_DIRECTORY_NAME]
102 | $ npm run build
103 | $ npm run start
104 | ```
105 |
106 | ### Setting up the CMS
107 |
108 | Follow the [Netlify CMS Quick Start Guide](https://www.netlifycms.org/docs/quick-start/#authentication) to set up authentication, and hosting for production.
109 |
110 | If you want use Netlify CMS locally, run the site in one terminal with `npm run start` and in another
111 | Terminal you can use `npx netlify-cms-proxy-server` which proxy requests so you'll be automatically logged
112 | in as a user on [http:localhost:3000/admin](http:localhost:3000/admin).
113 |
114 | ## Debugging
115 |
116 | Windows users, who aren't using [WSL](https://docs.microsoft.com/en-us/windows/wsl/about), might encounter `node-gyp` errors when trying to npm install.
117 | To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.
118 |
119 | ```
120 | npm config set python python2.7
121 | npm install --global --production windows-build-tools
122 | ```
123 |
124 | [Full details here](https://www.npmjs.com/package/node-gyp "NPM node-gyp page").
125 |
126 | MacOS and WSL users who might also encounter some errors, check [node-gyp](https://github.com/nodejs/node-gyp) for more info. We recommend using the latest stable node version.
127 |
128 | ## Purgecss
129 |
130 | This plugin uses [gatsby-plugin-purgecss](https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/) and [bulma](https://bulma.io/). The bulma builds are usually ~170K but reduced 90% by purgecss.
131 |
132 | # CONTRIBUTING
133 |
134 | Contributions are always welcome, no matter how large or small. Before contributing,
135 | please read the [code of conduct](CODE_OF_CONDUCT.md).
136 |
--------------------------------------------------------------------------------
/_headers:
--------------------------------------------------------------------------------
1 | /static/*
2 | Cache-Control: "public, max-age=360000"
3 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: "Gatsby + Netlify CMS Starter",
4 | description:
5 | "This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.",
6 | },
7 | plugins: [
8 | "gatsby-plugin-react-helmet",
9 | {
10 | resolve: "gatsby-plugin-sass",
11 | options: {
12 | sassOptions: {
13 | indentedSyntax: true,
14 | },
15 | },
16 | },
17 | {
18 | // keep as first gatsby-source-filesystem plugin for gatsby image support
19 | resolve: "gatsby-source-filesystem",
20 | options: {
21 | path: `${__dirname}/static/img`,
22 | name: "uploads",
23 | },
24 | },
25 | {
26 | resolve: "gatsby-source-filesystem",
27 | options: {
28 | path: `${__dirname}/src/pages`,
29 | name: "pages",
30 | },
31 | },
32 | {
33 | resolve: "gatsby-source-filesystem",
34 | options: {
35 | path: `${__dirname}/src/img`,
36 | name: "images",
37 | },
38 | },
39 | `gatsby-plugin-image`,
40 | "gatsby-plugin-sharp",
41 | "gatsby-transformer-sharp",
42 | {
43 | resolve: "gatsby-transformer-remark",
44 | options: {
45 | plugins: [
46 | 'gatsby-remark-relative-images',
47 | {
48 | resolve: "gatsby-remark-images",
49 | options: {
50 | // It's important to specify the maxWidth (in pixels) of
51 | // the content container as this plugin uses this as the
52 | // base for generating different widths of each image.
53 | maxWidth: 2048,
54 | },
55 | },
56 | {
57 | resolve: "gatsby-remark-copy-linked-files",
58 | options: {
59 | destinationDir: "static",
60 | },
61 | },
62 | ],
63 | },
64 | },
65 | {
66 | resolve: "gatsby-plugin-netlify-cms",
67 | options: {
68 | modulePath: `${__dirname}/src/cms/cms.js`,
69 | },
70 | },
71 | {
72 | resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
73 | options: {
74 | develop: true, // Activates purging in npm run develop
75 | purgeOnly: ["/all.sass"], // applies purging only on the bulma css file
76 | },
77 | }, // must be after other CSS plugins
78 | "gatsby-plugin-netlify", // make sure to keep it last in the array
79 | ],
80 | };
81 |
--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | const _ = require('lodash')
2 | const path = require('path')
3 | const { createFilePath } = require('gatsby-source-filesystem')
4 |
5 | exports.createPages = ({ actions, graphql }) => {
6 | const { createPage } = actions
7 |
8 | return graphql(`
9 | {
10 | allMarkdownRemark(limit: 1000) {
11 | edges {
12 | node {
13 | id
14 | fields {
15 | slug
16 | }
17 | frontmatter {
18 | tags
19 | templateKey
20 | }
21 | }
22 | }
23 | }
24 | }
25 | `).then((result) => {
26 | if (result.errors) {
27 | result.errors.forEach((e) => console.error(e.toString()))
28 | return Promise.reject(result.errors)
29 | }
30 |
31 | const posts = result.data.allMarkdownRemark.edges
32 |
33 | posts.forEach((edge) => {
34 | const id = edge.node.id
35 | createPage({
36 | path: edge.node.fields.slug,
37 | tags: edge.node.frontmatter.tags,
38 | component: path.resolve(
39 | `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
40 | ),
41 | // additional data can be passed via context
42 | context: {
43 | id,
44 | },
45 | })
46 | })
47 |
48 | // Tag pages:
49 | let tags = []
50 | // Iterate through each post, putting all found tags into `tags`
51 | posts.forEach((edge) => {
52 | if (_.get(edge, `node.frontmatter.tags`)) {
53 | tags = tags.concat(edge.node.frontmatter.tags)
54 | }
55 | })
56 | // Eliminate duplicate tags
57 | tags = _.uniq(tags)
58 |
59 | // Make tag pages
60 | tags.forEach((tag) => {
61 | const tagPath = `/tags/${_.kebabCase(tag)}/`
62 |
63 | createPage({
64 | path: tagPath,
65 | component: path.resolve(`src/templates/tags.js`),
66 | context: {
67 | tag,
68 | },
69 | })
70 | })
71 | })
72 | }
73 |
74 | exports.onCreateNode = ({ node, actions, getNode }) => {
75 | const { createNodeField } = actions
76 |
77 | if (node.internal.type === `MarkdownRemark`) {
78 | const value = createFilePath({ node, getNode })
79 | createNodeField({
80 | name: `slug`,
81 | node,
82 | value,
83 | })
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | publish = "public"
3 | command = "npm run build"
4 | [build.environment]
5 | NODE_VERSION = "14.15.0"
6 | YARN_VERSION = "1.22.4"
7 | YARN_FLAGS = "--no-ignore-optional"
8 |
9 |
10 |
--------------------------------------------------------------------------------
/netlify/functions/hello.js:
--------------------------------------------------------------------------------
1 | // For more info, check https://docs.netlify.com/functions/build-with-javascript
2 | module.exports.handler = async function(event, context) {
3 | console.log("queryStringParameters", event.queryStringParameters)
4 | return {
5 | // return null to show no errors
6 | statusCode: 200, // http status code
7 | body: JSON.stringify({
8 | msg: "Hello, World! This is better " + Math.round(Math.random() * 10)
9 | })
10 | }
11 | }
12 |
13 | // Now you are ready to access this API from anywhere in your Gatsby app! For example, in any event handler or lifecycle method, insert:
14 | // fetch("/.netlify/functions/hello")
15 | // .then(response => response.json())
16 | // .then(console.log)
17 | // For more info see: https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/#static-dynamic-is-a-spectrum
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-netlify-cms",
3 | "description": "Example Gatsby, and Netlify CMS project",
4 | "version": "1.1.3",
5 | "author": "Austin Green",
6 | "dependencies": {
7 | "bulma": "^0.9.0",
8 | "gatsby": "^4.0.0",
9 | "gatsby-plugin-image": "^2.0.0",
10 | "gatsby-plugin-netlify": "^5.0.0",
11 | "gatsby-plugin-netlify-cms": "^6.0.0",
12 | "gatsby-plugin-purgecss": "^6.0.0",
13 | "gatsby-plugin-react-helmet": "^5.0.0",
14 | "gatsby-plugin-sass": "^5.0.0",
15 | "gatsby-plugin-sharp": "^4.0.0",
16 | "gatsby-remark-copy-linked-files": "^5.0.0",
17 | "gatsby-remark-images": "^6.0.0",
18 | "gatsby-remark-relative-images": "^2.0.2",
19 | "gatsby-source-filesystem": "^4.0.0",
20 | "gatsby-transformer-remark": "^5.0.0",
21 | "gatsby-transformer-sharp": "^4.0.0",
22 | "lodash": "^4.17.15",
23 | "lodash-webpack-plugin": "^0.11.4",
24 | "netlify-cms-app": "^2.15.72",
25 | "netlify-cms-media-library-cloudinary": "^1.3.10",
26 | "netlify-cms-media-library-uploadcare": "^0.5.10",
27 | "prop-types": "^15.6.0",
28 | "react": "^17.0.0",
29 | "react-dom": "^17.0.0",
30 | "react-helmet": "^6.0.0",
31 | "sass": "^1.43.2",
32 | "uuid": "^8.0.0"
33 | },
34 | "keywords": [
35 | "gatsby"
36 | ],
37 | "license": "MIT",
38 | "main": "n/a",
39 | "scripts": {
40 | "clean": "gatsby clean",
41 | "start": "npm run develop",
42 | "build": "npm run clean && gatsby build",
43 | "develop": "npm run clean && gatsby develop",
44 | "serve": "gatsby serve",
45 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
46 | "test": "echo \"Error: no test specified\" && exit 1"
47 | },
48 | "devDependencies": {
49 | "prettier": "^2.0.5"
50 | },
51 | "engines": {
52 | "node": ">= 14.15.0"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["github>netlify/renovate-config:netlify-cms-starter"]
3 | }
4 |
--------------------------------------------------------------------------------
/src/cms/cms.js:
--------------------------------------------------------------------------------
1 | import CMS from 'netlify-cms-app'
2 | import uploadcare from 'netlify-cms-media-library-uploadcare'
3 | import cloudinary from 'netlify-cms-media-library-cloudinary'
4 |
5 | import AboutPagePreview from './preview-templates/AboutPagePreview'
6 | import BlogPostPreview from './preview-templates/BlogPostPreview'
7 | import ProductPagePreview from './preview-templates/ProductPagePreview'
8 | import IndexPagePreview from './preview-templates/IndexPagePreview'
9 |
10 | CMS.registerMediaLibrary(uploadcare)
11 | CMS.registerMediaLibrary(cloudinary)
12 |
13 | CMS.registerPreviewTemplate('index', IndexPagePreview)
14 | CMS.registerPreviewTemplate('about', AboutPagePreview)
15 | CMS.registerPreviewTemplate('products', ProductPagePreview)
16 | CMS.registerPreviewTemplate('blog', BlogPostPreview)
17 |
--------------------------------------------------------------------------------
/src/cms/preview-templates/AboutPagePreview.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { AboutPageTemplate } from '../../templates/about-page'
4 |
5 | const AboutPagePreview = ({ entry, widgetFor }) => (
6 | 39 | 43 | {post.frontmatter.title} 44 | 45 | • 46 | 47 | {post.frontmatter.date} 48 | 49 |
50 |
52 | {post.excerpt}
53 |
54 |
55 |
56 | Keep Reading →
57 |
58 |
{item.text}
21 |{price.description}
16 |You just hit a route that doesn't exist... the sadness.
9 |14 | This is an example site integrating Netlify’s form handling with 15 | Gatsby 16 |
17 |
29 | This can be caused by the offline-plugin.{" "}
30 |
31 | Workaround
32 | {" "}
33 | is to use ?no-cache=1 in the POST url to prevent
34 | the service worker from handling form submissions
35 |
38 | If you are planning to add reCAPTCHA please go to{" "} 39 | 40 | imorente/gatsby-netlify-form-example 41 | {" "} 42 | for a working example. 43 |
44 |This is a custom thank you page for form submissions
12 |{description}
30 |{description}
46 |{description}
39 |{main.description}
50 |{pricing.description}
89 |38 | Browse all tags 39 |
40 |