How to set up your own personal blog: Step-By-Step Guide
Published: 2022-08-12 17:54:03

I published an [article](https://blog.itsrakesh.co/how-i-built-my-blog-with-nextjs-chakra-ui-and-graphcms) about how I built my blog and why I used specific technology. Many folks enjoyed it and wanted to start their own blogs. So, if you want to start a personal blog without using third-party platforms, follow this tutorial.
This post will walk you through setting up your own instance of my [blog](https://blog.itsrakesh.co/). I'll go over everything from SEO to hosting and Google AdSense set up. Don't worry, all of the third-party tools and services used to develop this site have free plans.

## Benefits of having a personal blog

- Full control over your content.
- Add your own features.
- Monetize your content however you want.

## Let's get started

## Main features of this blog

![itsrakesh blog](https://i.imgur.com/kk5Ghna.png)

1. Posts - Articles/Tutorials/Guides
2. Snippets - Mini blogs
3. Search,
   - Main search - A central search function that allows users to search for anything.
   - Search page - A category search that allows visitors to look for specific content.
4. Audio posts - Add audio articles
5. Comment system - A GitHub-powered comment system
6. Ko-fi - The embed contribution widget allows your fans to donate to you without leaving your website.
7. Monetization,
   - [Web monetization](https://webmonetization.org/) - People can help creators by just reading their content.
   - AdSense - Earn revenue by displaying ads.
8. Analytics - Google analytics can help you learn how visitors interact with your website and content.
9. Fully responsive.
10. 100 SEO score.

## Before we start

- This blog has not been thoroughly tested.
- Some pages may not be responsive on devices with low screen resolution.
- If you have any questions about the setup, please start a discussion [here](https://github.com/RakeshPotnuru/Blog/discussions/categories/q-a) or look for answers in past discussions.

## Prerequisites
- As long as you don't want to make changes to the source code, you only need a little development experience (able to follow the steps provided in this article) to set up this blog.

## Let's get started

## Hygraph (Previously GraphCMS) project set up

- Create or sign in to your [Hygraph](https://hygraph.com/) account.
- Click the button below to clone my Hygraph project.

[![Clone project](https://hygraph.com/button)](https://app.hygraph.com/clone/13f9db967a6640af82423ad6f304025d?name=itsrakesh-blog)

- Create or sign in to your [Cloudinary](https://cloudinary.com/) account.
- Follow [this](https://hygraph.com/blog/integrate-cloudinary-with-hygraph-ui-extensions) guide to installing the Cloudinary UI extension in Hygraph.

You can now start adding content.


## Giscus set up

[Giscus](https://giscus.app/) is a comment system powered by GitHub Discussions. 

- Read [this](https://www.freecodecamp.org/news/github-discussions-as-chat-system/) article written by me on freeCodeCamp News to set up giscus. (Read till section "How to Integrate giscus in Your Blog")
- Copy the generated `script` tag and note it somewhere.
- Open the `giscus.json` file and replace my site URL with your site URL.

## Google Analytics set up

- Create or sign in to your [Google Analytics](https://analytics.google.com/) account.
- Create a GA4 property for your blog.
- Copy your property measurement id and note it somewhere.

## Coil set up

[Coil](https://coil.com/) is a web monetization provider. You can sign up on coil as a creator and add the web monetization tag to your site.

- Create or sign in to your [Coil](https://coil.com/) account.
- Connect your Uphold account to the coil to receive payouts on your Uphold wallet.
- Navigate to "Settings" -> "Payouts".
- Copy "PAYMENT POINTER" and note it. Your payment pointer should be something like this.

```bash
$ilp.uphold.com/82eq8NKY4NEZ
```

## BeyondWords set up
If you want to add audio articles to your posts, then create a BeyondWords account otherwise just skip this section.

- Create or sign in to your [BeyondWords](https://beyondwords.io/) account.
- Create a project and start creating audios.
- You can get an audio Id from the "Shareable URL".

```bash
https://audio.beyondwords.io/play/AUDIO_ID
```

## Ko-fi set up

[Ko-fi](https://ko-fi.com/) is a platform that enables you to accept donations, memberships, and sales from your support. It has a few more benefits over BuyMeACoffee.

- Create or sign in to your [ko-fi](https://ko-fi.com/) account.
- Navigate to [Buttons & Widgets](https://ko-fi.com/manage/widgets) page -> Click on "Ko-fi Donation Widget" -> Select "Donation Panel".
- Copy the embed URL and note it somewhere. The URL should look like this.

```bash
https://ko-fi.com/YOUR_KOFI_USERNAME/?hidefeed=true&widget=true&embed=true&preview=true
```

## Newsletter set up
I use substack as my newsletter service. You can use whichever service you wish. Put the URL in this env variable.

```bash
NEXT_PUBLIC_SUBSTACK_URL=
```

## Frontend set up

Now that we have backend CMS ready. Let's set up the front end.

- Open [Blog GitHub repo](https://github.com/RakeshPotnuru/Blog).
- Star it ⭐.
- Fork the repo.
- Clone your forked repo.

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

- Open the cloned repo in your code editor or IDE.
- Open the `public` folder,
  - Replace my icons with your icons. Use [this](https://www.favicon-generator.org/) to generate icons.
  - Open the `manifest.json` file and replace my info with your info.
- Open [`config/site.config.js`](https://github.com/RakeshPotnuru/Blog/blob/main/config/site.config.js) file and replace my info with your info. (_Don't worry if you cannot fill in some details. We will cover them later in this article._)
- Push changes to your GitHub repo.

## Deploy to Netlify

- Create or sign in to your [Netlify](https://www.netlify.com/) account.
- Click on "Add new site" -> Select "Import an existing project".
- Select "GitHub" and authorize Netlify to connect to GitHub.
- Search for your repo and select it.
- In the site settings, leave everything default and click the "Show advanced" button.
- Click on "New variable" and refer to the `.env.example` file. You have to add all the env variables in your Netlify project.
- After adding all the variables, click "Deploy site".
- Add a custom domain or just go with the Netlify subdomain.

## Google AdSense set up

- Create or sign in to your [Google AdSense](https://www.google.com/adsense/start/) account.
- Add your site by clicking "Add Site".
- Wait a day or two to get your site accepted.

If accepted, follow these steps to create ad units.

- Navigate to "Settings" -> "Account information" -> copy "Publisher ID" and paste it in `site.config.js` file.
- Go to "Ads" -> "By ad unit".
- Click on "Display ad". Name your ad "Page top Ad" -> Click "Create". Copy `data-ad-slot` value and paste in `site.config.js` file.
- Same as this, create "In-feed Ad" and add slot number in `site.config.js`.
- Follow [this](https://support.google.com/adsense/answer/7532444?hl=en) to add `ads.txt` file in `public` folder. If one already exists, please replace it with your `ads.txt` file.

---

## Contribute

Like to add a feature? Found a bug? or Want to improve the codebase? - Open an [issue](https://github.com/RakeshPotnuru/Blog/issues).

---

That's it! If you are facing any trouble setting up, please start a [discussion](https://github.com/RakeshPotnuru/Blog/discussions/categories/q-a), I will be there to assist you.

---

Share your blog link in the comments 👇. Follow for more 💖.