vagr9k / gatsby-advanced-starter

A high performance skeleton starter for GatsbyJS with an advanced feature set.

Gatsby Advanced Starter

A starter skeleton with advanced features for Gatsby.

This starter aims to provide a minimal base for building advanced GatsbyJS powered websites by using the latest technologies to simplify your process.

It doesn't define any UI limitations in any way and only gives you the basic components for SEO/Links/Infinite Scrolling while creating a comfortable development environment to get started.

Starter supports both TypeScript and JavaScript, comes with Jest and Cypress configurations and allows you to write Unit/Integration/E2E tests out of the box.

You are free to use any UI framework/styling options or you can use the gatsby-theme-amaranth as a starting point, which provides a stylish blog design styled with Styled Components

Demos

With gatsby-theme-advanced

With gatsby-theme-amaranth.

Features

• Gatsby v4 support
• First class TypeScript support (for query data and components exposed by the theme)
• Styled Components used for styling
• Posts in MDX
  • Code syntax highlighting
  • Embed videos
  • Embed iframes
• Infinite Scrolling
• React Query for client side API calls
• Tags
  • Separate page for posts under each tag
• Categories
  • Separate page for posts under each category
• Social features
  • Twitter tweet button
  • Facebook share/share count
  • Reddit share/share count
  • LinkedIn share button
• Author section
• Related posts computation and display based on category/tag match ranking
• Disqus support
• gatsby-plugin-image for optimized image generation
• Inline SVG imports
• High configurability
• Separate components for everything:
  • Gatsby Link utilities
  • SEO
  • Disqus
• PWA features
  • Offline support
  • Web App Manifest support
  • Loading progress for slow networks
• SEO
  • Google gtag.js support
  • Sitemap generation
  • General description tags
  • Google Structured Data
  • OpenGraph Tags (Facebook/Google+/Pinterest)
  • Twitter Tags (Twitter Cards)
• RSS feeds
• Development tools
  • Yarn 3
  • Jest for unit/integration testing
  • Cypress for E2E testing
  • CI via GitHub Actions
  • CD via GitHub Actions
  • ESLint for linting
  • Prettier for code formatting
  • React Hooks Linting
  • Remark-Lint for linting Markdown
  • write-good for linting English prose
  • gh-pages for deploying to GitHub pages
  • Netlify deploy configuration

Getting Started

Install this starter by running the following commands from your CLI:

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

Note that the Gatsby CLI needs to be installed and updated for the gatsby command to work.

Alternatively you can fork the project, make your changes and merge new upstream features when needed:

• Fork this repository on GitHub

• Run the following commands:

  git clone https://github.com/${YourUsername}/${YourForkName} YourForkName # Clone your fork
  cd YourForkName
  yarn install # or npm install
  yarn develop # or gatsby develop

Receiving upstream updates

You have multiple options when it comes to receiving upstream updates:

• Pull and merge upstream changes into your repo
• Change the versions of gatsby-theme-advanced and gatsby-theme-amaranth from local to remote.
• Install a different theme, such as the gatsby-theme-material.

First option allows you to make your own changes to the themes without having to fork and publish them. This is the default approach when you clone/fork the starter repository.

Second option simplifies your CI/CD setup and allows you to receive updates by simply bumping the package version. This also applies if you decide to use a different theme with the starter.

To switch to the remote versions, open package.json and edit the dependency section:

 "gatsby-theme-amaranth": "*",
 // or
  "gatsby-theme-advanced": "*",

into

 "gatsby-theme-amaranth": "3.2", // Or the version you want
 // or
  "gatsby-theme-advanced": "3.2", // Or the version you want

If you want to install a different theme outside of the repo, such as the gatsby-theme-material, run:

yarn add gatsby-theme-material # Or any other Gatsby theme

Then configure the theme in gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-material`, // Or any other theme that you have installed
      options: {
        basePath: `/blog`, // Consult the documentation of the respective theme to figure out the applicable settings
      },
    },
  ],
};

Configuration

Select a starting point

To configure the theme edit your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-advanced`,
      options: {
        basePath: `/blog`,
      },
    },
  ],
};

Here you can switch between gatsby-theme-advanced and gatsby-theme-amaranth or any other Gatsby theme that you intend to use with the starter.

For configuring the themes, consult their respective documentation pages:

• Advanced
• Amaranth

NetlifyCMS

First of all, make sure to edit static/admin/config.yml and add your GitHub/GitLab/NetlifyId credentials:

backend:
  name: github # Refer to https://www.netlifycms.org/docs/authentication-backends/ for auth backend list and instructions
  branch: master # Branch to update
  repo: vagr9k/gatsby-material-starter # Repo for pushing new commits. Make sure to replace with your repo!

You can visit /admin/ after and will be greeted by a login dialog (depending on the auth provider you ave chosen above).

If want to customize Netlify CMS, e.g. registering custom widgets or styling the preview pane, you can do so by editing src/netlifycms/index.js:

import CMS from "netlify-cms-app";

CMS.init({
  config: {
    backend: {
      name: "git-gateway",
    },
  },
});

For NetlifyCMS specific issues visit the official documentation.

Contributing

If you have any issues, questions or suggestions related to the starter then feel free to bring them up!

If you'd like to contribute to the repository and need some pointers, take a look at the Contribution Guide.

Author

Ruben Harutyunyan (@Vagr9K)

gatsby-advanced-starter's Issues

Split post page

The page component post.jsx should be divided into the gatsby specific component and the react-md presentation like a hoc component where the specific gatsby behavior should stay on pages/post.jsx and the variable part (react-md) dependent should be located in components/Post/index.jsx

Create a universal identifier system for posts.

how can separate content on multiple pages

Hey I want to keep 3 jsx pages and want to distribute content .md on those three pages. So for example

If I have my entire blog has 3 separate pages ie. maths, ai, computerscience

I want to sort of want three directories in content folder ie. maths, ai, computerscience and based on content kept on that it be render on those jsx pages. Is this possible?

If yes how?

Frontmatter: Cover img not working with transformer-remark

ERROR #85922 GRAPHQL There was an error in your GraphQL query: Field "cover" must not have a selection since type "String" has no subfields.

Getting this nasty error when trying to pull the cover image with the graphql query
cover { childImageSharp { fluid(maxWidth: 1024) { ...GatsbyImageSharpFluid } } }

Followed all the steps outlined by others that had a similar issue, that was solved with using a relative image setup in the config. But still not compiling. https://theleakycauldronblog.com/blog/problems-with-gatsby-image-and-their-workarounds/

I noticed you don't actually call the images in your demo posts, is this functionality that works in other cases? Any insight is helpful, thank you.

Pagination

This is not exactly an issue, I know. Has anyone achieved to have a pagination with an advanced-starter-blog? I've tried several plugins, I've had a look at #15. But I always stumble over createPage(). Has anyone a working solution?

Add an attribute in the SiteConfig to set the theme-color

Currently it's set by default to red color in the gatsby-config, I think I'd be appropriated to add an attribute for it in the SiteConfig as (IMO) it's more intuitive to look for it into the SiteConfig.

Add a key to the posts in PostListing.jsx

Adding a key to the posts will get rid of the warning in React, ATM I'm using the posts title as a key. might be submitting a PR later today (unless you have already fixed this in the next release?).

Add better support for gatsby-plugin-sharp.

How to integrate this starter with an HTML template?

Until recently, I was running a WordPress blog, but now I've decided to switch over to a static site generator tool. So Gatsby and your starter template looks promising to me and have everything that is needed for my blog.

However, I'm unable to figure out how to integrate this with a standard HTML template (with HTML files for the index, blog, etc., and CSS and JS files). Again, I'm not looking to customize the starter template but only to integrate an HTML template with it so that I can get started blogging right away.

Can you please give me some pointers as to where to start or reference documents that I can refer to to understand better how to integrate some essential CSS/HTML files into this template?

symlink on build

I've just built a site in the first time for a while and was surprised to find a symlink in the public folder: gatsby-advanced-starter > . As you can imagine this can be problematic for tools like rsync (uploaded ~.5GB to AWS before I caught on). Any ideas how this got introduced? I don't see any references to that directory/link in gatsby-config.js or gatsby-node.js.

  System:
    OS: macOS High Sierra 10.13.6
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  npmPackages:
    gatsby: ^2.0.82 => 2.0.82 
    gatsby-image: ^2.0.15 => 2.0.15 
    gatsby-plugin-catch-links: ^2.0.5 => 2.0.5 
    gatsby-plugin-feed: ^2.0.8 => 2.0.8 
    gatsby-plugin-google-analytics: ^2.0.6 => 2.0.6 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5 
    gatsby-plugin-nprogress: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^2.0.8 => 2.0.8 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.7 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.1 
    gatsby-plugin-twitter: ^2.0.6 => 2.0.6 
    gatsby-plugin-typography: ^2.2.0 => 2.2.0 
    gatsby-remark-autolink-headers: ^2.0.8 => 2.0.8 
    gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.5 
    gatsby-remark-images: ^2.0.4 => 2.0.4 
    gatsby-remark-prismjs: ^3.0.2 => 3.0.2 
    gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.5 
    gatsby-source-filesystem: ^2.0.5 => 2.0.5 
    gatsby-transformer-remark: ^2.1.8 => 2.1.8 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.4 

prism syntax highlighter not working with theme-ui...

caveat: Not sure if this is really a true issue or if I am doing something incorrect!

prism syntax highlighter not working with theme-ui

I am using gatsby-plugin-theme-ui to manage the styling on my gatsby site and all works fine with the exception of the code styling while using prims. My repo.

Context: I am using the Gatsby advanced starter and giving it a little bit of styling using theme-ui. I have manage to work with and implement the following files (under gatsby-plugin-theme-ui):

• colors.js;
• index.js;
• styles.js;

I am def getting the remaining files wrong:

• component.js
• prism.js

Anyone could help me out with this one?

A couple of other questions that I am still not quite understanding:

• Why do we need a component.js file?
• Why by passing prism.js configurations into styles.js is not working (see code below)?

export default {
  root: {
    fontFamily: `body`,
  },
  pre: {
    variant: `prism`,
    fontFamily: `monospace`,
    tabSize: 4,
    hyphens: `none`,
    marginBottom: 3,
    color: `white`,
    bg: `prism.background`,
    overflow: `auto`,
    borderRadius: 5,
    p: 3,
    ".variable": {
      color: `green`,
    },
    ".number": {
      color: `pink`,
    },
    ".builtin, .char, .constant, .function": {
      color: `pink`,
    },
    ".punctuation, .selector, .doctype": {
      color: `pink`,
    },
  },
  code: {
    fontFamily: `monospace`,
    fontSize: `15px`,
  },
  inlineCode: {
    borderRadius: `0.3em`,
    bg: `muted`,
    p: `0.3em`,
  },
  // from typography overrideThemeStyles
  h1: {
    fontSize: 32,
    fontFamily: 'heading',
    fontWeight: 'heading',
    color: 'primary',
    mt: 4,
    mb: 4,
  },
  a: {
    color: `primary`,
  },
  p: {
    fontWeight:`body`,
    lineHeight: `body`,
    letterSpacing: `body`,
    code: {
      fontSize: `inherit`,
    },
  },
  li: {
    code: {
      fontSize: `inherit`,
    },
  },
  blockquote: {
    color: `inherit`,
    borderLeft: `solid 5px`,
    paddingLeft: `10px`,
    borderColor: `primary`,
    opacity: 0.8,
    fontStyle: `italic`,

  },
}

Any idea why this is happening?
Thank you for the help.

Unable to run develop

Hi there,
I tried this starter repo by using two of the methods in the README (using gatsby new and git clone), and both of them results in an error while running develop.

$ npm run develop                                                                              [1:12:36]

> [email protected] develop /home/adalberht/Code/YourProjectName
> gatsby develop

success open and validate gatsby-config — 0.011 s
success load plugins — 0.298 s
success onPreInit — 0.372 s
success delete html and css files from previous builds — 0.082 s
success initialize cache — 0.009 s
success copy gatsby files — 0.010 s
success onPreBootstrap — 0.001 s
success source and transform nodes — 0.138 s
success building schema — 0.320 s
success createPages — 0.064 s
success createPagesStatefully — 0.024 s
success onPreExtractQueries — 0.001 s
success update schema — 0.164 s
success extract queries from components — 0.099 s
success run graphql queries — 0.475 s — 30/30 63.40 queries/second
success write out page data — 0.004 s
success write out redirect data — 0.003 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 4.154 s

here ./.cache/default-html.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/inheritsLoose' in '/home/adalberht/Code/YourProjectName/.cache'
resolve '@babel/runtime/helpers/inheritsLoose' in '/home/adalberht/Code/YourProjectName/.cache'
  Parsed request is a module
  using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./.cache)
    resolve as module
      looking for modules in /home/adalberht/Code/YourProjectName/src/node_modules
        using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./src/node_modules)
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./src/node_modules/@babel/runtime/helpers/inheritsLoose)
            no extension
              /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose doesn't exist
            .js
              /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose.js doesn't exist
            .jsx
              /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose.jsx doesn't exist
            as directory
              /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose doesn't exist
      /home/adalberht/Code/YourProjectName/.cache/node_modules doesn't exist or is not a directory
      /home/adalberht/Code/node_modules doesn't exist or is not a directory
      /home/adalberht/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/adalberht/Code/YourProjectName/node_modules
        using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./node_modules)
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./node_modules/@babel/runtime/helpers/inheritsLoose)
            no extension
              /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose doesn't exist
            .js
              /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.js doesn't exist
            .jsx
              /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.jsx doesn't exist
            as directory
              /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose doesn't exist
[/home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose]
[/home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose.js]
[/home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose.jsx]
[/home/adalberht/Code/YourProjectName/.cache/node_modules]
[/home/adalberht/Code/node_modules]
[/home/adalberht/node_modules]
[/home/node_modules]
[/node_modules]
[/home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose]
[/home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.js]
[/home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.jsx]
 @ ./.cache/default-html.js 1:0-66 8:2-16
 @ ./.cache/develop-static-entry.js
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: ./.cache/default-html.js
  Module not found: Error: Can't resolve '@babel/runtime/helpers/inheritsLoose' in '/home/adalberht/Code/  YourProjectName/.cache'
  resolve '@babel/runtime/helpers/inheritsLoose' in '/home/adalberht/Code/YourProjectName/.cache'
    Parsed request is a module
    using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./.cache)
      resolve as module
        looking for modules in /home/adalberht/Code/YourProjectName/src/node_modules
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./src  /node_modules)
            using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./s  rc/node_modules/@babel/runtime/helpers/inheritsLoose)
              no extension
                /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoos  e doesn't exist
              .js
                /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoos  e.js doesn't exist
              .jsx
                /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoos  e.jsx doesn't exist
              as directory
                /home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoos  e doesn't exist
        /home/adalberht/Code/YourProjectName/.cache/node_modules doesn't exist or is not a directory
        /home/adalberht/Code/node_modules doesn't exist or is not a directory
        /home/adalberht/node_modules doesn't exist or is not a directory
        /home/node_modules doesn't exist or is not a directory
        /node_modules doesn't exist or is not a directory
        looking for modules in /home/adalberht/Code/YourProjectName/node_modules
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./nod  e_modules)
            using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./n  ode_modules/@babel/runtime/helpers/inheritsLoose)
              no extension
                /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose do  esn't exist
              .js
                /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.js   doesn't exist
              .jsx
                /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.js  x doesn't exist
              as directory
                /home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose do  esn't exist
  [/home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose]
  [/home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose.js]
  [/home/adalberht/Code/YourProjectName/src/node_modules/@babel/runtime/helpers/inheritsLoose.jsx]
  [/home/adalberht/Code/YourProjectName/.cache/node_modules]
  [/home/adalberht/Code/node_modules]
  [/home/adalberht/node_modules]
  [/home/node_modules]
  [/node_modules]
  [/home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose]
  [/home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.js]
  [/home/adalberht/Code/YourProjectName/node_modules/@babel/runtime/helpers/inheritsLoose.jsx]
   @ ./.cache/default-html.js 1:0-66 8:2-16
   @ ./.cache/develop-static-entry.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/adalberht/.npm/_logs/2018-07-22T18_12_45_658Z-debug.log
FAIL: 1

After googling for a little bit, I think the quickfix is to run:
npm add @babel/runtime

But after doing this, another error rose.

here ./.cache/gatsby-browser-entry.js
Module not found: Error: Can't resolve 'gatsby-link' in '/home/adalberht/Code/YourProjectName/.cache'
resolve 'gatsby-link' in '/home/adalberht/Code/YourProjectName/.cache'
  Parsed request is a module
  using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./.cache)
    resolve as module
      looking for modules in /home/adalberht/Code/YourProjectName/src/node_modules
        using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./src/node_modules)
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./src/node_modules/gatsby-link)
            no extension
              /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link doesn't exist
            .js
              /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.js doesn't exist
            .jsx
              /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.jsx doesn't exist
            as directory
              /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link doesn't exist
      /home/adalberht/Code/YourProjectName/.cache/node_modules doesn't exist or is not a directory
      /home/adalberht/Code/node_modules doesn't exist or is not a directory
      /home/adalberht/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/adalberht/Code/YourProjectName/node_modules
        using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./node_modules)
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./node_modules/gatsby-link)
            no extension
              /home/adalberht/Code/YourProjectName/node_modules/gatsby-link doesn't exist
            .js
              /home/adalberht/Code/YourProjectName/node_modules/gatsby-link.js doesn't exist
            .jsx
              /home/adalberht/Code/YourProjectName/node_modules/gatsby-link.jsx doesn't exist
            as directory
              /home/adalberht/Code/YourProjectName/node_modules/gatsby-link doesn't exist
[/home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link]
[/home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.js]
[/home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.jsx]
[/home/adalberht/Code/YourProjectName/.cache/node_modules]
[/home/adalberht/Code/node_modules]
[/home/adalberht/node_modules]
[/home/node_modules]
[/node_modules]
[/home/adalberht/Code/YourProjectName/node_modules/gatsby-link]
[/home/adalberht/Code/YourProjectName/node_modules/gatsby-link.js]
[/home/adalberht/Code/YourProjectName/node_modules/gatsby-link.jsx]
 @ ./.cache/gatsby-browser-entry.js 3:0-74 28:0-29:48 28:0-29:48 28:0-29:48 28:0-29:48 28:0-29:48
 @ ./node_modules/gatsby-plugin-manifest/gatsby-ssr.js
 @ ./.cache/api-runner-ssr.js
 @ ./.cache/develop-static-entry.js
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: ./.cache/gatsby-browser-entry.js
  Module not found: Error: Can't resolve 'gatsby-link' in '/home/adalberht/Code/YourProjectName/.cache'
  resolve 'gatsby-link' in '/home/adalberht/Code/YourProjectName/.cache'
    Parsed request is a module
    using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./.cache)
      resolve as module
        looking for modules in /home/adalberht/Code/YourProjectName/src/node_modules
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./src  /node_modules)
            using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./s  rc/node_modules/gatsby-link)
              no extension
                /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link doesn't exist
              .js
                /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.js doesn't exist
              .jsx
                /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.jsx doesn't exist
              as directory
                /home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link doesn't exist
        /home/adalberht/Code/YourProjectName/.cache/node_modules doesn't exist or is not a directory
        /home/adalberht/Code/node_modules doesn't exist or is not a directory
        /home/adalberht/node_modules doesn't exist or is not a directory
        /home/node_modules doesn't exist or is not a directory
        /node_modules doesn't exist or is not a directory
        looking for modules in /home/adalberht/Code/YourProjectName/node_modules
          using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./nod  e_modules)
            using description file: /home/adalberht/Code/YourProjectName/package.json (relative path: ./n  ode_modules/gatsby-link)
              no extension
                /home/adalberht/Code/YourProjectName/node_modules/gatsby-link doesn't exist
              .js
                /home/adalberht/Code/YourProjectName/node_modules/gatsby-link.js doesn't exist
              .jsx
                /home/adalberht/Code/YourProjectName/node_modules/gatsby-link.jsx doesn't exist
              as directory
                /home/adalberht/Code/YourProjectName/node_modules/gatsby-link doesn't exist
  [/home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link]
  [/home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.js]
  [/home/adalberht/Code/YourProjectName/src/node_modules/gatsby-link.jsx]
  [/home/adalberht/Code/YourProjectName/.cache/node_modules]
  [/home/adalberht/Code/node_modules]
  [/home/adalberht/node_modules]
  [/home/node_modules]
  [/node_modules]
  [/home/adalberht/Code/YourProjectName/node_modules/gatsby-link]
  [/home/adalberht/Code/YourProjectName/node_modules/gatsby-link.js]
  [/home/adalberht/Code/YourProjectName/node_modules/gatsby-link.jsx]
   @ ./.cache/gatsby-browser-entry.js 3:0-74 28:0-29:48 28:0-29:48 28:0-29:48 28:0-29:48 28:0-29:48
   @ ./node_modules/gatsby-plugin-manifest/gatsby-ssr.js
   @ ./.cache/api-runner-ssr.js
   @ ./.cache/develop-static-entry.js

FAIL: 1

Quick fix is to add gatsby-link, after adding gatsby-link,
Another problem rose:

$ gatsby develop                                                                               [1:26:48]
success open and validate gatsby-config — 0.010 s
success load plugins — 0.281 s
success onPreInit — 0.277 s
success delete html and css files from previous builds — 0.015 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.010 s
success copy gatsby files — 0.013 s
success onPreBootstrap — 0.001 s
success source and transform nodes — 0.137 s
success building schema — 0.275 s
success createPages — 0.067 s
success createPagesStatefully — 0.021 s
success onPreExtractQueries — 0.001 s
success update schema — 0.164 s
success extract queries from components — 0.096 s
success run graphql queries — 0.454 s — 30/30 66.37 queries/second
success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 3.702 s

 ERROR  Failed to compile with 1 errors                                                          01:27:00

This dependency was not found:

* gatsby-react-router-scroll in ./.cache/root.js

To install it, you can run: npm install --save gatsby-react-router-scroll
✖ ｢wdm｣: 
ERROR in ./.cache/root.js
Module not found: Error: Can't resolve 'gatsby-react-router-scroll' in '/home/adalberht/Code/YourProjectName/.cache'
 @ ./.cache/root.js 13:0-59 141:19-32
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

The fix is to add gatsby-react-router-scroll.

TL;DR:

• Unable to run develop
• Quick fix (which I don't know is the correct one or not) is to do the following:

npm install --save @babel/runtime gatsby-link gatsby-react-router-scroll

What do you think?
Should I send a pull request to update the package.json?

Awesome work btw. Thanks!

.include breaks navigation in Internet Explorer

Hi,

great starter for Gatsby! I found an issue with the routing caused by the getLocalTitle function in the layouts index. It looks like Internet Explorer doesn't accept .include method, so I changed the instances of .include to .indexOf in the layout to make navigation in IE work.

getLocalTitle() {
    function capitalize(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
    const pathPrefix = config.pathPrefix ? config.pathPrefix : "/";
    const currentPath = this.props.location.pathname
      .replace(pathPrefix, "")
      .replace("/", "");
    let title = "";
    if (currentPath === "") {
      title = "Home";
    } else if (currentPath.indexOf("tags/")) {
      const tag = currentPath
        .replace("tags/", "")
        .replace("/", "")
        .replace("-", " ");
      title = `Tagged in ${capitalize(tag)}`;
    }

Netlify.toml possibly causing building issue for Netlify.

Thanks for your great starter! I am learning lots of things through your starter.

I don't know what's the exact problem but it seems net the build command from netlify.toml causes problem when deploying to Netlify. The toml file defines the build command :yarn run build. The following is the resulting log with original netlify.toml file present in the folder.

5:31:53 PM: Build ready to start
5:31:59 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
5:31:59 PM: build-image tag: v3.3.2
5:31:59 PM: buildbot version: a2bab682ae0761baa4d123ebd00c57be933655dc
5:31:59 PM: Fetching cached dependencies
5:31:59 PM: Starting to download cache of 255.0KB
5:31:59 PM: Finished downloading cache in 85.695941ms
5:31:59 PM: Starting to extract cache
5:31:59 PM: Failed to fetch cache, continuing with build
5:31:59 PM: Starting to prepare the repo for build
5:32:00 PM: No cached dependencies found. Cloning fresh repo
5:32:00 PM: git clone https://github.com/yoonoh930/gatsby-blog
5:32:00 PM: Preparing Git Reference refs/heads/master
5:32:01 PM: Found netlify.toml. Overriding site configuration
5:32:01 PM: Different build command detected, going to use the one specified in the toml file: 'yarn run build' versus 'gatsby build' in the site
5:32:01 PM: Starting build script
5:32:01 PM: Installing dependencies
5:32:03 PM: Downloading and installing node v10.17.0...
5:32:03 PM: Downloading https://nodejs.org/dist/v10.17.0/node-v10.17.0-linux-x64.tar.xz...
5:32:03 PM: 
########################################################################
5:32:03 PM: 100.0%
5:32:03 PM: Computing checksum with sha256sum
5:32:03 PM: Checksums matched!
5:32:06 PM: Now using node v10.17.0 (npm v6.11.3)
5:32:06 PM: Attempting ruby version 2.6.2, read from environment
5:32:08 PM: Using ruby version 2.6.2
5:32:08 PM: Using PHP version 5.6
5:32:08 PM: Started restoring cached node modules
5:32:08 PM: Finished restoring cached node modules
5:32:08 PM: Installing NPM modules using NPM version 6.11.3
5:32:49 PM: > [email protected] install /opt/build/repo/node_modules/sharp
5:32:49 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
5:32:50 PM: info
5:32:50 PM: sharp
5:32:50 PM:  Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.8.1/libvips-8.8.1-linux-x64.tar.gz
5:32:53 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js
5:32:53 PM: > node postinstall || echo "ignore"
5:32:53 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
5:32:53 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
5:32:53 PM: > https://opencollective.com/core-js 
5:32:53 PM: > https://www.patreon.com/zloirock 
5:32:53 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
5:32:53 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby-telemetry
5:32:53 PM: > node src/postinstall.js
5:32:53 PM: > [email protected] postinstall /opt/build/repo/node_modules/cwebp-bin
5:32:53 PM: > node lib/install.js
5:32:54 PM:   ✔ cwebp pre-build test passed successfully
5:32:54 PM: > [email protected] postinstall /opt/build/repo/node_modules/mozjpeg
5:32:54 PM: > node lib/install.js
5:32:54 PM:   ✔ mozjpeg pre-build test passed successfully
5:32:54 PM: > [email protected] postinstall /opt/build/repo/node_modules/pngquant-bin
5:32:54 PM: > node lib/install.js
5:32:55 PM:   ✔ pngquant pre-build test passed successfully
5:32:55 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli
5:32:55 PM: > node scripts/postinstall.js
5:32:55 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby
5:32:55 PM: > node scripts/postinstall.js
5:32:59 PM: npm WARN [email protected] No repository field.
5:32:59 PM: npm WARN
5:32:59 PM:  optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
5:32:59 PM: npm
5:32:59 PM: WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:32:59 PM: npm WARN
5:32:59 PM: optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents):
5:32:59 PM: npm WARN
5:32:59 PM: notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:32:59 PM: added 2726 packages from 1141 contributors and audited 33100 packages in 49.682s
5:32:59 PM: found 0 vulnerabilities
5:32:59 PM: NPM modules installed
5:32:59 PM: Started restoring cached go cache
5:32:59 PM: Finished restoring cached go cache
5:32:59 PM: unset GOOS;
5:32:59 PM: unset GOARCH;
5:32:59 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
5:32:59 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
5:32:59 PM: go version >&2;
5:32:59 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
5:32:59 PM: go version go1.12 linux/amd64
5:32:59 PM: Installing missing commands
5:32:59 PM: Verify run directory
5:32:59 PM: Executing user command: yarn run build
5:32:59 PM: /usr/local/bin/build: line 60: yarn: command not found
5:32:59 PM: Skipping functions preparation step: no functions directory set
5:32:59 PM: Caching artifacts
5:32:59 PM: Started saving node modules
5:32:59 PM: Finished saving node modules
5:32:59 PM: Started saving pip cache
5:32:59 PM: Finished saving pip cache
5:32:59 PM: Started saving emacs cask dependencies
5:32:59 PM: Finished saving emacs cask dependencies
5:32:59 PM: Started saving maven dependencies
5:32:59 PM: Finished saving maven dependencies
5:32:59 PM: Started saving boot dependencies
5:32:59 PM: Finished saving boot dependencies
5:32:59 PM: Started saving go dependencies
5:33:00 PM: Finished saving go dependencies
5:33:02 PM: Error running command: Build script returned non-zero exit code: 127
5:33:02 PM: Failing build: Failed to build site
5:33:02 PM: failed during stage 'building site': Build script returned non-zero exit code: 127
5:33:02 PM: Finished processing build request in 1m3.396835507s

After deleting the problem with the build command configured on the Netlify site, gatsby build, the build was successful.

Problem with go back button of browser

Step 1: Open home page
Step 2: Click 1 article to view detail
Step 3: Click "Back" button of browser

It don't go back home, just stay in detail view

Migrate from gatsby-plugin-google-analytics to gatsby-plugin-gtag

Google recommends using gtag.js instead of analytics.js. They also have a migration guide in place.

Do you think it is a good idea to update this starter to use gatsby-plugin-gtag instead of gatsby-plugin-google-analytics?

I'll be happy to help out if you think this is a good idea!

[Suggestion] Add Storybook for development

As title says, i think storybook could be great if added to your starter.

Refactor SEO Component

When is needed the creation of new pages is almost unpossible to handle the seo props correctly, at this moment this depends only on the 2 given pages, about and index. should be possible to add new elements to SEO

Giving a custom slug doesn't work. Maybe you need to put else there.

gatsby-advanced-starter/gatsby-node.js

Line 17 in e8ed51e

if (

Fix SEO Post Schema

Can you please check BlogPosting Schema. The author is missing, published date and updated date is also missing.

How to disable bundling in developement mode

Hi

How do I disable bundling in development mode? Currently, all the code is bundled and I'm facing hard to debug.

$ gatsby serve works but $ gatsby build fails.

I'm trying to set up a static documentation site for one of my projects. Here's where I'm failing:

> gatsby build

success open and validate gatsby-configs - 0.061s
success load plugins - 1.688s
success onPreInit - 0.010s
success delete html and css files from previous builds - 0.017s
success initialize cache - 0.007s
success copy gatsby files - 0.091s
warn gatsby-plugin-feed was initialized in gatsby-config.js without a title in a feed.
This means that the plugin will use the default feed title, which may not match your use case.
This behavior will be removed in the next major release of gatsby-plugin-feed.
For more info, check out: https://gatsby.dev/adding-rss-feed
success onPreBootstrap - 0.011s
success source and transform nodes - 0.066s
success building schema - 0.330s
success createPages - 0.048s
success createPagesStatefully - 0.060s
success onPreExtractQueries - 0.002s
success update schema - 0.023s
success extract queries from components - 0.195s
warn The GraphQL query in the non-page component "/Users/sa/Projects/ror/bubblin.io/sites/toucaan.gatsby.site/src/templates/tag.jsx" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — http://graphql.org/learn/queries/#fragments
success write out requires - 0.005s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.003s
success onPostBootstrap - 0.009s
⠀
info bootstrap finished - 8.171 s
⠀

 ERROR 

Cannot copy '.' to a subdirectory of itself, '.'.



  Error: Cannot copy '.' to a subdirectory of itself, '.'.
  
  - copy-sync.js:146 onLink
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:146:13
  
  - copy-sync.js:49 getStats
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:49:45
  
  - copy-sync.js:38 startCopy
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:38:10
  
  - copy-sync.js:120 copyDirItem
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:120:10
  
  - copy-sync.js:113 fs.readdirSync.forEach.item
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:113:39
  
  - Array.forEach
  
  - copy-sync.js:113 copyDir
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:113:23
  
  - copy-sync.js:103 onDir
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:103:10
  
  - copy-sync.js:45 getStats
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:45:37
  
  - copy-sync.js:38 startCopy
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:38:10
  
  - copy-sync.js:33 handleFilterAndCopy
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:33:10
  
  - copy-sync.js:26 Object.copySync
    [toucaan.gatsby.site]/[fs-extra]/lib/copy-sync/copy-sync.js:26:10
  
  - get-static-dir.js:35 themesSet.map.filter.map.folder
    [toucaan.gatsby.site]/[gatsby]/dist/utils/get-static-dir.js:35:21
  
  - Array.map
  
  - get-static-dir.js:35 exports.copyStaticDirs
    [toucaan.gatsby.site]/[gatsby]/dist/utils/get-static-dir.js:35:4
  
  - build.js:91 build
    [toucaan.gatsby.site]/[gatsby]/dist/commands/build.js:91:3
  

not finished run queries - 0.074s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sa/.npm/_logs/2019-10-17T20_29_39_588Z-debug.log

Cannot copy '.' to a subdirectory of itself, '.'.

Mm, where on code do I go for this?

Image sharp not generated on frontamatter cover image

I'm trying to modify the post template adding the cover image.
Based on the gatsby-config.js I should find a childImageSharp field in the frontmatter of the post but I just find the cover field.
Am I missing something?

Reduce Layout cyclomatic complex

the method getLocalTitle from layout should be refactored
it's cyclomatic complex is high because it have an if which could be replaced by a new prop sent from each part where it's used and remove this required conditional that was required for gatsby v1
this applies only for v2 branch

Mysterious dependencies

This project looks like a great starting point for gatsby sites. Though I do have a few questions:

1. Why is ReactDOM listed on package.json? I do not see it called anywhere on this project or the casper project.
2. It looks like React 16 is used. Is there a specific reason for this and why is gatsby-plugin-next not used?
3. stylefmt is installed but doesn't stylelint package do everything that this plugin handles already?

Also, what is the purpose of lodash? I see a lot of gatsby projects but I'm not sure what it does with respect to gatsby (just now discovering gatsbyjs)

Thank you.

Warning: Unknown prop `innerRef` on <a> tag

I see a warning in the console

Warning: Unknown prop `innerRef` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in a (created by Link)
    in Link (created by GatsbyLink)
    in GatsbyLink (at PostListing.jsx:26)
    in div (at PostListing.jsx:23)
    in PostListing (at index.jsx:14)
    in div (at index.jsx:11)
    in Index (created by ComponentRenderer)
    in ComponentRenderer (created by Route)
    in Route (created by MainLayout)
    in div (at index.jsx:44)
    in MainLayout (at index.js:6)
    in _default (created by ComponentRenderer)
    in ComponentRenderer (created by Route)
    in Route (created by withRouter(ComponentRenderer))
    in withRouter(ComponentRenderer) (created by Root)
    in ScrollContext (created by Route)
    in Route (created by withRouter(ScrollContext))
    in withRouter(ScrollContext) (created by Root)
    in Router (at root.js:143)
    in DefaultRouter (created by Root)
    in Root (at app.js:45)
    in AppContainer (at app.js:44)

Happens with a brand new install

bojan@linux:~/www/dental$ gatsby new test https://github.com/Vagr9K/gatsby-advanced-starter
info Creating new site from git: [email protected]:Vagr9K/gatsby-advanced-starter.git
Cloning into 'test'...
remote: Counting objects: 1759, done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 1759 (delta 9), reused 16 (delta 8), pack-reused 1733
Receiving objects: 100% (1759/1759), 2.82 MiB | 426.00 KiB/s, done.
Resolving deltas: 100% (1021/1021), done.
Checking connectivity... done.
success Created starter directory layout
info Installing packages...
yarn install v1.3.2
warning ../../../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.10.0".
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0".
warning "gatsby > [email protected]" has unmet peer dependency "caniuse-db@^1.0.30000652".
[4/4] Building fresh packages...
Done in 73.45s.
bojan@linux:~/www/dental$ cd test
bojan@linux:~/www/dental/test$ gatsby develop
success delete html files from previous builds — 0.010 s
success open and validate gatsby-config.js — 0.007 s
success copy gatsby files — 0.027 s
success onPreBootstrap — 0.010 s
success source and transform nodes — 0.139 s
success building schema — 0.497 s
success createLayouts — 0.012 s
success createPages — 0.070 s
success createPagesStatefully — 0.010 s
success onPreExtractQueries — 0.001 s
success update schema — 0.183 s
success extract queries from components — 0.612 s
success run graphql queries — 1.460 s
success write out page data — 0.003 s
success write out redirect data — 0.000 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 6.062 s

 DONE  Compiled successfully in 5782ms                                                                                                                            01:43:47


You can now view gatsby-starter-advanced in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

README typo

There are one or more words missing from the sentence:

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

Remove gatsby-remark-copy-linked-files

I ran into this issue recently. Seems like gatsby-remark-copy-linked-files should only be used when sourcing files from gatsby-source-filesystem

Two suggestions

Thanks for the convenience this starter brings.

Well, let's make it simple.

Firstly, this starter comes with an issue of @hot-reloader warning(check the browser console after rendered), I fixed it following this thread.

React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

Secondly, when a markdown file has a front matter cover field set with an url string, like below, the html head meta content goes wrong, it is caused by this line in src/components/SEO/SEO.jsx, I fixed it by checking if the cover field was an url string first:

---
#markdown front matter
title: "The Fallen Time"
cover: "https://unsplash.it/400/300/?random?TheFallenTime"
---

//the way to fix it
if (!image.match(`(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]`)) 
image = urljoin(config.siteUrl, config.pathPrefix, image);

JSconfig.json: ../agent-base/dist/src/index not found

Even though build is compiled and develop mode running just fine! Most major code IDE have a warning on JSconfig.json file about the above error. Logs:

{
	"resource": "/home/guilloutran/guilloutran.com/jsconfig.json",
	"owner": "typescript",
	"severity": 8,
	"message": "File '/home/guilloutran/guilloutran.com/node_modules/agent-base/dist/src/index' not found.",
	"source": "ts",
	"startLineNumber": 1,
	"startColumn": 1,
	"endLineNumber": 1,
	"endColumn": 2
}

I have tried to play around with the agent-base dependencies but it doesn't seem to work! Please advice

Upgrade dependency of React

So that we can use hooks :]

Unable to determine what sets the landing/index page

I have successfully created a basic, non-blog site with a few static pages with an earlier version of this starter, but in the current version, I cannot figure out what sets the default landing page (when the user navigates to /). I can see it's being set to the post-listings page, and I can locate the component for this page, but I only see this component referenced in gatsby-node.js in a chunk of code commented simply // Paging.

Could you please add an explanation of this mechanism to the README?

Support for sites without a `pathPrefix`

The boilerplate code doesn't allow an empty pathPrefix in data/siteConfig.js but allows a / which will be regarded as "" (empty) somewhere and, there are also some code which will convert "" (empty) pathPrefix to a /.
These incompatibilities lead to URLs like https://org.github.io//test-url (note the double slash) in SEO and social share links.

I failed to load Disqus with correct short name.

I failed to load Disqus with correct short name.

Here is Github repo.
Project files are in its master branch, built files are in its gh-pages branch.

My Disqus short name is 'hare-form.'
I put it in src/SiteConfig.js but always get an error message "We were unable to load Disqus."

Could you please help me?

Disqus comments disappearing after reload.

Post Installation Error : unexpected token

Something goes wrong with my installation, npm run serve is locked into 404, and gatsby develop logs :
gatsby develop
success open and validate gatsby-config.js — 0.012 s
success copy gatsby files — 0.117 s
⠄ source and transform nodes/Users/MK/Documents/Dev/test/gatsby-node.js:8
const { createNodeField } = boundActionCreators;
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at runAPI (/Users/MK/Documents/Dev/test/node_modules/gatsby/dist/utils/api-runner-node.js:84:20)
at /Users/MK/Documents/Dev/test/node_modules/gatsby/dist/utils/api-runner-node.js:179:33
at /Users/MK/Documents/Dev/test/node_modules/async/internal/map.js:27:9
at replenish (/Users/MK/Documents/Dev/test/node_modules/async/internal/eachOfLimit.js:64:17)
at iterateeCallback (/Users/MK/Documents/Dev/test/node_modules/async/internal/eachOfLimit.js:49:17)
at /Users/MK/Documents/Dev/test/node_modules/async/internal/onlyOnce.js:12:16
at /Users/MK/Documents/Dev/test/node_modules/async/internal/map.js:29:13
at tryCatcher (/Users/MK/Documents/Dev/test/node_modules/bluebird/js/release/util.js:16:23)
at Promise.successAdapter (/Users/MK/Documents/Dev/test/node_modules/bluebird/js/release/nodeify.js:23:30)

help plz?

warn Plugin `gatsby-source-filesystem` tried to define the GraphQL type `File`

I have just cloned gatsby-advanced-starter and on running gatsby develop, I get the above warning. The site displays ok, though. I tried googling but that brought up nothing.

Error: Cannot read property 'pathname' of undefined

• Gatsby v1.8.11
• Gatgsby-advanced-starter v1.1.0

When I try to build the last version of gatsby advanced starter with the last version of gatsby I get the following error during the HTML static pages generation:

Error: 
    Error: Cannot read property 'pathname' of undefined
    
    - render-page.js:31208 PostTemplate.render
      render-page.js:31208:37
    
    - render-page.js:18952 ReactCompositeComponentWrapp  er._renderValidatedComponentWithoutOwnerOrContext
      render-page.js:18952:31
    
    - render-page.js:18975 ReactCompositeComponentWrapp  er._renderValidatedComponent
      render-page.js:18975:33
    
    - render-page.js:18515 ReactCompositeComponentWrapp  er.performInitialMount
      render-page.js:18515:31
    
    - render-page.js:18411 ReactCompositeComponentWrapp  er.mountComponent
      render-page.js:18411:22
    
    - render-page.js:11323 Object.mountComponent
      render-page.js:11323:36
    
    - render-page.js:17552 ReactDOMComponent.mountChild  ren
      render-page.js:17552:45
    
    - render-page.js:14562 ReactDOMComponent._createCon  tentMarkup
      render-page.js:14562:33
    
    - render-page.js:14429 ReactDOMComponent.mountCompo  nent
      render-page.js:14429:30
    
    - render-page.js:11323 Object.mountComponent
      render-page.js:11323:36
error Command failed with exit code 1.

I tried to install a new version from scratch but it's the same error during the build.

Having trouble using Disqus

I am trying to activate Disqus comments on my blog but it's not working.

So far I've put the disqusShortName on siteConfig. I've put my domain on trusted site on Disqus site. But still it's not showing on my blog.

The blog address is https://yoons.blog and the source code is here: https://github.com/yoonoh930/gatsby-blog

Footer component possible bug

ATM the footer component is importing config from data/SiteConfig. However this is not being used as the component is intended to work with a expected config passed in as props.

I'd recommend one of this:

• not importing config in the component (as it's not being used)
• use the imported config and drop the prop
• check wether a prop was given and fallback to the imported config

If you would like me to submit a PR fixing this, just let me know which option you feel should be implemented

Vimeo API Returns Incomplete Results when `searchQuery` is included, but unspecified

The current implementation of the plugin uses the following query URL:

const _url = url || `https://api.vimeo.com/users/${userID}/videos?per_page=100&query=${_searchQuery}`;

This has the searchQuery always being included in the API query, but if it was unspecified in the plugin settings, it will be an empty string to the Vimeo API. This causes the Vimeo API to return incomplete results.

Will submit a PR that fixes this issue.

Question: what is the correlation between frontmatter.category and category_id

We can set the post's category by frontmatter, but can not set the category_id used in Disqus.
What is the correlation between frontmatter.category and category_id?

Babel in project

Hello, why don't you use babels in project?
I mean the .babelrc file or something like that.

Instructions not working (gatsby serve not working)

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 run serve

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
npm run serve

---

Checking the package.json I see the npm run serve command runs gatsby serve.

Taken from the Gatsby documentation:
gatsby develop — Gatsby will start a hot-reloading development environment accessible at localhost:8000
gatsby build — Gatsby will perform an optimized production build for your site generating static HTML and per-route JavaScript code bundles.
gatsby serve — Gatsby starts a local HTML server for testing your built site.

Using gatsby serve "serves" the site, but it doesn't show anything (nor the index, nor the about page). Index shows empty page, about says 404. To me seems like the queries are not working when serving instead of hot reloading. On the other hand, when running gatsby develop I can see the default gatsby-advanced-starter page without any problems.

---

Can I make a pull request for the small fixes at the README.md so that other users at least have a working copy when following the instrucitons? Any other ideas how to debug and fix this?

Fixed getting started instructions (working example):

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

SEO and gatsby-image not building

The SEO-component works great for all post meta-info except images.

I use gatsby-image to fetch different sizes for the hero-images of each post like so:

thumbnail {
          childImageSharp {
            sizes(maxWidth: 1920) {
              ...GatsbyImageSharpSizes
            }
          }
        }

When using the SEO-component, I'm trying to access the src of the hero images (named "thumbnail" in the post frontmatter) like this:

if (postSEO) {
      const postMeta = postNode.frontmatter;
      ...
      image = postMeta.thumbnail.childImageSharp.sizes
    }

but the Netlify-build fails with "can't read childImageSharp of undefined" or something similar. It seems that it can't process the image in this way. The hero image gets it correct though, so it's not an issue of the image itself.

Ive also tried:
image = postMeta.thumbnail.childImageSharp.sizes.src
to no avail.

Any clues?

Errors

I am learning Gatsby, so I decided to try this. I got two errors running 'npm run develop' on localhost. I edited siteConfig.js to siteUrl: "http://localhost:8000"

1. Plugin gatsby-transformer-remark returned an error
   2)Error compiling site's Graphq; queries.....Unknown field 'timeToRead on type 'MarkdownRemark.

Anything I can do. This is the second gatsby git I have tried with no luck.

Netlify cms showing error.

Hey, after enabling identity, gateway, and even adding 0auth client and secret id.
After I invite myself and create an account. Going to site.com/admin only gives the option of github login. And after clicking that Button and giving permissions, it says that user doesn't have any repo of that name etc.
I know there's some mistake from my side but will you please look into it.

postEdges passed to SEO component but not used

It appears that postEdges is passed to the SEO component on index pages but it is not used anywhere in the SEO.jsx component.

'gatsby build' page markup does not contain the proper markup, everything is still in components

Hello,

This is a follow-up on this discussion on the Gatsby spectrum chat: https://spectrum.chat/thread/94b5889e-6431-4c09-81b3-1d206693cb58

The gist of it is that I have built a site on Gatsby 2.0 using the Advanced Starter and after running gatsby build and view source my markup looks like this:

<body><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group"><div></div></div></div><script>
  
  
  if(true) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  }
  if (typeof ga === "function") {
    ga('create', 'UA-XXXXX-1', 'auto', {});
      }
      </script><script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---src-pages-index-js","jsonName":"index","path":"/"};window.dataPath="173/path---index-6a9-NZuapzHg3X9TaN1iIixfv1W23E";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-32173ef2b3dc3bc4436a.js"],"component---node-modules-gatsby-plugin-offline-app-shell-js":["/component---node-modules-gatsby-plugin-offline-app-shell-js-062c2221de579979d938.js"],"component---src-templates-post-jsx":["/component---src-templates-post-jsx.5c661222004fa871f088.css","/component---src-templates-post-jsx-d367234ab7c717b5e873.js"],"component---src-templates-tag-jsx":["/component---src-templates-tag-jsx-6f0126334093a376b53e.js"],"component---src-templates-category-jsx":["/component---src-templates-category-jsx-533f7c58d03dcf5e18b6.js"],"component---src-pages-about-js":["/component---src-pages-about-js-b40ac9d522de9a6ed574.js"],"component---src-pages-blog-js":["/component---src-pages-blog-js-7cc58a9631555b819dff.js"],"component---src-pages-contact-js":["/component---src-pages-contact-js-0c59c5720745f9c06cb1.js"],"component---src-pages-faq-js":["/component---src-pages-faq-js-b4583ee89acf6be6ecb9.js"],"component---src-pages-features-js":["/component---src-pages-features-js-caeb7703a72da083d062.js"],"component---src-pages-index-js":["/component---src-pages-index-js-004e7fed214ea74ccfd6.js"],"component---src-pages-install-js":["/component---src-pages-install-js-2c52e857a83f50fd75cc.js"],"component---src-pages-jobs-js":["/component---src-pages-jobs-js-977a49abe2892d3c8006.js"],"component---src-pages-knowledge-base-js":["/component---src-pages-knowledge-base-js-dffa93ec75b161b10442.js"],"component---src-pages-press-js":["/component---src-pages-press-js-ef1650449d6193d4f557.js"],"component---src-pages-pricing-js":["/component---src-pages-pricing-js-09ac596ba300ee71a95a.js"],"component---src-pages-privacy-terms-js":["/component---src-pages-privacy-terms-js-fd460f30d6953b1b3757.js"],"component---src-pages-support-js":["/component---src-pages-support-js-f6b9138c2040af643b26.js"]};/*]]>*/</script><script async src='https://d33wubrfki0l68.cloudfront.net/bundles/ea09f8768b7ccde26124b3f25ae503dca42237ec.js'></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117485149-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-117485149-1');
</script></body>

As you can see, from a markup standpoint, the <body> tag is essentially empty.

Is anyone else running in to this?

Make this project the parent of Material starter

I think the codebase of this and https://github.com/Vagr9K/gatsby-material-starter could be shared if you separate the gastby specific code, and the material desing code, by some hoc tecniques