Gatsby Advanced Starter
A high performance skeleton starter for GatsbyJS with an advanced feature set.
Overview
The Gatsby Advanced Starter is a starter skeleton for building advanced GatsbyJS powered websites. It aims to simplify the development process by using the latest technologies and providing a comfortable development environment. This starter does not impose any UI limitations and offers basic components for SEO, links, and infinite scrolling.
Features
- Gatsby v4 support: Built to work with the latest version of Gatsby.
- First class TypeScript support: Supports TypeScript for both query data and components.
- Styled Components used for styling: Uses Styled Components for styling the website.
- Posts in MDX: Allows writing posts in MDX format.
- Code syntax highlighting: Provides syntax highlighting for code snippets.
- Embed videos and iframes: Supports embedding videos and iframes.
- Infinite Scrolling: Implements infinite scrolling for improved user experience.
- React Query for client-side API calls: Uses React Query for making API calls on the client-side.
- Tags: Supports tagging of posts and provides a separate page for each tag.
- Categories: Supports categorizing posts and provides a separate page for each category.
- Social features: Includes Twitter tweet button, Facebook share, Reddit share, and LinkedIn share button.
- Author section: Displays an author section for each post.
- Related posts computation and display: Displays related posts based on category/tag match ranking.
- Disqus support: Integrates Disqus commenting system.
- gatsby-plugin-image for optimized image generation: Uses gatsby-plugin-image for optimized image generation.
- Inline SVG imports: Supports importing SVG files inline.
- 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
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- NetlifyCMS
Netlify CMS is a powerful and flexible content management system that is designed to work seamlessly with the Netlify platform. Netlify CMS provides a user-friendly interface for managing content, including support for custom content types, localization, and asset management.
- Disqus
A website that uses Disqus as a commenting system to enable audience engagement and discussion. This includes features such as real-time commenting, moderation tools, and social login to facilitate a seamless commenting experience.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Pwa
A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- 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.
