The goal of this post is to customize and extend the GatsbyJS blog created in last week’s Weekend Hacks. We will add Google analytics, and create a custom theme.
This post is part of the Weekend Hack series, short developer stories focused on learning by doing. Step-by-step instructions and repository links are provided.
The article is divided into two main sections: the first covering Analytics, and the second tackling customization.
As our website traffic grows from zero (hopefully), it becomes more and more important to track traffic analytics. How many visitors, from which source (referrals, search engines…) they come, and from which location they access our website, become questions which answers can provide significant business value.
There are multiple analytics tools out there, but for the sake of this tutorial, we will choose Google Analytics, which provides a very generous free tier with 10 million hits per month. Luckily for us, GatsbyJS has a plugin that makes setting up this analytics very easy. Furthermore, the starting template that we used in the previous Weekend Hack post, comes with this plugin installed by default!
Step by step setup
First, create a Google Analytics account with your Google account here.
Then, create a new Property (image below). Usually, we will create one property per each web site that we want to track. As soon as we create the property, we will get a Tracking ID with the format
UX-XXXXXXXXX-X . Note it down, as we will need it to set up the plugin.
Access locally (by cloning it) the GitHub repository that contains our blog created on last week’s Weekend Hack episode, and make sure you have the required development environment setup.
If you are using a starter that doesn't come with the
gatsby-plugin-google-analytics plugin installed, install it by typing in the console:
npm install — save gatsby-plugin-google-analytics
Then, append or replace the following code inside
plugins: [...]. Don't forget to “UA-XXXXXXXXX-X” with your own Tracking ID.
Commit the changes, push to the remote and access the custom domain of your blog (in our case, https://gatsbyjsnetlify.tk/). We will be able to see the active user count increase in the analytics dashboard.
GatsbyJS supports multiple ways of handing styles, with the help of CSS libraries and frameworks. The started that we picked has native support for Typography.js, so we can leverage and tweak supported themes. The themes are available as an interactive webpage here:
A powerful toolkit for building websites with beautiful design. npm install typography…
We will change the starters Typography.js theme to
typography-theme-stern-grove. The default styles can be further extended following the API. Add the following to the
import sternGrove from 'typography-theme-stern-grove'const typography = new Typography(sternGrove)
On top of that, we did some more style changes to the layout and content. Feel free to extend and customize your blog as much as you want!
As a side note, it is worth pointing out that GatsbyJS is blazing fast and performs well in situations with low-network, out of the box.
As we saw, adding analytics and customizing a GatsbyJS blog is a breeze. When considering the extensibility provided by the plugins, starters, themes, and React components, GatsbyJS stands as a strong option to create fast and easily maintainable static websites.
- Github repo → https://github.com/aperkaz/gatsby-blog-in-netlify
Weekend Hack posts:
Weekend Hack: Building an Unsplash bot for Telegram with Python
Build your first Telegram bot using Python and Glitch, that serves hi-res images from Unsplash!