๐ Programming blog with Next.js GitHub Giscus Hygraph (formerly GraphCMS), Google Adsense, Coil Ad Monetization, read Medium and Dev.To articles via API ๐
- 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/how-to-set-up-your-own-personal-blog-step-by-step-guide
Clone this blog project https://app.hygraph.com/clone/13f9db967a6640af82423ad6f304025d?name=itsrakesh-blog
nvm use 18
Now using node v18.17.1 (npm v10.1.0)
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=
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
https://hugomods.com/en/blog/2023/05/how-to-configure-giscus/
https://github.com/apps/giscus
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;
Browse programming tutorials and articles written by Rakesh Potnuru.
View Example
ยท
Report Bug
ยท
Request Feature
Table of Contents
Follow this guide to set up your own instance of this blog.
- BeyondWords - Audio
- Coil - Web monetization
- Google Analytics
- Google AdSense
- Giscus - A comments system powered by GitHub Discussions.
- Netlify
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.
- 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.
- 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=
- 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
- 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
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt
for more information.
Twitter - @rakesh_at_tweet
Project Link: https://github.com/coding-to-music/blog-next-giscus-hygraph-chakra-ui-adsense-coil
Status - status.itsrakesh.com