I published an article 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. 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
- Posts - Articles/Tutorials/Guides
- Snippets - Mini blogs
- 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.
- Audio posts - Add audio articles
- Comment system - A GitHub-powered comment system
- Ko-fi - The embed contribution widget allows your fans to donate to you without leaving your website.
- Monetization,
- Web monetization - People can help creators by just reading their content.
- AdSense - Earn revenue by displaying ads.
- Analytics - Google analytics can help you learn how visitors interact with your website and content.
- Fully responsive.
- 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 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 account.
- Click the button below to clone my Hygraph project.
- Create or sign in to your Cloudinary account.
- Follow this guide to installing the Cloudinary UI extension in Hygraph.
You can now start adding content.
Giscus set up
Giscus is a comment system powered by GitHub Discussions.
- Read this article written by me on freeCodeCamp News to set up giscus. (Read till section "How to Integrate giscus in Your Blog")
- Copy the generated
scripttag and note it somewhere. - Open the
giscus.jsonfile and replace my site URL with your site URL.
Google Analytics set up
- Create or sign in to your Google Analytics account.
- Create a GA4 property for your blog.
- Copy your property measurement id and note it somewhere.
Coil set up
Coil 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 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.
$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 account.
- Create a project and start creating audios.
- You can get an audio Id from the "Shareable URL".
https://audio.beyondwords.io/play/AUDIO_ID
Ko-fi set up
Ko-fi 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 account.
- Navigate to Buttons & 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.
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.
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.
- Star it ⭐.
- Fork the repo.
- Clone your forked repo.
git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git
- Open the cloned repo in your code editor or IDE.
- Open the
publicfolder,- Replace my icons with your icons. Use this to generate icons.
- Open the
manifest.jsonfile and replace my info with your info.
- Open
config/site.config.jsfile 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 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.examplefile. 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 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.jsfile. - Go to "Ads" -> "By ad unit".
- Click on "Display ad". Name your ad "Page top Ad" -> Click "Create". Copy
data-ad-slotvalue and paste insite.config.jsfile. - Same as this, create "In-feed Ad" and add slot number in
site.config.js. - Follow this to add
ads.txtfile inpublicfolder. If one already exists, please replace it with yourads.txtfile.
Contribute
Like to add a feature? Found a bug? or Want to improve the codebase? - Open an issue.
That's it! If you are facing any trouble setting up, please start a discussion, I will be there to assist you.
Share your blog link in the comments 👇. Follow for more 💖.