Gatsby Advanced Starter

A blog starter skeleton with advanced features for Gatsby.

Why?

This project aims to provide a minimal for building 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

• 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
• 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) by running from your CLI:

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm install # or yarn install
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 = {
 blogPostDir: 'sample-posts', // The name of directory that contains your posts.
 siteTitle: 'Gatsby Advanced Starter', // Site title.
 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 blog starter skeleton with advanced features for for GatsbyJS', // 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
 disqusShortname: 'https-vagr9k-github-io-gatsby-advanced-starter', // Disqus shortname.
 postDefaultCategoryID: 'Tech', // Default category for posts.
 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 © 2017. 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/.
}

WARNING: Make sure to edit static/robots.txt to include your domain for the sitemap!