Jamstack Explorers

Split testing with Netlify with Phil Hawksworth

Creating a new Netlify Site with a git repo

There are a number of ways to create a new site with Netlify, perhaps the most powerful is to create a site from a git repository so that you can enjoy a number of powerful workflows and a seamless continuous deployment pipeline.

This video starts at the very beginning, and walks through how to create a new Netlify site from a code repository hosted on GitHub.

[00:00:00] There are a number of different ways that you can deploy a site to Netlify. The one that we're going to look at now is deploying a site from Git. That means having your code for your site in a Git repository that you connect with Netlify, so that when you make changes to your Git repository, all of your changes automatically find their way to your website.

[00:00:20] For this, we're going to need a few things. Since we're starting right at the very beginning of deploying a site, let's make sure we have a few things first. You're going to need a Netlify account. You can go to netlify.com, click on this Get Started button, and you'll have a chance to sign up. You can do that by authenticating with GitHub, GitLab, Bitbucket, a bunch of different ways where you can create an account using your e-mail account. I'd recommend using a Git provider for this, since we're also going to be connecting to a Git provider for this lesson as well. You can do that. You can go off and get a free account either with GitHub, if you prefer-- You may already have one of these. You could do the same thing with GitLab or, indeed, Bitbucket. There are many options available to you, but you're going to need somewhere to have access to a Git repository and, of course, a Netlify account before we get started. Now, once we have those things, let's look at an example website that we're going to deploy.

[00:01:20] I've prepared one already here just for the sake of the example. It's the Vaporium, which is a fictional e-commerce site-- only one product available so far, and we'll get to that in a moment. Let's take a quick look at this repository before we then go on and deploy it to Netlify.

[00:01:40] It's a very simple repo. I have a dist folder, which is where my build assets are going to end up. This will be empty just at the moment. I have a source folder, which is where all of my source assets live. This simple example site just has an index HTML file, a couple of image resources, and some styles in a CSS file. Then, we also have a simple build script, because what I'd like to do is emulate running a build script every time we make a change to our repository. In fact, what we have here is a build script that will run, which all it does is it copies all of our source assets over to our dist folder, but this emulates the process that we might have in a more complex build structure.

[00:02:30] Let's head over to netlify.com now that we've created our accounts. This is our overview page. When you come to this for the first time, you'll have an empty list of sites, but you'll also have a button up here to create a new site from Git. You'll also have the exact same button over in your site's overview. Again, if you're doing this for the first time, this will be empty rather than having a list of the existing sites, but this is the button we're interested in, this new site from Git.

I'm just going to click that, and what's going to happen is I'll get the chance to choose which Git provider I'm connecting to.

[00:03:10] You can go deeper into this and have self-hosted Git providers as well, but for the purposes of this demo, I'm just going to use GitHub, because that's the service I tend to use the most. Now, I can search for the project that I've created, and there we have it. The Vapourium has been detected, as I've just searched through my available repositories. Now,

[00:03:40] I'm going to do a simple bit of configuration. Now, I can choose which team I want this project to be associated with. Again, if you're just starting out, you'll likely just have one team that'll just be yourself. We've detected-- Netlify has detected already which is the production or the default branch in that repository, and it's set that as the branch to deploy. Again, we can configure this if we have multiple branches, and we'll come back to that in a later lesson. Netlify has also picked up some basic build settings. It's figured out which build command to run if there is one, and it's determined which directory to publish once the build is finished, but here, we haven't actually anything to do. We just simply press the deploy button. What Netlify is now doing is it has created a new site within Netlify.

[00:04:30] It's connected back to the Git repository that we've specified, and it's kicked off a build right away. Actually, if we go and click on our deploy, we can see- in fact, I wasn't fast enough- this has happened already, but we get a little summary of what the deploy did. We can see the deploy log. Effectively, this was installing any dependencies. We didn't have any dependencies for this particular project. It should have been quick.

[00:05:00] It's run the build, which was-- Here we are here. It's our command here just to copy the files from one place to another.Again, this may be a much more complex build if your project needs that. It's propagated the assets at the end of that build to Netlify's Edge CDN network, and then it's made it available, too. I can now go and see the results of that build, and there we are. Here's our site, which is the code that was originally in our repository now bounds to Netlify and connected and distributed to the CDN. Here we have the Vapourium. We just got one product in here at the moment.

[00:05:40] It's $300 for a mug. You've got to really want it, but here we are. Here's the site deployed. Let's look at a couple of other details now that we've done that, just to see some of the advantages of connecting a Git repository to drive your Netlify site. I can do that by looking at some of the deploy settings, and we can see-- Let's just look at some of the summaries here. The build settings for the site-- You can see the repository this is connected to.

[00:06:10] Is great having this here so that you can trace back the source of truth for any of your sites that you have running. There are a few other things in here-- the build command, we mentioned already this NPM run build command that we've set in our package to Jason, the correct directory to publish, and a few other bits and pieces along the way. You can edit all of these settings in here. What I would like to do, though, is I'd just like to make a change to the Git repository just to show how these things are now stitched together.

[00:06:40] Let's make a simple change. I could clone this project down to my environment and make a change there and push it to GitHub, but what I'll do is I'll be a bit lazy. I'll make the change right here in the repository instead, right in GitHub. I'm going to make a little edit to the CSS file. Perhaps, we'll try a different color for all of the links and accents around the page. Let's turn this to a nice hot pink.

[00:07:10] We'll commit that directly to the main branch, and there we are. We should see-- In GitHub, yes, we've got another commit there. Now, since we've used this Git repository as the source of truth for our site, if we go back over now to Netlify and we go to our deploys tab, we can see that Netlify is automatically picked up this change. It started building. We can see the commit information there. We can even find our way back to the specific commit and see exactly what's happened, which is great for auditing the changes of a site, but let's actually go in, see how the builds getting along.

Okay, the build is done. Let's go back to our site. We'll refresh that, and we can see the changes been propagated. There we have it. This is connecting a Git repository to Netlify, creating a new site within Netlify that's driven by that Git repository, and, along the way, we've automatically created continuous integration, continuous deployment processes. They'll help to keep our site alive. We'll move on to other things, building on top of these examples and many more in subsequent lessons.


your progress