Skip to content
A simple blog website powered by Next.js and the Cosmic JS GraphQL API
JavaScript CSS
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
pages no posts message on index Jun 25, 2019
static first commit Oct 12, 2017
.gitignore new GraphQL methods May 29, 2019 Update Jun 24, 2019
config.js first commit Oct 12, 2017
helpers.js first commit Oct 12, 2017
package-lock.json added revision support to posts Jun 24, 2019
package.json 🚀 update axios Jun 5, 2019
routes.js first commit Oct 12, 2017
server.js first commit Oct 12, 2017

Simple React Blog

Simple React Blog

View Demo

Now includes revision preview support! See instructions below ⬇️

React + Next.js + GraphQL + Cosmic JS

This blog uses Next.js to create a Universal React blog. It connects to the Cosmic JS API via GraphQL. Manage your content from your Cosmic JS Bucket Dashboard. Simple.

Getting Started

git clone
cd simple-react-blog
npm i

Run in development

npm run dev

Run in production

COSMIC_BUCKET=your-bucket-slug npm start

Open http://localhost:3000.

Cosmic JS

You can easily manage the content in your Simple React Blog website on Cosmic JS. Cosmic JS makes a great React CMS. Follow these steps:

  1. Log in to Cosmic JS.
  2. Create a Bucket.
  3. Go to Your Bucket > Apps.
  4. Install the Simple React Blog.
  5. Deploy your Blog to the Cosmic App Server at Your Bucket > Web Hosting.

Revision Preview

Follow these steps to add revision preview to your Bucket:

  1. Log in to Cosmic JS.
  2. Go to Your Simple Blog Bucket > Posts > Settings
  3. Scroll down to the Preview Link section and add the following link:
  1. For production, replace http://localhost:3000 with your URL. Now when you "Save as Draft" on any Post, you can preview your changes by clicking the "Preview" link.

You can’t perform that action at this time.