DEV Community

Anurag Verma
Anurag Verma

Posted on

Created my own personalblog + portfolio website

First have a look at my blog + portfolio website and let me know your thoughts Link

A personal blog or portfolio website is a great way to showcase your work, share your thoughts and ideas, and connect with others. If you're looking to create your own personal blog or portfolio website, Vercel is a great option. Vercel is a cloud platform that makes it easy to deploy and host your website. It also offers a variety of templates that you can use to get started quickly.

In this tutorial, I'll show you how to create your own personal blog + portfolio website using Vercel templates. I'll also show you how to add your own features like a blog views counter and comments using GitHub issues.

Step 1: Choose a Vercel Template

The first step is to choose a Vercel template. Vercel offers a variety of templates for personal blogs and portfolio websites. You can browse the templates by visiting the Vercel website.

Once you've chosen a template, you can click on the "Use Template" button to start creating your website.

Step 2: Connect Your GitHub Account

The next step is to connect your GitHub account. This will allow you to deploy your website to Vercel.

To connect your GitHub account, click on the "Connect GitHub" button. Then, enter your GitHub username and password.

Step 3: Deploy Your Website

Once you've connected your GitHub account, you can deploy your website. To do this, click on the "Deploy" button.

Vercel will then deploy your website to the cloud. This process may take a few minutes.

Step 4: Add Your Own Features

Once your website has been deployed, you can add your own features. In this tutorial, I'll show you how to add a blog views counter and comments using GitHub issues.

Adding a Blog Views Counter

To add a blog views counter to your website, you can use the Vercel Counter widget. The Counter widget is a simple way to display the number of views your blog posts have received.

To add the Counter widget to your website, click on the "Add Widget" button. Then, search for "Counter" and click on the "Counter" widget.

The Counter widget will be added to your website. You can then configure the widget by clicking on the "Configure" button.

In the Configure dialog, you can specify the following options:

  • Title: The title of the Counter widget.
  • Count: The number of views to display.
  • Style: The style of the Counter widget. Once you've configured the Counter widget, click on the "Save" button.

Adding Comments Using GitHub Issues

To add comments to your blog posts, you can use the Vercel Comments widget. The Comments widget allows you to display comments from GitHub issues on your website.

To add the Comments widget to your website, click on the "Add Widget" button. Then, search for "Comments" and click on the "Comments" widget.

The Comments widget will be added to your website. You can then configure the widget by clicking on the "Configure" button.

In the Configure dialog, you can specify the following options:

  • Repository: The repository where the GitHub issues are located.
  • Issue Number: The issue number to display comments from.
  • Style: The style of the Comments widget. Once you've configured the Comments widget, click on the "Save" button.

Conclusion

In this tutorial, I showed you how to create your own personal blog + portfolio website using Vercel templates. I also showed you how to add your own features like a blog views counter and comments using GitHub issues.

Top comments (3)

Collapse
 
fpsd profile image
Francesco

Nice idea to use GitHub issues to enable comments!
I'll try to make something similar for my website, but using GitLab πŸ™‚

Collapse
 
merudra754 profile image
Rudra Pratap

Wow! Amazing portfolio!

Collapse
 
anurag629 profile image
Anurag Verma

Thanks