Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prismicio-community/gatsby-starter-prismic
A Gatsby starter to get started with Prismic, the Headless Website Builder.
https://github.com/prismicio-community/gatsby-starter-prismic
cms gatsby gatsby-starter gatsbyjs prismic
Last synced: about 1 hour ago
JSON representation
A Gatsby starter to get started with Prismic, the Headless Website Builder.
- Host: GitHub
- URL: https://github.com/prismicio-community/gatsby-starter-prismic
- Owner: prismicio-community
- Created: 2022-02-08T01:49:02.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-17T03:24:30.000Z (about 2 years ago)
- Last Synced: 2024-11-26T07:08:55.783Z (2 months ago)
- Topics: cms, gatsby, gatsby-starter, gatsbyjs, prismic
- Language: JavaScript
- Homepage:
- Size: 861 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-starter-prismic
This [Gatsby](https://www.gatsbyjs.com/) starter gets you started with [Prismic](https://prismic.io/), the Headless Website Builder.
- Source content from Prismic using [`gatsby-source-prismic`](https://github.com/prismicio/prismic-gatsby/tree/main/packages/gatsby-source-prismic)
- Preview draft content using [`gatsby-plugin-prismic-previews`](https://github.com/prismicio/prismic-gatsby/tree/main/packages/gatsby-plugin-prismic-previews)
- Display content using [`@prismicio/react`](https://github.com/prismicio/prismic-react) with help from [`@prismicio/helpers`](https://github.com/prismicio/prismic-helpers)
This starter is intentionally minimal. Add other packages and Gatsby plugins to suit your needs.
## 🚀 Quick Start
How you get started depends on where you are at in your project:
I don't have a Prismic repository and would like to create one.
1. **Create a Gatsby site.**
Use the Prismic CLI to create a new Prismic repository and Gatsby project in one command.
```sh
npx prismic-cli@latest theme --theme-url https://github.com/prismicio-community/gatsby-starter-prismic --conf gatsby-config.js
```
This will create a new Prismic repository with a minimal Custom Type called Page.
2. **Configure the starter.**
Create a `.env` file with your Prismic repository name, Custom Types API token, and Access Token (optional).
See `.env.example` for an example file with instructions on how to create your tokens.
3. **Start developing.**
In your project, start the Gatsby development server.
```sh
npm run develop
```
You can delete the `custom_types` directory at the root of the project at this point.
Have fun developing!
I have a Prismic repository already.
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new Gatsby project. Replace `` with the name of the directory you would like the CLI to create.
```sh
npx gatsby-cli@latest new prismicio-community/gatsby-starter-prismic
```
2. **Configure the starter.**
Create a `.env` file with your Prismic repository name, Custom Types API token, and Access Token (optional).
See `.env.example` for an example file with instructions on how to create your tokens.
3. **Start developing.**
In your project, start the Gatsby development server.
```sh
npm run develop
```
**Note**: This starter queries for a Custom Type called Page in `src/pages/{PrismicPage.url}.js`. You can delete this file or modify it to fit your needs. You may see an error when starting Gatsby if you repository does not have a Page Custom Type.
You can delete the `custom_types` directory at the root of the project at this point.
Once you have your Gatsby project started, visit [Prismic's documentation](https://prismic.io/docs/technologies/gatsby) to learn how to query and display content.
Have fun!
## Documentation
- **Gatsby**:
- **Prismic**:
- **Prismic with Gatsby**: