Skip to content
A high performance skeleton starter for GatsbyJS that focuses on SEO/Social features/development environment.
Branch: master
Clone or download
Vagr9K Merge pull request #53 from ollelauribostrom/patch-1
Show a pointer-cursor when hovering over `SocialLink` elements.
Latest commit eecefc4 Feb 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
content Switch to the new content organization scheme. Jul 9, 2018
data Use email for the RSS author tag. Jan 20, 2019
src Update SocialLinks component Feb 1, 2019
static Remove the problematic self link. Jan 20, 2019
.browserslistrc
.codeclimate.yml
.eslintignore
.eslintrc.json
.gitignore Start of migration. Jul 2, 2017
.stylelintrc
LICENSE
README.md
gatsby-config.js Use email for the RSS author tag. Jan 20, 2019
gatsby-node.js Fix post paging of the second post incorrectly pointing to the last p… Jan 20, 2019
jsconfig.json
netlify.toml
package-lock.json Update package-lock.json. Jan 20, 2019
package.json
yarn.lock Update dependencies. Jan 20, 2019

README.md

Code Climate Issue Count Codacy Badge

Logo

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/.
};

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

You can’t perform that action at this time.