How to deploy a blog using Cosmic JS + Vuetify to Netlify


In this tutorial, I'm going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic JS and deploy it to Netlify. Let’s get started.

TL;DR

Demo Link
View Code on Github

Deploy to Netlify

Features

  • Netlify hosting (plus CDN, Prerendering, Minification, etc..)
  • Moderated commenting system (Un-moderated by default)
  • Social share buttons
  • SEO Meta tags with Vue-Meta
  • Integrated content management system via Cosmic JS

Needed improvements

  • Static page content connected to Cosmic JS
  • Post categories feature
  • Gravatar comment integration
  • Back/Forward buttons to trigger post view

Prerequisites

You will be required to have Node JS and npm before starting. Make sure you already have them installed. If not you can find them here: https://nodejs.org

Also in order to deploy it you can use Netlify account or Cosmic JS hosting.

Project Structure

Important things to note:
~/public/_redirects
This file is important since it points all your traffic to the index.html file in order for vue-router to handle the requests. To learn more about Netlify redirects visit their docs. You don't need this file if you're deploying via Cosmic JS.

~/public/favicon.ico
If you want to customize your favicon you can change this file located within the public directory.

Fork and Clone

First we'll be forking the repository on GitHub. Afterwards open up command line or terminal and clone it to your project folder on your local machine with this command:

git clone https://github.com/cosmicjs/vuetify-blog

Use BitBucket or Gitlab instead?

If you prefer to use a different git provider you can just clone the repository and upload it to your desired remote.

Install

In your command line cd into the project root directory that you just cloned and run npm install to download and install all the required dependencies.

Integrate Cosmic JS

In your Cosmic JS account create a new bucket and call it whatever you want.

Download this bucket.json file. And in Settings -> Import / Export Data, select and upload the downloaded file. This will import all the Object Types and placeholder data.

Bucket Structure

Settings

There are a couple settings Objects to allow you to change how your blog acts. The global Object has most of the overall options such as choosing whether your comments require you to approve and publish them. Your blog's logo in the navbar, or the "Read More" button text.. Meanwhile the Social profiles Object is to set the social network icons in the footer.

Cosmicify settings

Posts

These Objects will be all your blog posts/articles.

Profiles

These Objects are for the author that will be posting on the blog. You can change your name, bio and profile picture.

Comments

The Comments Objects are exactly that; Comments, typically created via the site's new comment form. They collect Name, Email, and the Comment.

Deployment with Netlify

Go to your Netlify dashboard and click "New site from Git". Choose your git provider (I use GitHub). After you authenticate you can see your list of repositories. Select the one you created for this project you created earlier.

Create new site from git

Next it will make you choose a branch, then set some config options for it to run properly.

Set the deploy directory to dist and set the deploy command to npm start

Netlify New Site Configuration

Next you'll click 'Show advanced' in order to set some environment variables.

Using the list below enter the key and values for your app. You need to enter your Bucket slug in the COSMIC_BUCKET variable. The variables with META in the name are used for the SEO tags on the site. The VUE_APP_DOMAIN is required for the article share links to work properly. For the commenting system to work you need your COSMIC_READ_KEY and COSMIC_WRITE_KEY.

Required environment variables for the project:

VUE_APP_TITLE
COSMIC_BUCKET
COSMIC_READ_KEY
COSMIC_WRITE_KEY
VUE_APP_DOMAIN
VUE_APP_META_TITLE
VUE_APP_META_LOGO
VUE_APP_META_DESC

Netlify Environment Variables

Once everything looks correct you can click "Deploy site" and it will install and build the app in a couple minutes then publish it live on the internet!

Netlify build log

Netlify Post Processing

Netlify offers post processing that runs after your site builds. This is optional but I highly recommend enabling post processing because it enhances your site's performance and prerendering in order for Googlebot to crawl your blog content.

Netlify post processing

Conclusion

I built this app for fun and decided to share it with everyone. It is open source under MIT license so feel free to hack it, modify it, or break it for all I care. Build using Vue, Vuex, and Cosmic JS. Oh, and don't forget Vuetify, the amazing material component library by John Leider and over 200+ open source contributors.

If you have trouble or it's not working for you let me know in the comments and I'll do my best to help! Or reach out via twitter @Aaron_Vail

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


In this tutorial we gonna build ReactJS powered application using CosmicJS for saving data.
To demonstrate how easy it is to get started with Cosmic JS, we'll utilize the Cosmic JS CLI to quickstart a Vue.js Music App. This Music website was built using Vue, Nuxt and Cosmic JS. Users can upload and play tracks, upload and manage album art plus leave comments.
The relationship between content and code has come to an end.
In addition to Import / Export Features and Revision History, Cosmic JS has added Automatic Bucket Backups to deliver even more peace of mind to you and your content editing team. To add daily Backups to your Buckets go to Your Bucket Dashboard > Settings > Backups.
In this tutorial, I’m going to give you an overview of Mux Extension, talk about the benefits of adding Mux to your Cosmic Bucket and show you how to install it to your Bucket in a few clicks.
In this tutorial I’ll demonstrate how to build an Authentication app using Angular 6 and Cosmic JS. Starting from scratch, learn how to build, configure and deploy this Angular6 Auth app to the Cosmic JS App Server for testing purposes.