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.

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

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

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:

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*