How to create a blog with Gatsby

This passed weekend I spent some time playing with Gatsby. Gatsby is a blazing fast modern site generator for React.

⭐️ 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 ratingCode 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 folderCode 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/