25 |
26 | 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.
27 |
28 | ### Access Locally
29 | ```
30 | $ git clone https://github.com/karimould/minimal-multi-language-gatsby-starter-netlify-cms
31 | $ cd [REPO_NAME]
32 | $ yarn
33 | $ npm run develop
34 | ```
35 | To test the CMS locally, you'll need run a production build of the site:
36 | ```
37 | $ npm run build
38 | $ npm run serve
39 | ```
40 |
41 | ## Getting Started (Without Netlify)
42 | ```
43 | $ gatsby new [SITE_DIRECTORY_NAME] https://github.com/karimould/minimal-multi-language-gatsby-starter-netlify-cms
44 | $ cd [SITE_DIRECTORY_NAME]
45 | $ npm run build
46 | $ npm run serve
47 | ```
48 |
49 | ### Setting up the CMS
50 | Follow the [Netlify CMS Quick Start Guide](https://www.netlifycms.org/docs/quick-start/#authentication) to set up authentication, and hosting.
51 |
52 | ## Debugging
53 | Windows users might encounter ```node-gyp``` errors when trying to npm install.
54 | To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.
55 | ```
56 | npm config set python python2.7
57 | npm install --global --production windows-build-tools
58 | ```
59 |
60 | [Full details here](https://www.npmjs.com/package/node-gyp 'NPM node-gyp page')
61 |
62 | ## Purgecss
63 | 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.
64 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: 'Gatsby + Netlify CMS Starter Clean',
4 | description: 'This repo contains an example 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.',
5 | },
6 | plugins: [
7 | 'gatsby-plugin-react-helmet',
8 | 'gatsby-plugin-sass',
9 | `gatsby-plugin-typescript`,
10 | {
11 | // keep as first gatsby-source-filesystem plugin for gatsby image support
12 | resolve: 'gatsby-source-filesystem',
13 | options: {
14 | path: `${__dirname}/static/img`,
15 | name: 'uploads',
16 | },
17 | },
18 | {
19 | resolve: 'gatsby-source-filesystem',
20 | options: {
21 | path: `${__dirname}/src/pages`,
22 | name: 'pages',
23 | },
24 | },
25 | {
26 | resolve: 'gatsby-source-filesystem',
27 | options: {
28 | path: `${__dirname}/src/img`,
29 | name: 'images',
30 | },
31 | },
32 | 'gatsby-plugin-sharp',
33 | 'gatsby-transformer-sharp',
34 | {
35 | resolve: 'gatsby-transformer-remark',
36 | options: {
37 | plugins: [
38 | {
39 | resolve: 'gatsby-remark-relative-images',
40 | options: {
41 | name: 'uploads',
42 | },
43 | },
44 | {
45 | resolve: 'gatsby-remark-images',
46 | options: {
47 | // It's important to specify the maxWidth (in pixels) of
48 | // the content container as this plugin uses this as the
49 | // base for generating different widths of each image.
50 | maxWidth: 2048,
51 | },
52 | },
53 | {
54 | resolve: 'gatsby-remark-copy-linked-files',
55 | options: {
56 | destinationDir: 'static',
57 | }
58 | }
59 | ],
60 | },
61 | },
62 | {
63 | resolve: 'gatsby-plugin-netlify-cms',
64 | options: {
65 | modulePath: `${__dirname}/src/cms/cms.js`,
66 | },
67 | },
68 | 'gatsby-plugin-purgecss', // must be after other CSS plugins
69 | 'gatsby-plugin-netlify', // make sure to keep it last in the array
70 | ],
71 | }
72 |
--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | const _ = require('lodash')
2 | const path = require('path')
3 | const { createFilePath } = require('gatsby-source-filesystem')
4 | const { fmImagesToRelative } = require('gatsby-remark-relative-images')
5 | const locales = require('./src/constants/locales')
6 |
7 | exports.createPages = ({ actions, graphql }) => {
8 | const { createPage } = actions
9 |
10 | return graphql(`
11 | {
12 | allMarkdownRemark(limit: 1000) {
13 | edges {
14 | node {
15 | id
16 | fields {
17 | slug
18 | }
19 | frontmatter {
20 | templateKey
21 | locale
22 | }
23 | }
24 | }
25 | }
26 | }
27 | `).then(result => {
28 | if (result.errors) {
29 | result.errors.forEach(e => console.error(e.toString()))
30 | return Promise.reject(result.errors)
31 | }
32 | const posts = result.data.allMarkdownRemark.edges
33 |
34 | posts.forEach(edge => {
35 | //Check if pages has a template key
36 | const locale = edge.node.frontmatter.locale
37 | if (edge.node.frontmatter.templateKey != null) {
38 | const id = edge.node.id
39 | createPage({
40 | path: edge.node.fields.slug,
41 | component: path.resolve(`src/templates/${String(edge.node.frontmatter.templateKey)}.tsx`),
42 | // additional data can be passed via context
43 | context: {
44 | id,
45 | locale,
46 | },
47 | })
48 | }
49 | })
50 | })
51 | }
52 |
53 | exports.onCreatePage = ({ page, actions }) => {
54 | const { createPage, deletePage } = actions
55 |
56 | return new Promise(resolve => {
57 | deletePage(page)
58 |
59 | Object.keys(locales).map(lang => {
60 | const localizedPath = locales[lang].default ? page.path : locales[lang].path + page.path
61 |
62 | return createPage({
63 | ...page,
64 | path: localizedPath,
65 | context: {
66 | locale: lang,
67 | },
68 | })
69 | })
70 | resolve()
71 | })
72 | }
73 |
74 | exports.onCreateNode = ({ node, actions, getNode }) => {
75 | const { createNodeField } = actions
76 | fmImagesToRelative(node) // convert image paths for gatsby images
77 |
78 | if (node.internal.type === `MarkdownRemark`) {
79 | const value = createFilePath({ node, getNode })
80 | createNodeField({
81 | name: `slug`,
82 | node,
83 | value,
84 | })
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | publish = "public"
3 | command = "npm run build"
4 | [build.environment]
5 | YARN_VERSION = "1.9.4"
6 | YARN_FLAGS = "--no-ignore-optional"
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "minimal-multi-language-gatsby-starter-netlify-cms",
3 | "description": "Example Gatsby, and Netlify CMS project for multi languages websites",
4 | "version": "1.2.0",
5 | "author": "Karim Ould Mahieddine",
6 | "dependencies": {
7 | "@types/react-helmet": "^6.0.0",
8 | "gatsby": "^2.15.29",
9 | "gatsby-image": "^2.2.24",
10 | "gatsby-plugin-netlify": "^2.1.17",
11 | "gatsby-plugin-netlify-cms": "^4.1.22",
12 | "gatsby-plugin-purgecss": "^5.0.0",
13 | "gatsby-plugin-react-helmet": "^3.1.10",
14 | "gatsby-plugin-sass": "^2.1.17",
15 | "gatsby-plugin-sharp": "^2.2.28",
16 | "gatsby-plugin-typescript": "^2.1.11",
17 | "gatsby-remark-copy-linked-files": "^2.1.24",
18 | "gatsby-remark-images": "^3.1.25",
19 | "gatsby-remark-relative-images": "^0.3.0",
20 | "gatsby-source-filesystem": "^2.1.29",
21 | "gatsby-transformer-remark": "^2.6.27",
22 | "gatsby-transformer-sharp": "^2.2.20",
23 | "netlify-cms-app": "^2.9.7",
24 | "node-sass": "^4.12.0",
25 | "react": "^16.10.2",
26 | "react-dom": "^16.10.2",
27 | "react-helmet": "^6.1.0",
28 | "typescript": "^3.6.3"
29 | },
30 | "keywords": [
31 | "gatsby"
32 | ],
33 | "license": "MIT",
34 | "main": "n/a",
35 | "scripts": {
36 | "start": "npm run develop",
37 | "clean": "rimraf .cache public",
38 | "build": "npm run clean && gatsby build",
39 | "develop": "npm run clean && gatsby develop",
40 | "serve": "gatsby serve",
41 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
42 | "test": "echo \"Error: no test specified\" && exit 1"
43 | },
44 | "devDependencies": {
45 | "@typescript-eslint/eslint-plugin": "^3.2.0",
46 | "@typescript-eslint/parser": "^3.2.0",
47 | "eslint": "^7.2.0",
48 | "eslint-config-prettier": "^6.4.0",
49 | "eslint-plugin-prettier": "^3.1.1",
50 | "eslint-plugin-react": "^7.16.0",
51 | "prettier": "^2.0.5",
52 | "rimraf": "^3.0.0",
53 | "typescript": "^3.6.3"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "config:base"
4 | ],
5 | "rangeStrategy": "replace",
6 | "lockFileMaintenance": {
7 | "enabled": true,
8 | "extends": "schedule:weekly"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/cms/cms.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/karimould/minimal-multi-language-gatsby-starter-netlify-cms/1d27097149ebb0f62193e40dd98586b05839d742/src/cms/cms.js
--------------------------------------------------------------------------------
/src/components/layouts/main/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import './layout.scss'
3 |
4 | interface Props {
5 | children: ReactNode
6 | locale: string
7 | }
8 |
9 | const Layout = ({ children, locale }: Props): JSX.Element => {
10 | return (
11 | <>
12 | You just hit a route that doesn't exist... the sadness.
10 |Content: {data.frontmatter.text}
53 |Locale: {locale}
54 |Change language
57 | 58 |Blog Post Description: {post.frontmatter.description}
64 |Blog Post Date: {post.frontmatter.date}
65 | 66 | Link to blog post 67 | 68 |description: {post.frontmatter.description}
30 |date: {post.frontmatter.date}
31 | 32 |