blog-next-giscus-hygraph-chakra-ui-adsense-coil

🚀 Programming blog with Next.js GitHub Giscus Hygraph (formerly GraphCMS), Google Adsense, Coil Ad Monetization, read Medium and Dev.To articles via API 🚀

Status and Issues (see Issue Tab)

Can't build, it should work otherwise.
Hygraph cloned schema is set up but photograph url's are not editable.
#2 (closed) Giscus - GitHub discussions - is set up
#3 (closed) Hygraph account is set up
#6 (closed) Google analytics is set up
#11 (closed) Substack is set up
#4 (open) Hygraph cloned schema is set up but photograph url's are not editable
#5 (open) Create a new Hygraph schema for a blog
#7 (open) Google Adsense is not set up
#8 (open) Ko-fi is set up but needs a Stripe account
#9 (open) Create a Stripe account
#10 (open) Cloudinary is set up but needs Author image uploaded
#12 (open) Build is failing because needs at least one featured post, tags
#13 (open) config/site.config.js needs to be modified
#14 (open) Coil and ad display is not set up

https://github.com/coding-to-music/blog-next-giscus-hygraph-chakra-ui-adsense-coil

https://blog-next-giscus-hygraph-chakra-ui-adsense-coil.vercel.app

From / By https://github.com/RakeshPotnuru/blog

https://blog.itsrakesh.com/

https://blog.itsrakesh.com/how-to-set-up-your-own-personal-blog-step-by-step-guide

https://hygraph.com/

Clone this blog project https://app.hygraph.com/clone/13f9db967a6640af82423ad6f304025d?name=itsrakesh-blog

https://cloudinary.com/

https://coil.com/

Node Version:

nvm use 18

Now using node v18.17.1 (npm v10.1.0)

Environment variables:

See .env.example

NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL=
NEXT_PUBLIC_HYGRAPH_AUTH_TOKEN=

NEXT_PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID=

NEXT_PUBLIC_SITE_URL=

NEXT_PUBLIC_GISCUS_REPO=
NEXT_PUBLIC_GISCUS_REPO_ID=
NEXT_PUBLIC_GISCUS_CATEGORY=
NEXT_PUBLIC_GISCUS_CATEGORY_ID=

NEXT_PUBLIC_KOFI_WIDGET_EMBED_URL=

NEXT_PUBLIC_CLOUDINARY_CLOUDNAME=

NEXT_PUBLIC_SUBSTACK_URL=

GitHub

git init
git add .
git remote remove origin
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:coding-to-music/blog-next-giscus-hygraph-chakra-ui-adsense-coil.git
git push -u origin main

Giscus GitHub Discussion Commenting system

1 - Page <--> Discussion Mapping
2 - Enter the username/reponame
3 - Discussion Category
4 - Features
5 - Theme

Scroll down, view the JSON that is proposed for your site. Adjust the checkboxes as needed

Copy the JSON values and store into the .env values

Here is how the settings are implemented in this website

// /src/common/components/misc/Comment.jsx

import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react';
import Giscus from '@giscus/react';

const CommentBox = () => {
  const giscusTheme = useColorModeValue('light', 'dark');

  return (
    <Container maxW={'container.md'} my={10}>
      <Heading size={'md'}>LEAVE A COMMENT OR START A DISCUSSION</Heading>
      <Box my={10}>
        <Giscus
          repo={process.env.NEXT_PUBLIC_GISCUS_REPO}
          repoId={process.env.NEXT_PUBLIC_GISCUS_REPO_ID}
          category={process.env.NEXT_PUBLIC_GISCUS_CATEGORY}
          categoryId={process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
          mapping="url"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="top"
          theme={giscusTheme}
          lang="en"
          loading="lazy"
          crossorigin="anonymous"
        />
      </Box>
    </Container>
  );
};

export default CommentBox;

Begin original README.md

itsrakesh - blog

Browse programming tutorials and articles written by Rakesh Potnuru.

View Example · Report Bug · Request Feature

Table of Contents

About The Project
Getting Started
- Prerequisites
- Installation
Contributing
License
Contact

About The Project

Follow this guide to set up your own instance of this blog.

(back to top)

Built With

Next.js
Chakra UI
Hygraph (Previously GraphCMS)

Tools And Technologies Used

BeyondWords - Audio
Coil - Web monetization
Google Analytics
Google AdSense
Giscus - A comments system powered by GitHub Discussions.
Netlify

(back to top)

Getting Started

Setup project locally for development.

Note [Important] These instructions are for development purposes only. Follow this guide to set up your own instance of this blog.

Prerequisites

Hygraph project set up

Create or sign in to your Hygraph account.
Click the button below to clone the Hygraph project.

Create or sign in to your Cloudinary account.
Follow this guide to install Cloudinary UI extension in Hygraph.

Blog set up

npm
```
npm install npm@latest -g
```
Create .env.local file at the root level of the project and copy env variables from .env.example file. You need to fill atleast these three variables for development purpose.
```
NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL=
NEXT_PUBLIC_HYGRAPH_AUTH_TOKEN=
NEXT_PUBLIC_CLOUDINARY_CLOUDNAME=
```

Installation

Fork the repo

Clone the repo

git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git

Install the dependencies
```
yarn
```
Start the development server
```
yarn dev
```
Your project will be running at http://localhost:3000

(back to top)

Or

With Docker

Fork the repo

Clone the repo

git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git

Build the image
```
docker-compose build
```
Run docker image
```
docker-compose up
```
Your project will be running at http://localhost:3000

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!