How I build this blog

Tools used: Gridsome, NetlifyCMS, Github, GraphQL

I was looking for the Vue equivalent of GatsbyJS and found Gridsome. I've tried using GatsbyJS and since I'm not familiar with React, Gridsome was perfect.

⚙️ Setup

Install Gridsome CLI
```
npm install --global @gridsome/cli
```

Create new Gridsome site with the CLI

gridsome create my-gridsome-blog
cd my-gridsome-blog

Start development server
```
gridsome develop
```

🔗 Connect NetlifyCMS

Install these dependencies

netlify-cms

gridsome-plugin-netlify-cms

@gridsome/source-filesystem

@gridsome/transformer-remark
```
npm add netlify-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
```

Add this snippet to gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  transformers: {
    remark: {
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClassName: 'icon icon-link',
      plugins: [
      ]
    }
  },

  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'posts/**/*.md',
        typeName: 'Post',
        remark: {
          plugins: [
          ]
        }
      }
    },
    {
      use: `gridsome-plugin-netlify-cms`,
      options: {
        publicPath: `/admin`
      }
    },
  ]
}

Create an admin folder in the src folder. Add index.html, index.js and config.yml file to your admin folder. Create an uploads folder in the root of the project.

index.html should look like this here:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netlify CMS</title></head>
  <body>
    <script src="index.js" type="module"></script>
  </body>
</html>

index.js should look like this:

import CMS from "netlify-cms"

Paste this code in config.yml. Update the repo information.

backend:
  name: github
  repo: your_name/repo_name

media_folder: "static/uploads"
public_folder: "/uploads"

collections:
  - name: "posts"
    label: "Posts"
    folder: "posts"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "date"}
      - {label: "Body", name: "body", widget: "markdown"}

Create a Github repo and push the project to Github.

git init
git add .
git commit -m "first commit"
git remote add origin [remote repository URL]
git push -u origin master

Deploy the project to Netlify. Settings for Netlify:

Build Command: gridsome build

Publish Directory: dist

🔐 Netlify CMS authentication with GitHub

We will have to give Github access to Netlify CMS before we can start posting. Follow the instruction listed on this Gridsome doc.

🚀 Ready for development

Now everything is setup and ready to start developing, styling and adding posts.

📑 Adding Post

To start posting, go to https://[project-name].netlify.app/admin (domain name can be found in Netlify Site Settings for the project) and add new posts.