← Go Back

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

  1. Install Gridsome CLI

    npm install --global @gridsome/cli
  2. Create new Gridsome site with the CLI

    gridsome create my-gridsome-blog
    cd my-gridsome-blog
  3. Start development server

    gridsome develop

🔗 Connect NetlifyCMS

  1. Install these dependencies





    npm add netlify-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
  2. 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`
  3. 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:

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

    index.js should look like this:

    import CMS from "netlify-cms"

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

      name: github
      repo: your_name/repo_name
    media_folder: "static/uploads"
    public_folder: "/uploads"
      - name: "posts"
        label: "Posts"
        folder: "posts"
        create: true
        slug: "{{slug}}"
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Publish Date", name: "date", widget: "date"}
          - {label: "Body", name: "body", widget: "markdown"}
  4. 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
  5. 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.