The new Cosmic dashboard is now available in private beta 🎉
Get it now →

Build a Blazing Fast Blog with Cosmic and Gridsome

Community Articles
Community Articles Build a Blazing Fast Blog with Cosmic and Gridsome

Gridsome is a static site generator based on Vue.js. It's inspired by Gatsby but powered by Vue.js instead of React. Today, we'll develop a simple yet powerful blog using Gridsome.

We will integrate the Cosmic headless CMS as a GraphQL datasource for Gridsome and then build a blazing fast blog to demonstrate the power of those systems.

TL;DR

Check out the demo
Download the codebase
Check out the source plugin

Setting up Gridsome

Fortunately, setting up Gridsome is straightforward. You can follow the official documentation to set up a fresh Gridsome project.

Integrating Cosmic into Gridsome

Gridsome is using datasources, which are wrapped by a GraphQL layer, to fetch the data needed to render your website. What this means is, that, if we can’t use one of the official datasource plugins, we have to write our own.

Writing a custom Cosmic source plugin

Writing a custom source plugin for Gridsome is quite easy. Which I'll explain below. 

You can look the complete code & implementation on GitHub

We can use the axios package to query the Cosmic API & lodash to query the results.

npm install --save axios lodash

Now create two files in your project. index.js and  fetch.js. In  fetch.js, we will simply fetch the results from Cosmic CMS.

The code above demonstrates a simple data fetching from Cosmic. It fetches all the Objects in content type and formats it properly. Now, we have to use this function and create datasource for Gridsome.

In index.js, we have to use the above fetch code and create Gridsome Datasource Class.

The code above demonstrates a very basic implementation. It fetches objects from all the contentTypes mentioned in the config and makes it available to Gridsome to create our blog. 

Next we have to update our gridsome.config.js file to let Gridsome know about our new datasource plugin.

Note: This source plugin is available in NPM repository. You can install using npm i --save gridsome-source-cosmicjs

Querying data with GraphQL

Now that we’ve successfully set up our new Cosmic data source, we’re able to start the Gridsome development server and check out if everything works as expected.

npm run develop

You can use the integrated GraphQL explorer http://localhost:8080/___explore to test your GraphQL queries. You can view your website by opening http://localhost:8080 in the browser.

Building a landing page & post page

Everything is set up – let’s build some pages to render the data provided by the Cosmic CMS.

In Gridsome project, go to src/pages/Index.vue and past the following code:

In the block, you can see the GraphQL query which is used to fetch the data we need to render our Index page. We can access the data inside the section via the $page.posts & $page.settingsvariables.

Now go to src/layouts/Default.vue and past the following code: 

Now go to templates folder and create Cosmicjs{ContentType}.vue files for your object types. In our case, we have only posts. So we will create CosmicjsPosts.vuefile.

If you want to take a closer look at the Bio component, mixins & typography, you can checkout the code on GitHub.

Wrapping it up

Although setting up the datasources requires some fiddling around and a lot of trial and error, the final result is pretty impressive. Especially the blazingly fast performance, data management using a Headless CMS like Cosmic and tiny bundle size of the resulting website, making it very tempting to choose Gridsome over single page applications.


You may also like


In this walkthrough, I'm going to show you how I build a blog application in Go Lang. I'll also talk about styling it using Tailwind CSS and lastly, I'll show you how you can utilize GitHub Actions to deploy your Go-based applications to Heroku.
This article will demonstrate how to build a simple ecommerce website with the purpose of showing how we can offer a customized experience for everyone. Our data will be stored and served by Cosmic and we will use Angular for our Front-End.
Cosmic lets you build one-to-one as well as one-to-many Object Relationships within your Bucket Dashboard. To help you and your team manage content more seamlessly, you can now see your Connected Objects located on the Object’s Edit page in the Dashboard.
For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we're going to build an e-commerce website using Nuxt and Cosmic.
This article will point out some of the advantages that a headless CMS offers. Hopefully, your pain point is covered in here or it sparks an idea for a new way of thinking about what you can do with a CMS.
Cosmic makes it easy to manage content for your Bootstrap applications. In this blog we'll quickstart a Bootstrap Landing Page using the Cosmic CLI. This single page website landing page is built using Node.js and a minimal theme from Start Bootstrap.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales