Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/happy-machine/vue-blog-netlify-template
https://github.com/happy-machine/vue-blog-netlify-template
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/happy-machine/vue-blog-netlify-template
- Owner: happy-machine
- Created: 2019-09-29T13:36:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T21:17:03.000Z (about 2 years ago)
- Last Synced: 2023-03-08T05:37:35.947Z (almost 2 years ago)
- Language: JavaScript
- Size: 2.14 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue.js Blog Template Powered by Cosmic JS
A simple Vue.js template for creating a fast, beautiful blog on Netlify powerd by the [Cosmic JS Headless CMS](https://cosmicjs.com) for content editing.
This template provides blog, blog posts, authors and elegant modern design ready to deploy on [Netlify](http://netlify.com/) in one click!
![Vue.js Blog Template Powered by Cosmic JS](https://cosmic-s3.imgix.net/c3e70670-9bdf-11e8-8928-b51c5e4c8149-vue-blog.png?w=2000 "Vue.js Blog Template Powered by Cosmic JS")
### [View live demo](https://cosmicjs.com/apps/simple-vue-blog)
## Getting Started
Below are steps to deploy your application to Netlify and integrate with Cosmic JS for content editing.
### 1. Deploy to Netlify
Click the button below to deploy this application to Netlify. By default, it will be connected to a Bucket with demo content.
[![Deploy to Netlify](src/assets/deploy-button.svg "Deploy this application to Netlify")](https://app.netlify.com/start/deploy?repository=https://github.com/cosmicjs/vue-blog-netlify-template)
### 2. Create Cosmic JS Bucket
[Install the Simple Vue Blog](https://cosmicjs.com/apps/simple-vue-blog) by clicking `Install Free` on the app page.
![Install App](src/assets/install_app.png)
### 3. Generate Credentials
Click on `Settings` and then `Basic Settings` in your Bucket dashboard. There you can generate `API Read Access Key` & `API Write Access Key` and save them. This step is optional but recommended for security purposes.
![Generate Credentials](src/assets/credentials.png)
### 4. Add Environment Variable - Netlify
Now go to Netlify Site Settings and then go to the `Build and Deploy` page. Scroll down and you will see `Build environment variables` section where you will enter Cosmic JS Bucket credentials.
```javascript
{
COSMIC_BUCKET: "", /* Default: 'simple-vue-blog' */
COSMIC_READ_KEY: "", /* Default: ' */
COSMIC_WRITE_KEY: "", /* Default: '' */
BLOG_TITLE: "", /* Default: 'Vue Blog Cosmic JS' */
}
```![Add Environment Variables](src/assets/env.png)
### 5. Redeploy
At last, go to Netlify `Deploys` page and Trigger Deploy. Congratulation, your application is deployed and connected to Cosmic JS Bucket.
![Add Environment Variables](src/assets/redeploy.png)