DEV Community: Connor Reilly

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

Connor Reilly — Sat, 23 May 2020 02:55:18 +0000

You've found your way to part 2. If you've landed here by mistake, make sure you check out part one first. Next we will get to the fun part of building the actual pages, write our GraphQL queries, and styling with Tailwind.

Steps

Spin up our dev server

To see what we've built thus far, run the following command in the terminal (make sure you're in your project directory):

    $ gridsome develop

Going to http://localhost:8080/ should pull up our site (or at least what will be our site :))

Creating our Blog page

Under the pages folder, add a file called Blog.vue.
In the new Blog.vue file add the following code:

    <template>
      <Layout>
      <div class="container grid grid-cols-1 justify-center px-auto mx-auto flex flex-wrap flex-col md:flex-row items-center ">
       <div class="mx-0 px-auto max-w-xl mx-auto">
    <h1 class="text-2xl font-bold leading-tight mb-6 mt-4 text-center text-primary">Blog</h1>
    <ul>
      <li v-for="{ node } in $page.posts.edges" :key="node.id">
    <g-link :to="node.path">
       <div class=" border-solid border-2 border-primary max-auto-sm overflow-hidden shadow-lg p-20 m-4 rounded-md">
    <h1 class="text-2xl text-primary font-bold">  {{node.title}}  </h1>
    <p class="pt-5 text-darkgray"> {{node.description}} </p>
    <p class="font-normal text-sm pt-5 text-primary"> Posted on {{node.date}} </p>
    </div>
    </g-link>
      </li>

    </ul>

    </div>
    </div>
      </Layout>
    </template>

    <page-query>
    query Posts {
      posts: allContentfulBlogPost {
    edges {
      node {
        id,
        title,
        description,
        date (format: "MMMM DD, YYYY"),
        path

      }
    }
      }
    }
    </page-query>

    <script>
    export default {
      metaInfo: {
    title: 'Blog'
      }
    }
    </script>

In the URL, add /blog at the end of localhost:8080. You should see a listing of our blogs (assuming you've added a published at least one in Contentful). Clicking on any of the blogs will yield no results just yet. This is because we need a way for gridsome to read our markdown from Contentful. We also need to create our blog template. To do this, we will first add a tool called "Markdown-It." Run the following in the terminal:

yarn add markdown-it

Creating the blog template

We first need to add a template file in the src/templates directory called ContentfulBlogPost.vue. Within our new file, add the following code:

    <template>
      <Layout>
    <div class="container justify-center content-center grid grid-cols-1 py-10 px-auto markdown px-6 xl:px-12 w-full max-w-3xl mx-auto xl:w-3/4">
    <h1 class="text-2xl mb-2 text-center text-primary">{{$page.post.title}}</h1>
    <p class="font-light text-sm text-center text-gray mb-6"> Posted on {{$page.post.date}} </p>
    <div id="body" class="max-auto-sm text-left" v-html="body" />
    </div>
      </Layout>
    </template>

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

    <script>
      import MarkdownIt from "markdown-it";

      export default {
      computed: {
      body() {
        const md = new MarkdownIt();

        return md.render(this.$page.post.body);
        }
        }
      };
    </script>

    <style>
    #body{
      color: #2d3748;
    }
    #body h1 {
      font-size: 20px;
      padding-bottom: 10px;
      padding-top: 10px;
    }

    #body hr{
      padding-bottom: 10px;
    }

    #body pre{
      background-color: #2d3748;
      color: #a0aec0;
      margin: 20px;
      padding: 20px;
      border-radius: 20px;
      display: flex;
      flex-wrap: wrap;

    }

    #body pre code{ 
      overflow: scroll;

    }
    #body ul li{
      list-style-position: inside;
      list-style-type: square;
    }
    #body ol{
      padding-top: 10px;
      padding-bottom:  10px ;
      font-size: 20px;
      list-style-type: decimal;
      list-style-position: inside;
    }
    </style>

Great! Let's quickly recap some of what we've completed thus far:

Created a new girdsome project
Signed up and created a Contentful account and blog
Configured our Contentful connection to our website
Added markdown-it so our website can read the markdown that Contentful sends it
Created a Blog.vue page to view a list of all blogs
Created a ContentfulBlogPost.vue template to see the individual blog posts

Now we're going to add the finishing touches to our website. We're going to modify our Default.vue layout, update the Index.vue page (aka, the home page), and we will add an About.vue page. Let's get started.

Customizing our Header and Footer (Default.vue layout)

Our Default.vue layout is injected into every page on our site. So rather than having to code our header and footer on each page, we're going to add the code once in the Default.vue layout. This also makes it easy to maintain, should we want to make edits later on. Add the following code to your Default.vue layout file:

<template>
  <div class="layout">
  <header class="md:flex md:items-center md:justify-around p-4 pb-0 shadow-lg md:pb-4">

  <!-- Global navigation -->
  <nav class="flex flex-wrap items-center justify-around text-primary font-bold">
<div class="">
<ul class="list-reset md:flex md:items-center">
  <li class="md:ml-4">
    <g-link class="nav__link block no-underline py-2 hover:text-darkgray md:border-none md:p-0" to="/">Home</g-link>

  </li>
  <li class="md:ml-4">
    <g-link class="nav__link  block no-underline hover:text-darkgray py-2 text-grey-darkest md:border-none md:p-0" to="/about/">About</g-link>

  </li>
  <li class="md:ml-4 inline-block leading-none invisible hover:text-darkgray lg:visible sm:invisible">
    <a class="nav_link hover:text-2xl" href="your github url"> <font-awesome :icon="['fab', 'github']"/> </a>
  </li>
  <li class="md:ml-4 inline-block leading-none hover:text-darkgray invisible lg:visible sm:invisible ">
     <a class="nav_link" href="your twitter url"><font-awesome :icon="['fab', 'twitter']"/></a>
  </li>
</ul>
</div>

  </nav>

  <!-- END Global navigation -->

  </header>

<slot/>
 <footer class="mt-20 font-light text-gray w-full text-center border-grey p-4 pin-b text-primary">
        <p class="text-sm">Copyright © ADD YOUR NAME HERE 2020</p>
        <div class="justify-between hover-blue space-x-3">
        <a href="your github"> <font-awesome :icon="['fab', 'github']"/> </a>
        <a href="your twitter url"><font-awesome :icon="['fab', 'twitter']"/></a>
        </div>
        <div>
          <p class="font-light text-sm">Developed using Gridsome, Tailwindcss, and Contentful</p>
        </div>
    </footer>
</div>

</template>

<static-query>
  query {
    metadata {
      siteName
  }
}
</static-query>

Coding our Index.vue page

Now, let's update our index.vue page so we have something nice to greet our visitors with. Add the following code to the Index.vue page:

<template>
  <Layout>
<g-image alt="" src="" width="" />
<div class="pt-24">

<div class="container pb-20 px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
    <!--Left Col-->
    <div class="flex flex-col w-full md:w-2/5 justify-center justify-between text-center md:text-left pb-10">
        <p class="uppercase tracking-loose w-full text-primary">Headline text</p>
        <h1 class="py-4 text-5xl font-bold leading-tight w-full text-primary">My Blog Site!!</h1>
        <p class="leading-normal text-2xl pb-8 w-full text-primary">Subtitle</p>
        <g-link class="text-2xl justify-center" to="/blog"><button class="bg-primary text-white font-bold  hover:bg-darkgray rounded-full my-6 py-4 px-8 shadow-lg ">Blog</button></g-link>
    </div>
    <!--Right Col-->
    <div class="w-full md:w-3/5 py-6 text-center">
        <img class="w-full md:w-5/5 z-50" src="../images/undraw_feeling_proud_qne1.svg">

    </div>
</div>
</div>
  <section class="container mx-auto pt-6">
<h1 class="text-2xl font-bold text-primary text-center">Projects</h1>

  </section>    



  </Layout>
</template>

<script>
export default {
  metaInfo: {
title: 'Home'
  }
}
</script>

<style>
.home-links a {
  margin-right: 1rem;
}
</style>

Coding our About.vue page

Create a new file called About.vue under src/pages. Add in the following code, making sure to add information relevant to you in the spaces provided:

<template>
  <Layout>
  <div class="container justify-center px-auto mx-auto flex flex-wrap items-center">
  <div class="justify-center px-auto mx-auto text-center">
<h1 class="text-2xl leading-tight mb-6 mt-4 text-primary">About Me</h1>
<!--
-->
<div class=" text-darkgray"> 
<p>Add your info here
</p>
<br>
<p>Add your info here
</p>
<br>
<p>Add your info here
</p>
</div>
  </div>
  </div>
  </Layout>
</template>

<script>
export default {
  metaInfo: {
title: 'About'
  }
}
</script>

<page-query>
query Person {
 person: allContentfulPerson {
  edges {
    node {
      id,
      shortBio

      }
    }
  }
}
</page-query>

Congratulations! You've made it all the way through. At this point you should have all the parts needed to have a personal blog/resume site up and running with Gridsome and Contentful. With a few modifications and styling to your own brand, you can have it in tip top shape!

To view the production version, go HERE
To view the Github repo, go HERE

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

Connor Reilly — Sat, 23 May 2020 02:55:03 +0000

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)

Install the Gridsome CLI with the following command:

$ yarn global add @gridsome/cli

Create our Gridsome project

Run the following commands in your terminal:

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

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.

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
      ],
    },
  },
 }
}

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