Building a website + blog with Gridsome, Tailwindcss, and Contentful Pt. 1 of 2

What We're Building

---

In this two part tutorial, I'll be walking you through how to build a blog site. The technologies we will be utilizing include Gridsome, Tailwindcss, and Contentful (our headless CMS). We will get up and running in part one, complete with our connection with Contentful. Part two dives into the pages, templates, layouts, and finally, the styling with Tailwind.

Steps

---

Tools Needed:

• Yarn
• Code editor (I use Visual Studio Code)

1. Install the Gridsome CLI with the following command:

$ yarn global add @gridsome/cli

1. Create our Gridsome project

Run the following commands in your terminal:

$ gridsome create my-blog
$ cd my-blog
$ yarn install
$ yarn develop

1. Set up Contentful account

Contentful is our headless CMS that we will be using to store our content. Head over to Contentful and create an account. Once your account is created, create a new space. For this, you can create a new blank space, or use the "Blog" example space. For ease of use, I'll be choosing the blog example space.

1. Integrating Contentful with our Gridsome project

Let's install the Contenful Gridsome plugin:

$ yarn add @gridsome/source-contentful

In the root of the project, add a file called .env. Within that file, paste the following contents:

CONTENTFUL_SPACE="<YOUR_CONTENTFUL_SPACE>"
CONTENTFUL_TOKEN="<YOUR_CONTENTFUL_TOKEN>"
CONTENTFUL_ENVIRONMENT="<YOUR_CONTENTFUL_ENVIRONMENT>"

You'll notice that there are environmental variables that are specific to your Contentful space. To find these, log into Contentful and under settings, click "API Keys." Here, you will find your Space ID, Access Token, and Environment (defaults to "master").

Open your gridsome.config.js file and paste in the following code:

module.exports = {
  siteName: 'YOUR NAME HERE',
  templates: {
   ContentfulBlogPost: '/blog/:slug'
  },
  plugins: [
    {
    use: "@gridsome/source-contentful",
      options: {
      space: process.env.CONTENTFUL_SPACE,
      accessToken: process.env.CONTENTFUL_TOKEN,
      host: "cdn.contentful.com",
      environment: process.env.CONTENTFUL_ENVIRONMENT,
      typename: "Contentful"
    }
}
],
 css: {
  loaderOptions: {
    postcss: {
      plugins: [
        tailwindcss
      ],
    },
  },
 }
}

1. Installing Tailwindcss and adding the Tailwind config file

First let's add Tailwindcss:

npm i tailwindcss

Add the config file:

npx tailwind init

Now create a new folder under src called /assets/css and a file in the css folder called global.css. In global.css add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

We now need to import the .css file to our /main.js file.

import "./assets/css/global.css";

Lastly, we will require tailwind in our gridsome.config.js file. Add the following to the very top of the file:

const tailwindcss = require("tailwindcss")

Congrats, you've completed part one! Cheers to that. Now lets get to the pages, layouts, and styling in part two