![](https://hackernoon.com/hn-images/1*155RhAJbE_-x6SYyVJwZ1w.jpeg)

Look at this Vuetiful blog :\]

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](https://cosmicjs.com/?ref=SJHUGTXvf) and deploy it to Netlify. Let’s get started.

### TL;DR

[Demo Link  
](https://cosmicjs.com/apps/vuetify-blog)[View Code on Github](https://github.com/cosmicjs/vuetify-blog)

[Netlify Deploy “Button”](https://app.netlify.com/start/deploy?repository=https://github.com/cosmicjs/vuetify-blog)

### Features

*   [Netlify](https://hackernoon.com/tagged/netlify) hosting (plus CDN, Prerendering, Minification, etc..)
*   Moderated commenting system (Un-moderated by default)
*   Social share buttons
*   [SEO](https://hackernoon.com/tagged/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](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](https://www.netlify.com/docs/redirects/). 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 Cosmicify 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.git](https://github.com/cosmicjs/vuetify-blog.git)

Use BitBucket or Gitlab instead?

If you prefer to use a different git provider you can just clone the cosmicify 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](https://raw.githubusercontent.com/availit/cosmicify/master/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.

![](https://hackernoon.com/hn-images/0*_PIh6zQcpYqHdPHJ.jpg)

#### 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](https://app.netlify.com/start)”. 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.

![](https://hackernoon.com/hn-images/0*-wfxO53GdlVAehSn.jpg)

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`

![](https://hackernoon.com/hn-images/0*PBP0ujLSCKbG-kZu.jpg)

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

![](https://hackernoon.com/hn-images/0*fHL_0zfFZEft4w6m.jpg)

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!

![](https://hackernoon.com/hn-images/0*EWYQ2sAlf1B4z7rr.jpg)

### 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.

![](https://hackernoon.com/hn-images/0*dRYDLFQtgcRF49W6.jpg)

### 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. Built using Vue, Vuex, and Cosmic JS. Oh, and don’t forget Vuetify, the amazing material component library by [John Leider](https://medium.com/@john.j.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](https://www.twitter.com/aaron_vail)

This article was originally posted on [aaronvail.io](https://aaronvail.io/posts/tutorial-how-to-deploy-a-blog-using-cosmic-js-vuetify-to-netlify)

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

Too Long; Didn't Read

Companies Mentioned

@AaronVail

RELATED STORIES