The Gatsby starter with typescript and a lot of goodies.
It is a 100% SEO ready gatsby blog starter, especially programming blogs, as it can extract a list of repos via GitHub api. It also includes tags, comments, search, social buttons and SEO support.
Verify if npm and node are installed on your machine:
node -v && npm -v
Otherwise, install them:
// For Ubuntu
sudo apt-get install npm
sudo apt-get install node
Install the starter:
gatsby new YourProjectName https://github.com/garrynsk/gatsby-seo-starter
If you want to configure installed plugins, navigate to gatsby-config.js in the root directory and edit it as you wish.
Feel free to configure them.
-
gatsby-image Speedy, optimized images without the work.
-
gatsby-remark-responsive-image Make images in markdown responsive.
-
gatsby-plugin-sharp Exposes several image processing functions built on the Sharp image processing library.
-
gatsby-remark-images Processes images in markdown so they can be used in the production build.
-
gatsby-remark-responsive-iframe Wraps iframes or objects (e.g. embedded YouTube videos) within markdown files in a responsive elastic container with a fixed aspect ratio.
-
gatsby-transformer-sharp Creates ImageSharp nodes from image types that are supported by the Sharp image processing library and provides fields in their GraphQL types for processing your images in a variety of ways including resizing, cropping, and creating responsive images.
- gatsby-remark-prismjs Adds syntax highlighting to code blocks in markdown files using PrismJS.
-
gatsby-plugin-sitemap Create a sitemap for your Gatsby site.
-
gatsby-plugin-google-analytics Easily add Google Analytics to your Gatsby site.
-
gatsby-plugin-manifest Adds support for shipping a manifest.json with your site. To create manifest.json, you need to run gatsby build.
-
gatsby-plugin-favicon Generates all favicons for Web, Android, iOS, ...
-
gatsby-plugin-hotjar Hotjar analytics.
-
gatsby-plugin-offline Adds drop-in support for making a Gatsby site work offline and more resistant to bad network connections. It creates a service worker for the site and loads the service worker into the client.
-
gatsby-plugin-nprogress Automatically shows the nprogress indicator when a page is delayed in loading (which Gatsby considers as one second after clicking on a link).
-
gatsby-plugin-algolia Search powered by Algolia.
-
gatsby-plugin-feed Create an RSS feed (or multiple feeds) for your Gatsby site.
-
gatsby-plugin-webpack-bundle-analyzer A Gatsby plugin to help analyze your bundle content with webpack-bundle-analyzer.
-
gatsby-plugin-debug-build Gatsby plugin to force the dev version of builds. NOT FOR USE IN PRODUCTION. This is a debugging utility. Don’t do stupid things with it.
-
gatsby-plugin-netlify Automatically generates a _headers file and a _redirects file at the root of the public folder to configure HTTP headers and redirects on Netlify.
-
gatsby-link A component for Gatsby. It’s a wrapper around React Router’s Link component that adds enhancements specific to Gatsby. All props are passed through to React Router’s Link.
-
gatsby-plugin-catch-links Intercepts local links from markdown and other non-react pages and does a client-side pushState to avoid the browser having to refresh the page.
-
gatsby-remark-copy-linked-files Copies local files linked to/from markdown to your public folder.
-
gatsby-transformer-remark Parses Markdown files using Remark.
-
gatsby-plugin-fastclick Make your Gatsby app more responsive on touch devices with Fastclick.
-
gatsby-plugin-react-helmet Provides drop-in support for server rendering data added with React Helmet. React Helmet is a component which lets you control your document head using their React component.
-
gatsby-remark-smartypants Replaces “dumb” punctuation marks with “smart” punctuation marks using the retext-smartypants plugin.
-
gatsby-source-filesystem Plugin for creating File nodes from the file system.
-
gatsby-plugin-twitter Loads the Twitter JavaScript for embedding tweets. Let's you add tweets to markdown and in other places
- gatsby-plugin-typescript Provides drop-in support for TypeScript and TSX.
-
gatsby-source-github-api Source plugin for pulling data into Gatsby from the official GitHub v4 GraphQL API.
-
gatsby-remark-autolink-headers Adds GitHub-style links to MarkdownRemark headers.
UI
- material-ui
- styled-components
Posts in markdown
- Code syntax highlighting
- Embedded YouTube videos
- Embedded Tweets
- Embedded Facebook posts
- Embedded Reddit comments
Special blog features
- Tags
- Disqus comments
- List of Github repositories
- Search
Social features
- Twitter tweet button
- Facebook share button
- Google+ share button
- LinkedIn share button
SEO
- Sitemap generation
- robots.txt
- Meta descriptions
- Schema.org
- OpenGraph Tags
- Twitter Tags
- Google analytics
- Web App Manifest
- All essential favicons
Development tools
- TSLint for linting
- Prettier for code style
- Remark-Lint for linting Markdown
- write-good for linting English prose
- gh-pages for deploying to GitHub pages
First, look as config.js. Here you keep all configuration data. It can be queried like this:
export const query = graphql`
query AboutQuery {
site {
siteMetadata {
siteUrl
siteTitle
userEmail
userName
userMoto
githubUrl
facebookUrl
twitterUrl
linkednUrl
... // other configuration data
}
},
}
I spend quite some time wrapping my head around how to make seo works in gatsby, but finally it works. You must know, that react-helmet doesn't work with Facebook scrapper. It just fails to fetch dynamic tags. So you have to use some kind of prerendering.
I allow myself to cite @cjimmy:
This is the most obvious solution but the most onerous. You won't be able to use client-side definitions like window in your js. If you're using React Router, you'll have to find a way to mirror the routes between server and client. If you're like me, you might be serverless, and running a server would be a lot more work. On the other hand, your page will likely load faster, and crawlers will see what your users would. This is a non-exhaustive list of tradeoffs.
Prerender.io, Render-tron, and Prerender.cloud to name a few, give you a way to server-side render when the user-agent is a bot. Some CDNs like Netlify and Roast.io do this for you so you don't have to run your own server. The downside to this is this is yet another service to pay for.
A couple of packages exist for rendering your React app statically. Graphcool's Prep, React-Snap, React-Snapshot were ones I've found that all essentially run a local server to render the site and download the html files. The files won't be pretty, but if all you're looking for is the generated by React Helmet, this will do.
I tried Prep, React-Snap, but they failed. So I ended up using Netlify prerendering feature. It works just fine.
Also, react-helmet inserts meta tags in the end of a header. But most of the crawlers limits their search. At least Facebook couldn't find my headers after gatsby's inlined styles. So I wrote some plain simple helpers for tags inserting. You may find them in components/seo/seo.tsx.
I introduced some great free services for site monitoring: hotjar, heap, google-analytics and google tagmanager. I recommend you to use tagmanager whenever you need to insert static meta tags. It is very convenient. I installed Google Optimiser, Conversion Linker and Facebook Pixel with this. And Facebook Pixel now works fine. But you can try gatsby-plugin-facebook-analytics. I didn't manage it, though. It fails with Facebook Pixel Helper. Maybe it is my fault.
I checked my blog's SEO health with:
- OpenLink Structured Data Sniffer
- SEOQuake
- Google's Structured Data testing tool
- Dareboost
- Facebook Sharing Debugger
- Twitter Card Validator
- Screaming Frog
And a bunch of other tools!
To define custom tags you need to write them in every post in the block at the beginning of the post. Like this:
---
title: "What Are They, Monads, Angels or Demons?"
date: "2018-03-26T10:30:00.000Z"
author: "Zakharova Victoria"
path: "/monads"
featuredImage: "./angels.jpg"
tags: ["monads", "Scala"]
---
Every post has it's featured image, which will be shown on the Home page and in the post itself. You should it define in the every post too.
Your plugins can be configurated in gatsby-node.js.
-
gatsby-source-github-api You must provide token and graphQL query.
-
gatsby-plugin-webpack-bundle-analyzer Is disabled by default. If you need it, change the value of the "disable" parameter.
-
gatsby-plugin-google-analytics You must provide trackingId.
-
gatsby-plugin-facebook-analytics You must provide appId.
-
gatsby-plugin-mixpanel You must provide apiToken.
-
gatsby-plugin-feed Write a query.
-
gatsby-plugin-hotjar Provide an id.
For social buttons is used addthis service. You can configure it in templates/post.tsx.
For social icons is used fontawesome. You can configure it in components/socialButtons/socialButtons.tsx
In the file parser/parser.tsx is stored a parser for github API.
You can include or exclude scripts for embed links from templates/post.tsx.
Oh, I forgot some issues. The first one with repositories' readme. Starter doesn't fetch images and code from readme, it fetches text anyway, but I hope I find time to deal with it. And the second one is performance. The blog is not notoriously slow, but doesn't perform as fast as I expected. I think, tree-shaking could improve the situation, but Gatsby, unfortunately, still uses Webpack 1. So, if anyone can advise me how to speed up the blog, it will be great.