Gatsby Advanced Starter

A blog starter skeleton with advanced features for Gatsby.

NOTE: This branch contains Gatsby v2 compatible version of the starter. To get the Gatsby v1 compatible version, use the v1 branch.

Why?

This project aims to provide a minimal base for building advanced GatsbyJS powered blogs.

It doesn't define any UI limitations in any way, and only gives you the basic components for SEO/Social Media/etc.

You are free to use any UI framework/styling options available to you.

NOTE: This project is a stripped down version of Gatsby Material Starter, but will evolve separately.

How can I use this?

If you are a newcomer to Gatsby who's interested in the implementations of most needed features, this is a great place to start.

If you are interested in a foundation for building ultra-fast websites, you can use this project as a "minimal" starter.

Demo website.

Features

Gatsby v2 support
Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
Separate components for everything
High configurability:
- User information
- User social profiles
- Copyright information
- More!
Author segment
- Name
- Location
- Description
- Links
- Follow Me button
Posts in Markdown
- Code syntax highlighting
- Embed YouTube videos
- Embed Tweets
Tags
- Separate page for posts under each tag
Categories
- Separate page for posts under each category
Disqus support
- Notifications about new disqus comments
Google Analytics support
NPM scripts for GitHub Pages deployment
Social features
- Twitter tweet button
- Facebook share/share count
- Reddit share/share count
- Google+ share button
- LinkedIn share button
- Telegram share button
SEO
- Sitemap generation
- robots.txt
- General description tags
- Schema.org JSONLD (Google Rich Snippets)
- OpenGraph Tags (Facebook/Google+/Pinterest)
- Twitter Tags (Twitter Cards)
RSS feeds
Loading progress for slow networks
Offline support
Web App Manifest support
/static/ and content folders are available to use with gatsby-image out of the box
Netlify deploy configuration
Development tools
- ESLint for linting
- Prettier for code style
- Remark-Lint for linting Markdown
- write-good for linting English prose
- gh-pages for deploying to GitHub pages
- CodeClimate configuration file and badge

NOTE: Feel free to check out Gatsby Material Starter if you are interested in a more opinionated starter with Material Design in mind.

Getting Started

Install this starter (assuming Gatsby is installed and updated) by running from your CLI:

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # or gatsby develop

Or you can fork the project, make your changes there and merge new features when needed.

Alternatively:

git clone https://github.com/Vagr9K/gatsby-advanced-starter YourProjectName # Clone the project
cd YourProjectname
rm -rf .git # So you can have your own changes stored in VCS.
npm install # or yarn install
npm run develop # or gatsby develop

Configuration

Edit the export object in data/SiteConfig:

module.exports = {
  siteTitle: "Gatsby Advanced Starter", // Site title.
  siteTitleShort: "GA Starter", // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
  siteTitleAlt: "GatsbyJS Advanced Starter", // Alternative site title for SEO.
  siteLogo: "/logos/logo-1024.png", // Logo used for SEO and manifest.
  siteUrl: "https://vagr9k.github.io", // Domain of your website without pathPrefix.
  pathPrefix: "/gatsby-advanced-starter", // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.
  siteDescription: "A GatsbyJS stater with Advanced design in mind.", // Website description used for RSS feeds/meta description tag.
  siteRss: "/rss.xml", // Path to the RSS file.
  siteFBAppID: "1825356251115265", // FB Application ID for using app insights
  googleAnalyticsID: "UA-47311644-5", // GA tracking ID.
  disqusShortname: "https-vagr9k-github-io-gatsby-advanced-starter", // Disqus shortname.
  postDefaultCategoryID: "Tech", // Default category for posts.
  dateFromFormat: "YYYY-MM-DD", // Date format used in the frontmatter.
  dateFormat: "DD/MM/YYYY", // Date format for display.
  userName: "Advanced User", // Username to display in the author segment.
  userTwitter: "", // Optionally renders "Follow Me" in the UserInfo segment.
  userLocation: "North Pole, Earth", // User location to display in the author segment.
  userAvatar: "https://api.adorable.io/avatars/150/test.png", // User avatar to display in the author segment.
  userDescription:
    "Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people.", // User description to display in the author segment.
  // Links to social profiles/projects you want to display in the author segment/navigation bar.
  userLinks: [
    {
      label: "GitHub",
      url: "https://github.com/Vagr9K/gatsby-advanced-starter",
      iconClassName: "fa fa-github"
    },
    {
      label: "Twitter",
      url: "https://twitter.com/Vagr9K",
      iconClassName: "fa fa-twitter"
    },
    {
      label: "Email",
      url: "mailto:vagr9k@gmail.com",
      iconClassName: "fa fa-envelope"
    }
  ],
  copyright: "Copyright © 2019. Advanced User", // Copyright string for the footer of the website and RSS feed.
  themeColor: "#c62828", // Used for setting manifest and progress theme colors.
  backgroundColor: "#e0e0e0" // Used for setting manifest background color.
};

You can also optionally set pathPrefix:

module.exports = {
  // Note: it must *not* have a trailing slash.
  pathPrefix: "/gatsby-advanced-starter" // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.
};