My OpenSource Blog that You Can Use Right Now
Tags: nextjs, react, javascript, programming
Published: 2023-12-31 10:01:53

To read more articles like this, [visit my blog](https://www.mdfaisal.com/blog)


Creating my personal website was a long-time goal for me. Finally, I created [my personal website](https://www.mohammadfaisal.dev/) with a technical blog which you can visit [here](https://www.mohammadfaisal.dev/).

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 you will get?

Here is an example home page for the blog. The screenshot is taken from my personal website.

![Demo](https://cdn-images-1.medium.com/max/6780/1*n-uRYibc1dxPXieug3JILg.png)

### Live Demo

Or you can visit it yourself. ;)

[**Blog | Mohammad Faisal**](https://www.mohammadfaisal.dev/blog)

## Features

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

* **SEO** setup

* **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.

[**GitHub - Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template: NextJS+TailwindCSS Blog…**](https://github.com/Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template)

If you prefer the video version I have made a youtube video for this as well.

https://youtu.be/lEljvKRtU4c

Or else you can follow the instructions below.

You will go there and click the `Use this template` button to make it your own

![Use this template](https://cdn-images-1.medium.com/max/3390/1*JXwwO7rioB-6jYRxvbdfWA.png)

This will automatically kick off an Action that will build the website and add to a new branch named `gh-pages` .

### Publish

From the `settings` panel on your repository you will go to the `pages` section and select the source as `gh-pages` .

![Publish it](https://cdn-images-1.medium.com/max/3390/1*2FWlB3obkOiWpLWp5hj7Ig.png)

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.

## Technical Discussion

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.

https://youtu.be/CmDVpgh14k4

Or let’s talk a bit about them here as well

### Markdown Support

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"

banner: "/images/posts/add-custom-fonts-to-nextjs/banner.jpeg"

tags: ["NextJS"]

date: 1 January 2022

published: true
---
```

And that package will automatically read the data and return an object for you. [Here is how I used it](https://github.com/Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template/blob/master/lib/blog-api.ts)

### Code highlight

For Code highlighting, I am using [Prism.js](https://prismjs.com/). First I am loading the styles file inside the `_app.tsx` file and inside the [CodeBlock](https://github.com/Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template/blob/master/components/code-block/index.tsx) component, I am loading the styling that gives us beautiful syntax highlights.

![Syntax Highlight](https://cdn-images-1.medium.com/max/2000/1*I-sHHZ_wRmEhrjIJNWrwXQ.png)

### Dark Mode

For dark mode, I am using [next-themes](https://www.npmjs.com/package/next-themes) It exports a function called `setTheme` which I am using inside the `Header` component to toggle the theme.

### Google Analytics

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

[**Add Google Analytics with NextJS | Mohammad Faisal**](https://www.mohammadfaisal.dev/blog/add-google-analytics-to-nextjs)

### SEO Setup

We are using [next-seo](https://www.npmjs.com/package/next-seo) package for adding all the required tags for the site. Here are the details

[**Improve SEO in NextJS | Mohammad Faisal**](https://www.mohammadfaisal.dev/blog/improve-seo-in-nextjs)

Also, we are generating the `sitemap.xml` file for our blogs as well. You can check the following article for that.

[**Create Sitemap in NextJS | Mohammad Faisal**](https://www.mohammadfaisal.dev/blog/create-sitemap-in-nextjs)

### Tailwind Typography

I really really liked tailwind typography. It made my life so much easier as I am not that skilled in UI design. It works like magic and makes everything really beautiful. [Here is a video](https://www.youtube.com/watch?v=IZZ5uwOkrAA) where I described how I used it.

## Conclusion

There you go. Please star the project if you liked it. Also, feel free to reach out to me on my [LinkedIn](https://www.linkedin.com/in/56faisal/) or my [personal website](https://www.mohammadfaisal.dev/) if you have any questions or confusion.

Have a great day! :D

### Further Reading

[**How to build a composable blog**](https://bit.cloud/blog/how-to-build-a-composable-blog-l1jkl9f4)



**Have something to say? Get in touch with me via [LinkedIn](https://www.linkedin.com/in/56faisal/) or [Personal Website](https://www.mdfaisal.com/)**