Getting Started With Gridsome

What is Gridsome?

Gridsome is a JAMstack framework powered by Vue.js. JAMstack stands for JavaScript, API and Markup, a modern way to build fast, scalable and secure web applications and removes the need to manage or run web servers. Gridsome offers a lot of plugins to make the workflow a lot easier. Gridsome generates static sites which fetchs the data from markdown or any other data source using GraphQL.

Why Gridsome?

• Easy to get started
• Vue.js for frontend
• Hot reloading
• GraphQL data layer
• Lots of plugins
• Dynamic and File based routing
• Pre-rendered HTML
• Easy to make PWA

Getting Started With Gridsome

Install Gridsome

If you prefer yarn:

yarn global add @gridsome/cli

or if you prefer npm:

npm install --global @gridsome/cli

New Project

Once Gridsome is installed you can create a new project by running the following commands in your terminal

gridsome create blog
cd blog
gridsome develop

Building the blog

This is what our blog will look like

Now let’s start building our blog. So we’re how are we doing this? We’re gonna write down our blog posts in markdown and it should get rendered to HTML on our site. So we need to keep three things on our mind.

1. We need to transform our markdown files into content
2. We need need to fetch the data from our markdown into our blog post template
3. We need to display our posts

Transforming files into content

The @gridsome/source-filesystem plugin is used to parse files in a directory to a format which can be parsed by other plugins

To install it:

• yarn add @gridsome/source-filesystem

• npm install @gridsome/source-filesystem

We also need a markdown transformer which can be installed using

• yarn add @gridsome/transformer-remark

• npm install @gridsome/transformer-remark

Now we need to do some configurations within the gridsome.config.js file

module.exports = {
  siteName: "Blog",
  siteDescription: "Just another random blog",
  plugins: [
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "content/posts/**/*.md",
        typeName: "Post",
        route: "/blog/:slug",
      },
    },
  ],
};

So what does all this mean? We added our plugin to the plugins array and then we specified some options within the plugin

• path is the location of our markdown contents
• typeName is the name of our template which will display our blog post
• route is the, well route of the blog post, we will provide the slug when writing out blog post, so if the slug is “first-post”, the route of our blog will be localhost:8080/blog/first-post or yoursitename.com/blog/first-post if you host it.

Now create a folder named content in your root directory and inside it make another directory named posts. The post directory will store the markdown files containing our content.

So go ahead and create a file named first-post.md inside the posts folder with the below contents

---
title: "First post"
slug: "first-post"
date: 2020-07-04
---

Some random content.

Post template

We need to create a file named Post.vue inside src/templates directory. This vue file is used to display the individual blog posts. Let’s look at code on how to do this.

<template>
  <Layout>
    <div class="container">
      <div>
        <h1 class="post-title">{{ $page.post.title }}</h1>
        <p class="post-info">{{ $page.post.date }}</p>
      </div>
      <hr />
      <article class="content" v-html="$page.post.content" />
    </div>
  </Layout>
</template>

<page-query>
query Post ($path: String!) {
   post: post (path: $path) {
    id
    title
    content
    date (format: "D MMMM YYYY")
  }
}
</page-query>

So this is our post template, the code inside the <page-query> tag is the GraphQL query which queries and fetches the data from our markdown source. GraphQL queries the id, title, content, date and timeToRead from our markdown and injects it into our template. Gridsome then generates a blog post page for each post we have based on this template.

Post List Component

We also need to display all our posts on our first page so for that we create a component PostList.vue inside the src/components directory.

<template>
  <div class="container">
    <div class="post-list">
      <article>
        <h3 class="title" v-html="post.title" />
        <p class="text" v-html="post.date" />
        <g-link :to="post.path">Read </g-link>
      </article>
    </div>
  </div>
</template>

<script>
export default {
  name: "PostList",
  props: ["post"],
};
</script>

We now embedd this component in the required page, I’m gonna list all the blogs in the Index.vue file.

<template>
  <Layout>
    <header class="header">
      <h1>Blog</h1>
      <p>Let's write some amazing content</p>
    </header>
    <section class="posts">
      <div>
        <PostList
          v-for="edge in $page.allPost.edges"
          :key="edge.node.id"
          :post="edge.node"
        />
      </div>
    </section>
  </Layout>
</template>

<page-query>
query {
  allPost {
    totalCount
    edges {
      node {
        id
        title
        timeToRead
        date (format: "D MMMM YYYY")
        path
      }
    }
  }
}
</page-query>

<script>
import PostList from "~/components/PostList.vue";

export default {
  name: "Index",
  components: {
    PostList,
  },
};
</script>

So inside the template tags we iterate over all the available blogs and display the list. The page-query queries the data from the markdown source. Don’t forget to import the PostList component in the Index.vue file.

Now run gridsome develop in your terminal and voilà you’ve made a blog with Gridsome.

Spinkle some CSS over your blog to make it look cooler.