This passed weekend I spent some time playing with Gatsby. Gatsby is a blazing fast modern site generator for React.
Gatsby's blog starter
They provide a quick fool-proof way to bootstrap your blog with the gatsby-starter-blog repo.
⭐️ My TV Shows Review
What was my plan?
Use the provided repo to create the site to quickly have a production-ready setup and add little customizations.
If you know me I love lifelogging. I decided to lifelog the episodes for the TV shows I watch. Having the possibility to add a rating for each one and a review text.
I had played with static generators in the past. You write in Markdown, commit your file and build it on the server. However, in my opinion, that's pretty slow. Create the file in your IDE, commit the new file, push it to the repo...
GraphQL
No doubt one of the coolest things about Gatsby is GraphQL
When building with Gatsby, you access your data through a query language named GraphQL. GraphQL allows you to declaratively express your data needs. This is done with queries, queries are the representation of the data you need.
View docs
The gatsby develop
task also spawns a UI to test GraphQL queries:

🏎 Need for speed
I created a Bash script to do all those steps from the terminal with a question/answer flow, such as:
echo "Name of the show:"
read name
echo "What Season?"
read season
echo "What Episode?"
read episode
echo "What Rating (1-5)"
read rating
Code language: PHP (php)
If you've never seen this, with the lines above the user will be prompted to add an answer to each question, and those will be stored in variables.
Here's the full script review.sh including the git pull, file creation, commit, and push.
Now I can create a new review in less than 20 seconds (depending on the length of the review) and be done with it. Knowing that Github is taking care of building the site in the cloud and will publish it publicly in less than 2 minutes.
Enter: Github Actions
How do I tell Github to build my site?
Here's where Github Actions shine. With it I created an action that on every push to the master branch, it would build the site and move the generated content (public folder) to the gh-pages branch. That branch is hosted for free by Github: https://quicoto.github.io/reviews/
name: Build and Deploy
on:
# Trigger the workflow on push
# but only for the master branch
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2
with:
persist-credentials: false
- name: Install and Build
run: |
npm ci
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
DEBUG: true
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages # The branch the action should deploy to.
FOLDER: public # Gatsby Public folder
Code language: PHP (php)
IFTTT
To complete the circle and share my reviews on social media I have set up an IFTTT action to be triggered on each RSS Feed new item. The action is a webhook to my Mastodon account using the item description. Learn How to customize the RSS Feed in Gatsby.
The automatic updates posted on my account look like:

What's next?
- Add Open Graph and Twitter Cards meta tags. So it looks even better when sharing the link.
- Schema / Rich Snippets. Add more metadata (Google Search results and accessibility).
- Have better stats on the home page using the GraphQL queries:
- Top-rated shows
- Total number of episodes reviewed.
- Unique shows watched.
Check out the live site! 👇
https://quicoto.github.io/reviews/
Review preview
Here's what the site looks like now when accessing a single review:
