My OpenSource Blog That You Can Use Right Now
Today, I have open-sourced the blog part of my personal website. I will show you how to use it and discuss some technical details.
What will you get?
Here is an example home page for the blog. The screenshot is taken from my personal website.
Or you can visit it yourself. ;)
The blog is technically very rich. But the most important features are.
Markdown support for blogs
Syntax highlight with Prism.js
Github pages auto-deployment support
Google Analytics Integration
Tailwind CSS+Typography integration
Dark mode support with next-themes
Let’s make it your own
Let’s see how you can use it. Below is the repository that you will need.
If you prefer the video version, I have also made a YouTube video for this.
Otherwise, you can follow the instructions below.
You will go there and click the
Use this template button to make it your own
This will automatically kick off an action to build the website and add it to a new branch named
settings panel on your repository you will go to the
pages section and select the source as
You will see the live URL there.
Customize the content
If you want to customize it you can follow the
Readme file on the repository. Basically, the idea is to edit the
.env.local file to update the information with your own information.
Customize the Logo
Also inside the
/public folder, there are images that you can customize to add your own flavor.
Now let’s talk about different technical aspects of the blog. If you prefer the video version you can watch the following video that I made.
Or let’s talk a bit about them here as well
I have used a library named
gray-matter to load metadata from the markdown files.
You can add the meta data in the markdown file like the following
title: "Add Custom Fonts with NextJS"
description: "Create beautiful looking websites in minutes"
date: 1 January 2022
And that package will automatically read the data and return an object for you. Here is how I used it
For Code highlighting, I am using Prism.js. First I am loading the styles file inside the
_app.tsx file and inside the CodeBlock component, I am loading the styling that gives us beautiful syntax highlights.
For dark mode, I am using next-themes It exports a function called
setTheme which I am using inside the
Header component to toggle the theme.
Google Analytics is very useful for any production application. You can just add your own google analytics key to the
.env.local file and everything will work for you. You can check the below article for details
We are using next-seo package for adding all the required tags for the site. Here are the details
Also, we are generating the
sitemap.xml file for our blogs as well. You can check the following article for that.
I liked tailwind typography. It made my life so much easier as I am not skilled in UI design. It works like magic and makes everything really beautiful. Here is a video where I described how I used it.
Have a great day! :D
Have something to say? Get in touch with me via LinkedIn