<javascript/>
web
Advanced Starter for GatsbyJS
A starter skeleton with advanced features for Gatsby.
Gatsby Advanced Starter
A starter skeleton with advanced features for Gatsby.
NOTE: This branch contains Gatsby 3 compatible version of the starter. To get the Gatsby v2 compatible version, use the v2
branch. To get the Gatsby v1 compatible version, use the v1
branch.
Lighthouse Audit Score
Check out the Features to read about all Progressive Web App capabilities of this starter in detail.
Why?
This project aims to provide a minimal base for building advanced GatsbyJS powered websites.
It doesn't define any UI limitations in any way and only gives you the basic components for SEO/Social Media/etc while creating a comfortable development environment to get started.
You are free to use any UI framework/styling options.
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.
Features
Gatsby v3 support
Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
Posts in Markdown
Code syntax highlighting
Embed YouTube videos
Embed Tweets
Pagination
Configurable via
SiteConfig.js
Tags
Separate page for posts under each tag
Categories
Separate page for posts under each category
Disqus support
Notifications about new disqus comments
/static/
and content folders are available to use with gatsby-image out of the box for optimized image generationHigh configurability
Separate components for everything:
User social profiles
Copyright information
More!
NetlifyCMS support out of the box
PWA features
Offline support
Web App Manifest support
Loading progress for slow networks
SEO
Google Analytics support
Sitemap generation
robots.txt
General description tags
RSS feeds
Social features
Twitter tweet button
Facebook share/share count
Reddit share/share count
LinkedIn share button
Telegram share button
Development tools
ESLint for linting
Prettier for code formatting
Remark-Lint for linting Markdown
write-good for linting English prose
gh-pages for deploying to GitHub pages
Netlify deploy configuration
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 by running the following commands from your CLI:
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
cd YourProjectName
npm run 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:
Run the following commands:
git clone https://github.com/${YourUsername}/${YourForkName} YourForkName # Clone your fork
cd YourForkName
npm install # or yarn install
npm run develop # or yarn 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://gatsby-advanced-starter-demo.netlify.com", // Domain of your website without pathPrefix.
pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.
siteDescription: "A GatsbyJS starter with Advanced design in mind.", // Website description used for RSS feeds/meta description tag.
siteRss: "/rss.xml", // Path to the RSS file.
siteRssTitle: "Gatsby Advanced Starter RSS feed", // Title of the RSS feed
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.
dateFromFormat: "YYYY-MM-DD", // Date format used in the frontmatter.
dateFormat: "DD/MM/YYYY", // Date format for display.
postsPerPage: 4, // Amount of posts displayed per listing page. Set to zero to disable paging. See the "Pagination" section.
userName: "Advanced User", // Username to display in the author segment.
userEmail: "AdvancedUser@example.com", // Email used for RSS feed's 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.
};
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",
},
},
});
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!
Pagination
By default the starter will show 4 posts per page. The landing page is the first page located on /
(controlled by the Listing
component).
You can control the amount of posts via SiteConfig
by setting the postsPerPage: ${NUMBER}
.
NOTE: You can also disable the pagination by setting the postsPerPage: 0
. In this case the landing page will be controlled by the Landing
component.
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).
For NetlifyCMS specific issues visit the official documentation.