A blog starter with Material design in mind for Gatsby.
This starter is based on GatsbyJS V1, 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.
More information in the announcement.
NOTE: Take a look at gatsby-advanced-starter if you prefer building UI from scratch and/or only interested in fundamental features.
You can also visit my personal blog if you want to see a fully implemented blog based on this starter.
Install this starter (assuming Gatsby is installed) by running from your CLI:
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-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-material-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
Edit the export object in data/SiteConfig
:
module.exports = {
blogPostDir: "sample-posts", // The name of directory that contains your posts.
siteTitle: "Gatsby Carbon Components Starter", // Site title.
siteTitleAlt: "GatsbyJS Carbon Components Starter", // Alternative site title for SEO.
siteLogo: "/logos/logo-1024.png", // Logo used for SEO and manifest.
siteUrl: "https://ibm-frontend.github.io", // Domain of your website without pathPrefix.
pathPrefix: "/gatsby-starter-carbon", // Prefixes all links. For cases when deployed to example.github.io/gatsby-starter-carbon/.
fixedFooter: false, // Whether the footer component is fixed, i.e. always visible
siteGATrackingID: "UA-47311644-4", // Tracking code ID for google analytics.
postDefaultCategoryID: "Tech", // Default category for posts.
userName: "Carbon Components User", // Username to display in the author 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:
"Lorem ipsum dolor amet celiac unicorn air plant you probably haven't heard of them. Occupy cornhole swag trust fund lo-fi cardigan lumbersexual dreamcatcher raclette franzen. Bushwick polaroid portland crucifix deep v shoreditch aesthetic. Hella try-hard echo park semiotics. Sartorial normcore retro vaporware selvage before they sold out wayfarers.", // 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/https://github.com/ibm-frontend/",
iconClassName: "fa fa-github"
},
{
label: "Twitter",
url: "https://twitter.com/_carbondesign",
iconClassName: "fa fa-twitter"
},
],
copyright: "Copyright © 2018. Carbon Components User", // Copyright string for the footer of the website.
};
You can also optionally set pathPrefix
:
module.exports = {
// Note: it must *not* have a trailing slash.
pathPrefix: '/gatsby-carbon-starter', // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
}
NOTE: user*
, disqusShortname
and copyright
are optional and won't render if omitted.
WARNING: Make sure to edit static/robots.txt
to include your domain for the sitemap!
Edit src/layouts/theme.scss
to suit your needs.
You can use Material color palette provided by React-MD.
@import '~react-md/src/scss/react-md';
$md-primary-color: $md-grey-400;
$md-secondary-color: $md-red-800;
$md-tertiary-color: $md-grey-300;