Gatsby Starter Egghead Blog
This is an example Gatsby blog site that we use as a reference at egghead.
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.
Demo Setup
- Clone the repository:
git clone git@github.com:eggheadio/gatsby-starter-egghead-blog.git - Navigate to the project directory:
cd gatsby-starter-egghead-blog - Install the necessary dependencies:
yarn - Start the development server:
gatsby develop - Visit http://localhost:8000 to view the demo site.
Setup via Gatsby CLI
- Create a new Gatsby project using the starter:
gatsby new gatsby-starter-egghead-blog git@github.com:eggheadio/gatsby-starter-egghead-blog.git - Navigate to the project directory:
cd gatsby-starter-egghead-blog - Install the necessary dependencies:
yarn - Start the development server:
gatsby develop - 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.
- Gatsby
GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Formik
Formik is a popular form library for React that helps with form state management, validation, and submission handling. It provides a declarative approach to building forms with support for complex validation scenarios and easy integration with validation libraries like Yup.
- MDX
MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.
- Prism JS
PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.