How to Create a Blog Using Vercel: Step-by-Step Guide for Next.js Deployment

[0:00]This is a tutorial on how to create a blog using a Versel template. So you go to the Versel website and login or sign up. I've chosen to log in here because I've already created an account. Once you log in, there is an option where you can upgrade to a pro option. But to create our blog, we do not need to create uh or we do not have to upgrade to a payment or paid land to create the blog. So now we go to our dashboard section. This is the overview when you log in. You go to add new and you click on project. Once you click on project,

[0:42]There are multiple templates that are present here. So since we want to create a blog, we click on browse all templates. When we once we click on browse all templates, we have all these options that are present to us. Now in the use case since I want to create a blog, I will click blog here and these are the different templates and boiler codes that are present and that I can use. In this guide, I have used this particular template. You can choose to use any different template. So you click on blog starter kit. This is the template that I've chose to use. You can see how this looks like by

[1:25]Clicking on view demo. This is how my blog looks like. And as you can see, this blog has three different stories. For example, dynamic routing and static generation, learn how to pre-render pages, preview mode for static generation and more. So, I will click on dynamic routing and static generation just to give you a gest on how this particular blog looks like. This is the content that is given in this particular template. Now my aim is to change this content and change it to something that I need to customize to my template. So what I would do, I want to use this template. So I would go back to my

[2:15]Versel and I would click deploy. Once you click deploy, you have an option to connect your versel to a GitHub repository. It is not necessary that you have to connect your versel to a GitHub repository, but it is recommended because every time you make a change in your post or a blog and as soon as you comment or add it to your GitHub repository, the blog is automatically linked to your GitHub repository and hence the blog is automatically updated and any change that is made in your GitHub repository is shown in your application. So I chose here to connect my personal GitHub repository. But if you try to uh connect

[3:05]Your organization, you will not be able to do you will be able to do that. But you it would be a paid plan which is $20 a month plan. You do not require a paid plan for the blog creation in order to pro complete this assignment successfully. And then you can hit create and it would I already have a repository named this because I already created the blog. So I'm going to change the name here. You can change it to anything that you want and you can hit create. Once you click create the deployment would be in process and everything would be created. And then you can verify this

[3:49]By going to the GitHub repository that you connected. I'm going to my GitHub repository. And this is the blog that I have created. Now I want to make changes to my GitHub repository to this particular folders and directories to make changes to my um log. So the easiest way to do this is you can do it from the GitHub UI. The easiest way to do it is using and the easiest as well as the recommended way of doing this is by cloning your repository into your personal desktop and then doing it. So there are three options here to clone. I'm going to clone using the github.com

[4:34]Uh https mcca. So I will copy this and then go to my terminal and click get loan and enter this particular https. The exact command and everything is given in the guide which is present under the appendix section which is and the guide is named as versel creation using for blockage. Now we will move on uh uh to what happens after Now we will move on to the section where after the cloning of the repository is done. Once the clone the repository is cloned all these directories would be present in your desktop in the same format and then this is where I cloned my repository. So I would go to and

[5:29]These are as you can see here a post section has these three files which is a markdown file which we have been following through the course. Now as you can see in this particular blog template that I used there are three different pages that would go to if I click on this it would go on one page if I go to click this it will go to another page and so on and so forth. So there are three which is why under the post section we have three markdown files. Now I'm going to change each of the content of these three markdown files into a blog that I want to create.

[6:09]I want to create a blog about food and recipes. So I can choose to rename this or I can create a new file by create by writing add new create new file and more. But I choose to edit this particular markdown file. So I can go to dynamic routing. I can this is the markdown format that I have given. I can say this is the recipe. This is my recipe. This is my cover image that I want to use for the recipe. This these are my ingredients and these are the instructions. Similarly, as you can see here, the picture is already present in the assets

[6:51]Blog directory. So you in order to post an image or change the image that is present in this blog, this particular image I wanted to change into the recipe format or the recipe or the image of the food that I created. So for that I can what I can do is I can go to the public section. Under public you can go to assets. Under assets you can go to blogs. And then under dynamic routing for the first for this particular story the image was stored here. For the next one it was stored here. And for the third story the image was stored here. So you

[7:35]Can choose to I chose to add images and keep the ones that already were present in the template and then you can go to code and here you can change the name of the image that you used. You can make any changes that you need to and so on and so forth. Some other changes that you can also look into is the src. Under src if you go to the glo the layout.tsx TSX I have mentioned that the tit this is the title this is the t description and these are the changes that would come up here the blog name the if you want to change this if you

[8:17]Want to change this these are the changes that come under the tsx file you can go through them and explore more so I have made these changes and once I committed these changes is I was able to commit these changes since my repository is automatically connected to Versel. If you see as soon as I was able to do this commit here, I got a tick mark which means success which means Versel completed the deployment successfully without any issues. I can change. Now if you want to see more about the deployment and the logs about it, you can click on that section in GitHub or you can go to your versal homepage and

[9:06]Here under the deployment section you can see this is my the versal app link that it created in gem me and it is connected to my GitHub project and any changes to the main it will reflect to my GitHub and in the application. So here under logs I can see what are the errors that were present. Since I had no errors when I was deploying I did not get any issues here. So this is the final log that I created. I created three recipes and if I click on these it will take me to the ingredients, the instructions, the tips, the variations. This is how you can create a blog using

[9:55]Versat. Thank you.