00:00:00>> Hi, I'm Pauline from Versaile and in today's video,
00:00:03I'm going to show you how to use
00:00:05v0's Git integration to get
00:00:08your ideas from prototype to production.
00:00:11So in this video,
00:00:12we'll be building a blog,
00:00:14connecting it to GitHub,
00:00:15experimenting with new features safely using
00:00:18branches and then deploying it live to the web.
00:00:21By the end, you should understand the complete workflow.
00:00:25So let's dive in.
00:00:27Okay, so we're in v0.
00:00:30I'm going to start by building a simple blog.
00:00:33I'll just describe what I want in the chat.
00:00:35So what we'll do here is create
00:00:37a modern blog page with
00:00:42a header featured post and a grid of recent posts.
00:00:53Pro tip, you can also change the model from here.
00:00:57So we have multiple models.
00:00:59We've got Mini, Pro, Max,
00:01:01and Opus as well.
00:01:03So you can change that as you're chatting.
00:01:07Nice, I like it.
00:01:09So v0's generated this clean blog layout for me.
00:01:13Let's make a few adjustments to personalize it a little bit.
00:01:17So let us make the,
00:01:21oh, if I can spell,
00:01:23make the header background gradient from blue to purple.
00:01:32Perfect. Now I have a blog that I'm happy with.
00:01:36But right now, this only exists in v0.
00:01:40I need to save my work somewhere more permanent.
00:01:43Eventually, I want to deploy this live,
00:01:45and that's where this Git integration comes in.
00:01:48So we'll just head over here to the sidebar
00:01:52where you can see the GitHub logo and Git connection.
00:01:56So since this is my first time connecting this project,
00:01:59v0 asks me to connect my GitHub account and name my repository.
00:02:04So what we'll do here is we'll go ahead and connect.
00:02:06So the scope is my account.
00:02:08I'm in all of these accounts,
00:02:10but for now, I'll just use my personal Pauline account.
00:02:13I'm happy with this repository name,
00:02:15so we'll just leave it like that and go
00:02:16ahead and create the repository.
00:02:18Just like that, v0 is creating
00:02:21the repository and pushing all of my codes to GitHub.
00:02:24Great. Now, let's see what actually happens in GitHub.
00:02:29So we can have a look.
00:02:31Look at all of this code that v0 generated.
00:02:34It's properly structured with all the configuration files I need.
00:02:38My components are there,
00:02:40the app directory, and
00:02:41everything is organized and ready to work with.
00:02:43So you may be thinking, "What did I actually gain by connecting to GitHub?"
00:02:48So first, my code is safely backed up.
00:02:51If anything went wrong,
00:02:53I have my entire history.
00:02:55Second, I can experiment more
00:02:57freely now without worrying about breaking changes.
00:03:00We'll see this in action in a moment with branches,
00:03:02and third, I have a path to production.
00:03:04I can deploy this blog live.
00:03:06Okay, let's see this in action by adding a new feature.
00:03:09Let's say I wanted to add a About the Author section,
00:03:14but I'm not 100 percent sure how I want it to look yet.
00:03:17I don't want to miss this version.
00:03:19So this is where branches come in.
00:03:21A branch is like a parallel version of
00:03:24your project where you can experiment safely.
00:03:27Okay. So what we'll do here is we will duplicate this branch.
00:03:31Let's call this branch author bio.
00:03:36So notice up here,
00:03:38I'm now on the author bio branch.
00:03:41My main branch is still exactly as I left it untouched.
00:03:45So now we can freely experiment here.
00:03:48So we want to add that author bio.
00:03:50So we'll just ask v0 to add an author bio section.
00:03:56Okay, amazing.
00:03:59It's added this new author bio component.
00:04:02So now let's just do a quick refresh in the preview here.
00:04:06We should be able to see where it added it.
00:04:10There you go. There's a new About the Author section.
00:04:13So just a reminder,
00:04:15we've made the changes in this branch,
00:04:18the author bio branch,
00:04:19which means that no changes
00:04:22have been made to the main branch at all.
00:04:24So this branch is free for us to experiment.
00:04:27So if we wanted to change any more of the text,
00:04:29the style, then we can do so freely here.
00:04:33Actually looking at this,
00:04:35I think the author bio should be a bit more compact.
00:04:38Let me adjust it while I'm still in this branch,
00:04:40just to show you.
00:04:41Make the author bio more compact.
00:04:46Okay, amazing.
00:04:48You can see that v0 has made the author section more compact
00:04:52and it says overall reducing the padding.
00:04:56It looks much better.
00:04:57I'm super happy with that.
00:04:58So we can go ahead and open a PR and push these changes.
00:05:03See how this workflow protects my main branch.
00:05:06I can iterate as many times I want in this experiment branch,
00:05:10but main stays stable until I'm completely satisfied.
00:05:13All right, I'm happy with the author bio now.
00:05:16It's time to merge this into my main branch.
00:05:18I'll create a pull request.
00:05:20So a pull request or a PR is basically asking
00:05:25to pull my changes from the author bio branch
00:05:28into the main branch.
00:05:30It's the formal way to propose changes.
00:05:32So we'll just open a PR directly here.
00:05:35And we'll just click here to the PR itself.
00:05:44And this just takes us to GitHub.
00:05:46And as you can see,
00:05:47we've got those two commits that we made on v0.
00:05:51So creating the author bio and also making it more compact.
00:05:56And if we go here to files changes,
00:05:58you can review the exact code that v0 has changed.
00:06:03In a team setting,
00:06:04this is where your colleagues would review your code
00:06:07and leave comments.
00:06:08For solo projects,
00:06:09this is your final check to make sure
00:06:11that everything looks good.
00:06:13I'm satisfied with these changes.
00:06:14So I'll merge this pull request.
00:06:17So let's head back to v0 here.
00:06:20And as you can see, we can merge the PR.
00:06:23So we'll just merge that.
00:06:29And if we go back to GitHub,
00:06:31you can see that this has been merged.
00:06:34So this feature is now officially part of our main code base.
00:06:38So now that's all live.
00:06:39We can also go onto settings here
00:06:42and look at the Vercel project and view on Vercel.
00:06:46As you can see here, our deployment went through.
00:06:51And if we click here into our domains, there it is.
00:06:55My blog is live on the internet.
00:06:57You can see that we've got our header with the gradient,
00:07:00the blog posts.
00:07:01And if I scroll down here, our author bio.
00:07:06Basically everything I built in v0
00:07:08safely merged through Git
00:07:10and now deployed and accessible to the world.
00:07:13This is the same workflow
00:07:14professional development teams use every single day.
00:07:17So you're building in v0, managing your code with Git
00:07:20and then deploying with Vercel,
00:07:22a complete production workflow.
00:07:25I hope this helps you understand
00:07:27how to use v0's Git integration more confidently.
00:07:30Try this workflow yourself.
00:07:32Start with something small, create a branch,
00:07:34experiment and deploy.
00:07:36If you have any questions,
00:07:38come find us in our community space at community.vercel.com.
00:07:41Thank you so much for watching.