@m00n/gatsby-starter-docs-material-ui v0.3.0
Gatsby Documentation Site Starter with Material-UI
NOTE: This project is not officially associated with Material-UI or Gatsby in any way. It is just a helpful boilerplate arranged by me.
A Gatsby V2 Documentation Site Starter using Material-UI and JSS.
GatsbyJS V2
This starter is based on GatsbyJS V2, which brings progressive web app features such as automatic code and data splitting (by route), prefetching, with service worker/offline-first support and PRPL pattern.
Features
- Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
- material-ui for Material design
NetlifyCMS support for creating/editing posts via admin panel
Full PWA Support. 100 PWA score with Lighthouse
- Docs in Markdown
- Code syntax highlighting
- Embedded YouTube videos
- Embedded Sequence Diagrams
- Tags
- Separate page for docs under each tag
- Categories
- Separate page for docs under each category
- Responsive design
- RSS feeds
- Loading progress for slow networks
- Offline support
- Web App Manifest support
- Automatic image transformation and size optimization
- Netlify deploy configuration
- Google Analytics support
- Development tools
- ESLint for linting
- Prettier for code style
- Remark-Lint for linting Markdown
- write-good for linting English prose
Getting Started
Install this starter (assuming Gatsby is installed and updated) by running from your CLI:
gatsby new YourProjectName https://github.com/6stars/gatsby-docs
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/6stars/gatsby-docs 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
:
siteTitle: '****** DOCS', // Site title.
siteTitleShort: '6star DOCS', // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
siteTitleAlt: '****** DOCS', // Alternative site title for SEO.
siteDescription: "for ******",
siteLogo: 'https://s.gravatar.com/avatar/cb868bd3f76af9631aa55aca22615673?size=1024', // Logo used for SEO and manifest.
siteUrl: 'https://6stars.netlify.com', // Domain of your website without pathPrefix.
siteRss: '/rss.xml', // Path to the RSS file.
pathPrefix: '/', // Prefixes all links.
siteGATrackingID: '', // Tracking code ID for google analytics.
defaultCategoryID: 'api', // Default category for docs.
dateFromFormat: 'MM-DD-YYYY', // Date format used in the frontmatter.
dateFormat: 'MM/DD/YYYY', // Date format for display.
userName: '******-user', // Username to display in the author segment.
copyright: 'Copyright © 2018. ******', // Copyright string for the footer of the website and RSS feed.
};
You can also optionally set pathPrefix
:
module.exports = {
// Note: it must *not* have a trailing slash.
pathPrefix: "/docs" // Prefixes all links. For cases when deployed to example.github.io/docs/.
};
NOTE: user*
, copyright
are optional and won't render if omitted.
WARNING: Make sure to edit static/robots.txt
to include your domain for the sitemap!
NetlifyCMS
First of all, make sure to edit static/admin/config.yml
and add your GitHub/GitLab/NetlifyId credentials:
backend:
name: git-gateway # Refer to https://www.netlifycms.org/docs/authentication-backends/ for auth backend list and instructions
branch: master # Branch to update
media_folder: static/assets
public_folder: assets
collections:
- name: "doc"
label: "****** Doc"
folder: "content"
create: true
slug: "{{slug}}"
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Slug", name: "slug", widget: "string"}
- {label: "Category", name: "category", widget: "string"}
- {label: "Tags", name: "tags", widget: "list"}
- {label: "Body", name: "body", widget: "markdown"}
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.