Blog

Gatsby Blog, vchrombie.github.io/blog.

Theme, https://github.com/LekoArts/gatsby-starter-minimal-blog.

Comments with giscus, https://github.com/vchrombie/comments/discussions.

Setup

Prerequisites

• nvm
• node & npm (you can install using nvm)

  $ nvm install 16
  $ node --version && npm --version
    v16.13.2
    8.1.2

• gatsby

  $ npm install -g gatsby-cli

Build the site locally

$ git clone https://github.com/vchrombie/blog
$ cd blog/
$ npm install
$ gatsby develop

Clean the cache

$ gatsby clean

Deploy to github pages

$ npm run deploy

Plugins

giscus

$ npm install @giscus/react

node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/post.tsx

import {Giscus} from "@giscus/react";

...

      {children}
    </section>

    <Giscus
      id="comments"
      repo="vchrombie/comments"
      repoId="MDEwOlJlcG9zaXRvcnkyNjI1NjQ5ODM="
      category="Comments"
      categoryId="DIC_kwDOD6Zsd84CBE_4"
      mapping="pathname"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="1"
      inputPosition="top"
      theme={theme}
      lang="en"
      loading="lazy"
    />
    
    <PostFooter post={post} />
  </Layout>

gatsby-plugin-google-gtag

$ npm install gatsby-plugin-google-gtag

gatsby-config.ts

plugins: [
  {
    resolve: `gatsby-plugin-google-gtag`,
    options: {
      trackingIds: [
        "G-C5Y4PDGXSR", // Google Analytics / GA
      ],
    },
  },
]

gh-pages

$ npm install gh-pages --save-dev

gatsby-config.ts

const config: GatsbyConfig = {
  pathPrefix: `/blog`,
}

package.json

{
  "scripts": {
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  }
}