🗝 📃 Gatsby Starter Skeleton Markdown
A starter kit for a fresh GatsbyJS based site with a minimum amount of configuration but some opinionated choices. This starter includes markdown support but does not try and make too much assumptions on how your data is structured.
does not (yet) include any datasource nor does it try to make too much assumptions on how your data is structured.
- Global site-config file
- Header Component
- SEO Component
- TypeKit Component (optional)
- Posts drafts with
You can clone this repository to a local folder and run
yarn install to install all dependencies and
yarn develop to start developing. It's recommended that you install GatsbyJS globally beforehand. In that case you can also install by using the following command:
gatsby new blog https://github.com/aderaaij/gatsby-starter-skeleton.git. Now you're set!
Now you're all set-up you should have a look at the
/site-config/index.js. This is where you can set up some global values like your sites title, description and all that jazz. The config file is used in the following places:
Head/Head component is used in your
layout.js file as we need it on all pages and doesn't contain any data that needs to be changed based on the current route. By default this Head component only does three things:
- Sets the
- Loads the favicons if
faviconDiris defined in the
- Loads Typekit if
typekitIDis defined in the
If you fill in a Typekit ID, the Typekit component will be automatically added to the head using the advanced embed code. This is the least render-blocking way to load your Typekit fonts and will ensure your performance doesn't suffer. The Flash Of Unstyled Text (FOUT) can be solved with CSS. In general the FOUC will only happen once as the font is cached after that.
- To do: Create a way to choose Typekit embed code.
Who doesn't like favicons? The Favicon component includes referals to all the Favicons you want / need. You just need to generate them with 'The real favicon generator' and place them in the
folder. If you don't want any favicons, empty the
faviconDir value in
site-config/index.js and you'll be set.
The SEO component provides all the title and description tags and includes seperate components for Open Graph data and a Twitter Card. This component must be included on page level (see
pages/index.js) because it should change depending on what the current page is. By default, there are no props defined and we take all our values from
meta object you can redefine if there are props passed down.
Please let me know if this part is not clear. Seeing I don't want to make any assumptions on how your data is structured, I made it as re-configurable as possible.
The Open Graph meta values are included by default.
The TwitterCard component adds Twitter Card metadata to the head. This is only loaded when a Twitter username is filled in at