Building a new Starter

Created this Repo to build a new started based on the Gatsby Advanced Starter.

Styled with theme-ui inspired on Dan Abramov's blog, but slightly different.

Demo website, in case you would like to check it out first

Getting Started

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

gatsby new YourProjectName https://github.com/tiagofsanchez/gatsby-tfs-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/tiagofsanchez/gatsby-tfs-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

Styling

For anything style related you can change it /gatsby-plugin-theme-ui/index.js and consult theme-ui documentation

Configuration

Edit the export object in data/SiteConfig:

const config = {
  siteTitle: "gatsby tfs starter", // Site title.
  siteTitleShort: "tfs starter", // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
  siteTitleAlt: "gatsbyJS tfs starter", // Alternative site title for SEO.
  siteLogo: "", // Logo used for SEO and manifest.
  siteUrl: "https://gatsby-tfs-starter.netlify.com/", // Domain of your website without pathPrefix.
  pathPrefix: "/gatsby-tfs-starter", // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.
  siteDescription:
    "A GatsbyJS stater with Advanced design in mind and with theme-ui", // 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: "", // 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: "", // Username to display in the author segment.
  userEmail: "", // Email used for RSS feed's author segment
  userTwitter: "", // Optionally renders "Follow Me" in the UserInfo segment.
  userLocation: "", // User location to display in the author segment.
  userAvatar: "", // User avatar to display in the author segment.
  userDescription: "", // User description to display in the author segment.
  // Links to social profiles/projects you want to display in the author segment/navigation bar.
  avatar: {
    description:
      "I am learning to code ReactJS (from scratch) and I have built this starter to learn how Gatsby works and to build by blog!",
    photo: "https://avatars1.githubusercontent.com/u/11288873?s=400&v=4"
  },
  userLinks: [
    {
      label: "github",
      url: "https://github.com/tiagofsanchez/tfs-starter"
    },
    {
      label: "linkedin",
      url: "https://www.linkedin.com/in/tiago-formosinho-sanchez-3764225/"
    },
    {
      label: "email",
      url: "mailto:tiagofsanchez@gmail.com"
    }
  ],
  menuLinks: [
    {
      name: "Me",
      url: "/about"
    },
    {
      name: "Articles",
      url: "/blog"
    }
  ],
  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.
};

// Validate

// Make sure pathPrefix is empty if not needed
if (config.pathPrefix === "/") {
  config.pathPrefix = "";
} else {
  // Make sure pathPrefix only contains the first forward slash
  config.pathPrefix = `/${config.pathPrefix.replace(/^\/|\/$/g, "")}`;
}

// Make sure siteUrl doesn't have an ending forward slash
if (config.siteUrl.substr(-1) === "/")
  config.siteUrl = config.siteUrl.slice(0, -1);

// Make sure siteRss has a starting forward slash
if (config.siteRss && config.siteRss[0] !== "/")
  config.siteRss = `/${config.siteRss}`;

module.exports = config;

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!

Features (tweaked from gatsby advanced starter)

• 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 MDX
  • 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