Gatsby Blog, vchrombie.github.io/blog.
Theme, https://github.com/LekoArts/gatsby-starter-minimal-blog.
Comments with giscus, https://github.com/vchrombie/comments/discussions.
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
$ 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>
$ npm install gatsby-plugin-google-gtag
gatsby-config.ts
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
"G-C5Y4PDGXSR", // Google Analytics / GA
],
},
},
]
$ 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"
}
}