@willjw3/gatsby-theme-techblog

A minimalistic MDX blog theme for your Gatsby site

Features

• Fully configured for adding blog posts as MDX files to your site.
• Includes Theme UI for customizing components.
• Gatsby v.2 (August, 2019).
• Mobile responsive.
• Uses pagination for faster page loading.
• Can list posts by tag category.

Live demo

Usage (Build a Gatsby site from scratch)

How to Use a Gatsby Theme - Video Tutorial

Create a new directory for your site and install dependencies.

mkdir mySite
cd mySite
yarn init or npm init
yarn add react react-dom gatsby @willjw3/gatsby-theme-techblog
or
npm install react react-dom gatsby @willjw3/gatsby-theme-techblog

In your project root, create a gatsby-config.js file and add the theme as a plugin.

gatsby-config.js

module.exports = {
    plugins: [`@willjw3/gatsby-theme-techblog`]
}

Without data GraphQL with throw errors, but run the dev server anyway.

yarn global add gatsby-cli or npm install -g gatsby-cli
gatsby develop

You'll see that the theme has added two directories to your site, blog and posts. The posts directory is the content source for your blog and is where your blog posts live. Add a dummy post to your blog to make sure it works by creating an MDX file in the posts directory and add the following markdown:

---
title: 'Gatsby Themes Are Here!'
tags: ["gatsby", "jam-stack"]
published: true
author: "willjw3"
date: '2019-08-05'
---

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Run the dev server again (gatsby develop) and go to http://localhost:8000/blog. You should see your blog post.