diff --git a/docs/guide-serverless-blog.md b/docs/guide-serverless-blog.md new file mode 100644 index 00000000..0de33ce8 --- /dev/null +++ b/docs/guide-serverless-blog.md @@ -0,0 +1,254 @@ +# Create Serverless CMS-Powered Blog + +With this guide, we would create a Serveless CMS-Powered blog using the ButterCMS Api. + +## What is ButterCMS + +[Butter is a headless CMS](https://buttercms.com) that lets you manage content using our dashboard and integrate it into your gridsome website/blog with their content APIs. You can use ButterCMS for new projects as well as add it to existing codebases. +ButterCMS provides a user-friendly UI for managing marketing sites, blogging, and custom content scenarios. We can be used for SEO landing pages, customer case studies, company news & updates, events + webinar pages, education center, location pages, knowledgebases, and more. + +## Prerequisites + +To develop with Gridsome, you require **Node.js** and it's recommended to use **Yarn**. [How to setup](https://gridsome.org/docs/prerequisites) + +## Create a new Gridsome Project + +1. Use `gridsome create my-project-name` to create a new project +2. `cd my-project-name` to open folder +3. Use `gridsome develop` to run the development server + +## Install the Butter Gridsome plugin + +1. Using yarn `yarn add gridsome-source-buttercms` +2. Using npm `npm install gridsome-source-buttercms` + +Head to [buttercms.com](https://buttercms.com) and register a new account. Butter gives you a 30 days free trial to test out all features. You can also register for a Personal Developer account which is free by contacting the ButterCMS team. + +Goto settings on your ButterCMS Dashboard and get your **Read API key**. This is what we would use to configure the gridsome-butter plugin. + +You can create posts on your ButterCMS Dashboard for the purpose of this guide + +## Configuration + +Locate your `gridsome.config.js` file and add the butter-gridsome plugin configuration. It should look like this. Please note, you are to change the part that reads `` to the Read API token you got from your ButterCMS Dashboard +```js +module.exports = { + siteName: 'Gridsome', + plugins: [ + { + use: 'gridsome-source-buttercms', + options: { + authToken: '', + collections: [''], + pages: '', + pageTypes: '', + }, + }, + ], +}; +``` + +## Blog posts + +Create a vue Component in the components folder called **PostMeta**. This component would include all the details of a post like the Published date and the Author's first name and last name. + +The content should look like +```html + + + + + + +``` + +Also, create a new vue component called **PostCard.vue** in the components folder and add the following code + +```html + + + + + +``` + +Now edit the `Index.vue` template in the **pages** folder. This page serves as the default page when you visit your gridsome website. Your index page should look like this +```html + + + +query { + posts: allButterPosts(order: ASC) { + edges { + node { + id + title + url + published + slug + summary + body + featured_image + tags { + name + slug + } + categories { + name + slug + } + author { + first_name + last_name + } + } + } + } +} + + + + + + +``` + +When you visit the homepage, you should see a list of your blog posts well-defined. + +To view all GraphQL queries available to you, you can go to [http://your-homepage/___explore](http://your-homepage/___explore). There you should see all queries you can make with Gridsome diff --git a/src/data/doc-links.yaml b/src/data/doc-links.yaml index 1f31727b..6b4b4329 100644 --- a/src/data/doc-links.yaml +++ b/src/data/doc-links.yaml @@ -84,6 +84,8 @@ link: /docs/page-transitions/ - title: body & html attributes link: /docs/body-html-attributes/ + - title: Create Serverless Blog + link: /docs/guide-serverless-blog/ - title: API Reference items: