Gatsby Starter Egghead Blog

Overview

The egghead.io creator MDX Blog Starter Project is a Gatsby.js starter project with MDX (JavaScript/React in Markdown) capabilities. It includes features such as Prism.js for syntax highlighting, pagination, Emotion for styling, Typography.js for managing typography, self-hosted fonts, social media share buttons, site and theme configuration files, ConvertKit subscribe form, and placeholder illustrations by Katerina Limpitsouni from undraw.co.

Features

• MDX: Allows the use of JavaScript/React in Markdown.
• Prism.js: Provides syntax highlighting for code snippets.
• Pagination: Allows for easy pagination of blog posts.
• Emotion: Enables the use of CSS-in-JS for styling.
• Typography.js: Streamlines the management of typography on the website.
• Self-hosted fonts: Allows for the use of custom fonts on the website.
• Social media share buttons: Provides built-in share buttons for various social media platforms.
• Site & Theme config files: Allows for easy configuration of the site and theme.
• ConvertKit subscribe form: Integrates with ConvertKit to provide a subscription form.
• Placeholder illustrations by Katerina Limpitsouni: Includes placeholder illustrations from undraw.co.

Installation

Demo Setup

1. Clone the repository:

   git clone git@github.com:eggheadio/gatsby-starter-egghead-blog.git
   

2. Navigate to the project directory:

   cd gatsby-starter-egghead-blog
   

3. Install the necessary dependencies:

   yarn
   

4. Start the development server:

   gatsby develop
   

5. Visit http://localhost:8000 to view the demo site.

Setup via Gatsby CLI

1. Create a new Gatsby project using the starter:

   gatsby new gatsby-starter-egghead-blog git@github.com:eggheadio/gatsby-starter-egghead-blog.git
   

2. Navigate to the project directory:

   cd gatsby-starter-egghead-blog
   

3. Install the necessary dependencies:

   yarn
   

4. Start the development server:

   gatsby develop
   

5. Visit http://localhost:8000 to view the demo site.

Set up Redirects

This starter project supports defining alias URLs for blog posts using the redirects property on posts. However, this feature requires an additional plugin to be added to your site. Popular options for the plugin are gatsby-plugin-netlify or gatsby-plugin-s3, depending on the provider you deploy your site to.

Summary

The egghead.io creator MDX Blog Starter Project is a powerful Gatsby.js starter project that combines the flexibility of MDX with various useful features for creating a blog. It provides easy integration of JavaScript/React in Markdown, syntax highlighting, pagination, styling with Emotion, typography management with Typography.js, self-hosted fonts, social media share buttons, and more. The installation process is straightforward, and the project supports defining alias URLs for blog posts with the help of appropriate plugins.