Gatsby Starters & Templates Logo Gatsby Starters & Templates
Gatsby Theme Egghead Blog screenshot

Gatsby Theme Egghead Blog

Author Avatar Theme by Eggheadio
Updated: 6 Mar 2020
16 Stars

This is a theme version of our gatsby-starter-egghead-blog.

Github

Overview

The MDX Blog Theme Project is a project built on Gatsby.js themes with MDX. It allows users to create a blog using JavaScript/React in Markdown. The theme includes features such as syntax highlighting, pagination, self-hosted fonts, social media share buttons, and a ConvertKit subscribe form. The theme also provides a default folder structure and placeholder frontmatter to ensure smooth functionality.

Features

  • MDX: Allows users to write JavaScript/React in Markdown.
  • Prism.js: Provides syntax highlighting for code snippets.
  • Pagination: Enables pagination for blog posts.
  • Emotion: A library for CSS-in-JS, used for styling the theme.
  • Typography.js: Helps to create beautiful typography for the blog.
  • Self-hosted fonts (Inter UI): Allows users to use self-hosted fonts for the blog.
  • Social media share buttons: Adds social media share buttons to blog posts.
  • Site & Theme config files: Allows users to configure site and theme settings.
  • ConvertKit subscribe form (Formik and Yup): Integrates a ConvertKit subscribe form using Formik and Yup.
  • Placeholder illustrations: Uses placeholder illustrations by Katerina Limpitsouni from undraw.co.

Installation

To install the MDX Blog Theme Project, follow these steps:

Step 1: Installation

  • Clone the theme repository.
  • Install the necessary dependencies.

Step 2: Folder Structure

  • Create the recommended folder structure for the blog project.

Step 3: Adding Frontmatter Placeholder

  • Create a frontmatter placeholder folder and add the necessary files.

Step 4: Configuring siteMetadata

  • Configure the siteMetadata in the gatsby-config.js file.

Override theme components (Component Shadowing)

  • Learn how to override theme components by shadowing them.

Summary

The MDX Blog Theme Project is a powerful Gatsby.js theme that allows users to create a blog using JavaScript/React in Markdown. With features like syntax highlighting, pagination, self-hosted fonts, and social media share buttons, it provides a comprehensive solution for building a blog. The theme also includes installation instructions and guidance on customizing and configuring various aspects of the blog. Overall, it is a useful and flexible theme for creating a personalized blog experience.