How to Use GitHub v0

Hi, I'm Pauline from Versile and in today's video I'm going to show you how to use Vzero's Git integration to get your ideas from prototype to production. So in this video we'll be building a blog, connecting it to GitHub, experimenting with new features safely using branches, and then deploying it live to the web. By the end, you should understand the complete workflow. So let's dive in. Okay, so we're in V 0. I'm going to start by building a simple blog. I'll just describe what I want in the chat. So, what we'll do here is create a modern blog page with a header featured post and a grid of [music] recent posts. Pro tip, you can also change the model [music] from here. So, we have multiple models. We got Mini, Pro, Max, uh, and Opus as well. So, you can change that as you're as you're chatting. Nice. I like it. So, Vzer's generated [music] this clean blog layout for me. Let's make a few adjustments to personalize it a little bit. So let us make the oh if I can spell make the header background gradient [music] from blue to purple. Perfect. Now I have a blog that I'm happy with. But right now this only exists in V 0. I need to save my work somewhere more permanent. Eventually, I want to deploy this live and that's where this git integration comes in. So, we'll just head over here to the sidebar where you can see the GitHub logo and git connection. So, since this is my first time connecting this project, Vzero asks me to connect my GitHub account and name my repository. So, what we'll do here is we'll go ahead and connect. So, the scope is my account. I'm in all of these accounts, but for now, I'll just use my personal Pauline account. I'm happy with this repository name. So, we'll just leave it like that and go ahead and create the repository. [music] And just like that, Vzero is creating the repository and pushing all of my code to GitHub. Great. Now, let's see what actually happens in GitHub. So, we can have a look. Look at all of this code that Vzero generated. It's properly structured with all the configuration files I need. My components are there, the app directory, and everything is organized and ready to work with. So, you may be thinking, what did I actually gain by connecting to GitHub? So, first, my code is safely backed up. If anything went wrong, I have my entire history. Second, I can experiment more freely now without worrying about breaking changes. We'll see this in action in a moment with branches. And third, I have a path to production. I can deploy this blog live. Okay, let's see this in action by adding a new feature. Let's say I wanted to add a about the author section, but I'm not 100% sure how I want it to look yet. I don't want to mess this version. So, this is where branches come in. A branch is like a parallel version of your project where you can experiment safely. Okay. So, what we'll do here is we will duplicate this branch. Let's call this branch author bio. So notice up here I'm now on the author bio branch. My main [music] branch is still exactly as I left it untouched. So now we can freely experiment here. So we want to add that author bio. So we'll just ask V0 to add an author bio section. Okay. Amazing. It's added this new author bio component. So now let's just do a quick refresh in the preview here. We should be able to see where it's added it. There you go. There's a new about the author section. So just a reminder, we've made the changes in this branch, the author bio branch, which means that no changes have been made to the main branch at all. So this branch is free for us to experiment. So, if we wanted to change any more of the text, the style, then we can do so freely here. Actually, looking at this, I think the author bio should be a bit more compact. Let me adjust it while I'm still in this branch just to show you. Make the author bio more compact. Okay, amazing. Uh, you can see that V0 has made the author section more compact and it says overall reducing the padding. It looks much better. I'm super happy with that. So, we can go ahead and open a PR and push these changes. See how this workflow protects my main branch. I can iterate as many times I want in this experiment branch, but main stays stable until I'm completely satisfied. All right, I'm happy with the author bio. Now, it's time to merge this into my main branch. I'll create a pull request. So a pull request or a PR it's is basically asking to pull my changes from the author bio branch into the main branch. It's the formal way to propose changes. So we'll just open a PR directly here and we'll just click here to the PR itself. And this just takes us to GitHub. And as you can see, we've got those two commits that we made on [music] V0. So creating the author bio and also making it more compact. And if we go here to files changes, you can review the exact code that V0 has changed. In a team setting, this is where your colleagues would review your code and leave comments. For solo projects, this is your final check to make sure that everything looks good. I'm satisfied with these changes. So I'll merge this pull request. So let's head back to V0 here. And as you can see, we can merge the PR. So we'll just merge that. And if we go back to GitHub, you can see that this has been merged. So this feature is now officially part of our main codebase. So now that's all live. We can also go on to settings here and look at [music] the Versel project and view on Versel. As you can see here, our deployment went through. And if we click here into our domains, there it is. My blog is live on the internet. You can see that we've got our header with the gradient, the blog post, and if I scroll down here, our author bio. So basically everything I built in v 0ero safely merged through git and now deployed and accessible to the world. This is the same workflow professional development teams use every single day. So you're building in v 0ero managing your code with git and then deploying with versal a complete production workflow. I hope this helps you understand how to use vzero's git integration more confidently. Try this workflow yourself. Start with something small. Create a branch. experiment and deploy. If you have any questions, come find us in our community space at community.versal.com. Thank you so much for watching.