Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LuckyPranami/gatsby-blog-cosmicjs
🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥
https://github.com/LuckyPranami/gatsby-blog-cosmicjs
Last synced: about 1 month ago
JSON representation
🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥
- Host: GitHub
- URL: https://github.com/LuckyPranami/gatsby-blog-cosmicjs
- Owner: LuckyPranami
- License: mit
- Created: 2022-03-20T16:04:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-03-20T16:04:41.000Z (over 2 years ago)
- Last Synced: 2024-08-02T05:22:39.374Z (4 months ago)
- Language: JavaScript
- Size: 828 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazingly-fast - gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥 (JavaScript)
README
# Gatsby + Cosmic
> This repo contains an example blog website that is built with [Gatsby](https://www.gatsbyjs.org/), and [Cosmic](https://www.cosmicjs.com).
> [See live demo hosted on Netlify](https://gatsby-blog-cosmicjs.netlify.com/)
> Uses the [Cosmic Gatsby Source Plugin](https://www.npmjs.com/package/gatsby-source-cosmicjs)
## Prerequisites
- Node (I recommend using v8.2.0 or higher)
- [Gatsby CLI](https://www.gatsbyjs.org/docs/)
## Install
``` bash
# Make sure that you have the Gatsby CLI program installed
npm install --global gatsby-cli
# run from your CLI
gatsby new gatsby-example-blog https://github.com/cosmicjs/gatsby-blog-cosmicjs
```
In `gatsby-config.js` you need to add configuration for your Cosmic Bucket
``` javascript
{
resolve: 'gatsby-source-cosmicjs',
options: {
bucketSlug: '', /* Find this in Your Bucket > Settings > Basic Settings after logging in at https://app.cosmicjs.com/login */
objectTypes: ['posts', 'settings'], /* Object types to fetch */
apiAccess: {
read_key: '', /* Find this in Your Bucket > Settings > API Access after logging in at https://app.cosmicjs.com/login */
},
localMedia: true /* Optional. If you want to enable local image for Gatsby Image */
}
},
```
Then
``` bash
# Then you can run it by
cd gatsby-example-blog
npm run develop
```
## Enable content auto refresh
To enable content auto refresh, open another terminal window and run the following command:
```
npm run poll-content
```
This will poll the content in your Bucket for any updates and automatically refresh it in your blog during development. Learn more about refreshing content in the [Gatsby docs](https://www.gatsbyjs.com/docs/refreshing-content/).
## Deploy to Netlify
You can deploy to Netlify in a few steps using their CLI. Run the following commands from the root folder.
```
npm i -g netlify-cli
netlify deploy
```
#### Set your Environment Variables in Netlify
In the Netlify dashboard, set your environment variables located in Site Settings > Build and Deploy > Environment. Find your Cosmic Bucket keys located in Bucket > Basic Settings after logging in.
```
COSMIC_BUCKET=
COSMIC_READ_KEY=
```