Hello world - Gridsome

6 December 2019 | 2 min read

Welcome to my new blog. I will be writing my technical experiences, challenges faced and other adventures and tips in this blog. I have been developing this website for quite some time now and I decided to use Gridsome to develop my new blog.

Yes you guessed it right being a VueJs Enthusiast, I wanted to explore Gridsome and learn the concepts behind Gridsome and utilize the power of GraphQL provided in built with Gridsome.

So here comes the tools which I have used to develop this website.

  • Development - VueJs and Gridsome
  • Styling - Bulma
  • Hosting - Netlify
  • MarkDown Editor - Notion.so
  • Font Awesome
  • Development IDE - Visual Studio Code

Below is the Gridsome configuration which I have used for developing this website.

    module.exports = {
      siteName: 'baskarmib world',  
      templates:{
          Post : '/content/posts/:year/:month/:title',      
      },
      plugins: [{
        use: '@gridsome/source-filesystem',
          options: {
            path: 'content/posts/**/*.md',
            typeName: 'Post'       
          }
      }],
      transformers:{
        remark: {
          autolinkClassName: "fas fa-hashtag",
          externalLinksTarget: "_blank",
          externalLinksRel: ["nofollow", "noopener", "noreferrer"],
          plugins: [['gridsome-plugin-remark-shiki', { theme: 'nord', skipInline: false }]]
        }
      }
    }

Challenge- 1

While developing the blog using Gridsome, I initially had the content folder within the src folder. It is required to have the content folder outside of src folder while using the below path.

    'content/posts/**/*.md'. 
Tip: I did not use the minimal-starter template. You can use the template directly to avoid the issue which I have faced.

Challenge- 2

Latest version of Gridsome would provide a deprecation warning to use templates for collections.

This can be resolved by using templates in gridsome.config.js

    templates:{
          Post : '/content/posts/:year/:month/:title',      
      }

It is not required to mention route as part of @gridsome/source-filesystem plugin.

Once these are taken care, we are up and running.

Credit goes to below authors as I have referred all the solutions, for developing the blog and website.

Thank you all for your contributions, which helped in developing this website and blog. I strongly recommend referring the above links to get an initial understanding.

Thank you for reading!!