07/01/2021

Creating GatsbyJS theme

Note about how to make theme for GatsbyJS

make folder

1
    mkdir gatsby-<name>-theme-workspace && cd <gatsby-your-new-theme>

initialize npm/Yarn new project

1
    yarn init

in package.json:

1
2
3
4
5
6
7
8
{
	...
	"private": true,
	"workspaces": [
		"example", // example of the gatsby website that will use theme
		"gatsby-<name>-theme" // folder where is your theme is located
	]
}

setup theme folder

1
2
    cd gatsby-<name>-theme
    yarn init

setup example website folder

1
2
    cd ../example
    yarn init

private: true

check yarn workspaces:

1
    yarn workspaces info

should return smth like:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "example": {
    "location": "example",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "gatsby-<name>-theme": {
    "location": "gatsby-<name>-theme",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  }
}

add dependencies in example:

1
    yarn workspace example add gatsby

add package of our theme as a dependency:

1
    yarn workspace example add "gatsby-craeft-dev-theme@*"

add scripts section in example/package.json:

1
2
3
4
5
6
{
	"scripts": {
		"develop": "gatsby develop",
		"build": "gatsby build"
	}
}

install gatsby, react, react-dom in our theme as a dev and peer dependency:

1
2
    yarn workspace gatsby-craeft-dev-theme add gatsby react react-dom -D
    yarn workspace gatsby-craeft-dev-theme add gatsby react react-dom -P

and add react, react-dom in example as dependencies:

1
    yarn workspace example add react react-dom

mdx

create and set layout component

layout component is a component that wraps all your content (pages, posts)

you can create this component in src/components/layout.tsx

you need to set path to this component in gatsby-config.js:

1
2
3
4
5
6
7
8
{
	resolve: \`gatsby-plugin-mdx\`,
	options: {
		defaultLayouts: {
			default: require.resolve("./src/components/layout.tsx"),
		},
	},
},