This project is a Gatsby theme that empowers developers, writers, and designers to create fast, accessible sites that look and feel like Carbon. Follow along to start creating your own site.
Create your site – use the gatsby CLI to bootstrap your site with the starter
npx gatsby new my-carbon-site https://github.com/carbon-design-system/gatsby-starter-carbon-theme
Start developing – navigate into your directory with
Start it up using one of the following snippets. You can tell which command to use based on the lock file at the root of your project (
yarn.lock for yarn and
package-lock.json for npm). For yarn, type
yarn dev for npm, you’ll use
npm run dev.
Make some changes! – open localhost:8000 in your browser to see your site running.
Each of the Items in your side bar correlates to a MDX file in your
src/pages/ directory. Navigate to a site and try editing the corresponding markdown file. You’ll be able to see it update live!
Lets check out the structure of our project
.├── LICENSE├── README.md├── gatsby-config.js├── node_modules├── package.json├── public├── src│ ├── data│ ├── gatsby-theme-carbon│ ├── images│ └── pages└── yarn.lock
/node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
/src: This directory will contain all of the code related to what you will see on the front-end of your site.
.gitignore: This file tells git which files it should not track / not maintain a version history for.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description. You’ll notice that all of the configuration for the site is coming from
LICENSE: Gatsby is licensed under the Apache 2.0 license.
package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.