https://github.com/halfjuice/hello
A high performance skeleton starter for GatsbyJS that focuses on SEO/Social features/development environment.
https://github.com/halfjuice/hello
Last synced: 3 months ago
JSON representation
A high performance skeleton starter for GatsbyJS that focuses on SEO/Social features/development environment.
- Host: GitHub
- URL: https://github.com/halfjuice/hello
- Owner: halfjuice
- License: mit
- Created: 2021-02-19T12:25:06.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-19T12:25:09.000Z (over 4 years ago)
- Last Synced: 2025-01-16T14:55:08.010Z (5 months ago)
- Language: JavaScript
- Size: 741 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby Advanced Starter
A starter skeleton with advanced features for [Gatsby](https://github.com/gatsbyjs/gatsby/).
**NOTE**: This branch contains Gatsby v2 compatible version of the starter. To get the Gatsby v1 compatible version, use the [`v1`](https://github.com/Vagr9K/gatsby-advanced-starter/tree/v1) branch.
## Lighthouse Audit Score
Check out the [Features](#features) to read about all [Progressive Web App](https://developers.google.com/web/progressive-web-apps) 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.
[Demo website.](https://gatsby-advanced-starter-demo.netlify.com)
## Features
- Gatsby v2 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](https://disqus.com/) support
- Notifications about new disqus comments
- `/static/` and content folders are available to use with [gatsby-image](https://www.gatsbyjs.org/docs/gatsby-image/) out of the box for optimized image generation
- High configurability
- Separate components for everything:
- User social profiles
- Copyright information
- More!
- [NetlifyCMS](https://www.netlifycms.org) support out of the box
- PWA features
- Offline support
- Web App Manifest support
- Loading progress for slow networks
- SEO
- [Google Analytics](https://marketingplatform.google.com/about/analytics/) support
- Sitemap generation
- robots.txt
- General description tags
- [Schema.org JSONLD (Google Rich Snippets)](https://schema.org/)
- [OpenGraph Tags (Facebook/Google+/Pinterest)](https://ogp.me/)
- [Twitter Tags (Twitter Cards)](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup)
- RSS feeds
- Social features
- Twitter tweet button
- Facebook share/share count
- Reddit share/share count
- LinkedIn share button
- Telegram share button
- Development tools
- [ESLint](https://eslint.org/) for linting
- [Prettier](https://prettier.io/) for code formatting
- [React Hooks Linting](https://www.npmjs.com/package/eslint-plugin-react-hooks)
- Remark-Lint for linting Markdown
- write-good for linting English prose
- gh-pages for deploying to GitHub pages
- [Netlify](https://www.netlify.com/) deploy configuration
- [CodeClimate](https://codeclimate.com/) configuration file and badge
NOTE: Feel free to check out [Gatsby Material Starter](https://github.com/Vagr9K/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:
```sh
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
cd YourProjectName
npm run develop # or gatsby develop
```
Note that the [Gatsby CLI](https://www.npmjs.com/package/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](https://github.com/Vagr9K/gatsby-advanced-starter/fork)
- Run the following commands:
```sh
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`:
```js
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: "[email protected]", // 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:[email protected]",
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`:
```js
import CMS from "netlify-cms-app";
CMS.init({
config: {
backend: {
name: "git-gateway",
},
},
});
```
You can also optionally set `pathPrefix`:
```js
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](https://www.netlifycms.org/docs/authentication-backends/):
```yml
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](https://www.netlifycms.org/docs/intro/).
# Author
Ruben Harutyunyan ([@Vagr9K](https://twitter.com/Vagr9K))