4.3 KiB
🍭 My blog built with Gatsby. Neat.
Table of Contents
🎉 Features
The whole blog is a React-based Single Page App built with Gatsby v2.
EXIF extraction
...
🏆 SEO component
Includes a SEO component which automatically switches all required meta tags for search engines, Twitter Cards, and Facebook OpenGraph tags based on the browsed route/page.
If you want to know how, have a look at the respective component under src/components/atoms/SEO.jsx
📈 Matomo (formerly Piwik) analytics tracking
Site sends usage statistics to my own Matomo installation. To make this work in Gatsby, I created and open sourced a plugin, gatsby-plugin-matomo, which is in use on this site.
gatsby-redirect-from
https://github.com/kremalicious/gatsby-redirect-from
💎 Importing SVG assets
All SVG assets under src/images/ will be converted to React components with the help of gatsby-plugin-svgr. Makes use of SVGR so SVG assets can be imported like so:
import { ReactComponent as Logo } from './components/svg/Logo'
<Logo />
🍬 Typekit component
Includes a component for adding the Typekit snippet.
If you want to know how, have a look at the respective component under src/components/atoms/Typekit.jsx
✨ Development
You need to have the following tools installed on your development machine before moving on:
Then install dependencies and start everything up:
npm i
npm start
🔮 Linting
ESlint, Prettier, and Stylelint are setup for all linting purposes:
npm run lint
To automatically format all code files:
npm run format
npm run format:css
🎈 Add a new project
npm run new -- "Hello"
...
🚚 Deployment
Automatic deployments are triggered upon successful tests & builds on Travis:
- push to
masterinitiates a live deployment - any Pull Request, and subsequent pushes to it, initiates a beta deployment
The deploy command simply calls the scripts/deploy.sh script, syncing the contents of the public/ folder to S3:
npm run deploy
The deploymeng script can be used locally too, the branch checks are only happening for Travis builds, allowing to deploy any branch from local machine.
🏛 Licenses
The MIT License (MIT)
except for:
Posts
All post content under ./content/posts is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Photos & images
All photos & image assets under ./content/media, ./src/images, and assets sheet.psd are plain ol' copyright.
Copyright (c) 2008–2018 Matthias Kretschmann
Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission.