Aaron Vail
January 25, 2019
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 and deploy it to Netlify. Let’s get started.
TL;DR
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
Needed improvements
- Static page content connected to Cosmic
- 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 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.
~/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
In your Cosmic 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.
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.
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
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
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 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.
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. 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
