Version Control

Create a GitHub account and learn the basics of version control to track changes.

Next video loading... 5
Get Code

Transcript

Congratulations on completing the essential HTML and CSS for your first website!

In this lesson, we'll review a process called version control which will allow you to save your website files on GitHub.

There are a couple benefits of doing this. The first is that it provides a bit of safety for your files in that they will be remotely hosted and not simply on your own computer. The second is that in our last lesson, we will launch our website directly from GitHub based on any changes to the files, which makes launching new updates to your website far more efficient.

So let's get started.

If you recall, in the first lesson for both the Capstone and the Foundation series, you visited GitHub to get the initial project files. So your first step in being able to use version control is to get an account on github.com.

Once you have completed a signing up on GitHub, you will visit desktop.github.com and download this application.

If you visit this site from a Windows machine, you'll be given the option to download it for Windows.

Downloading GitHub Desktop also will install git, which is the underlying language and commands and processes that will allow you to use version control, because GitHub is not the only provider that offers a git workflow. Another popular option is BitBucket.

Once you have installed GitHub Desktop, you will be asked to sign in to your new account.

Once you have signed in, we first need to go back into our project in VSCode and initialize the project as a git repository.

With Terminal open, we can now use the command git (g-i-t) and the word init.

// Type in Terminal in VSCode, followed by 'Enter'
git init

And we'll receive notice that we've initialized our empty git repository in this file now.

Back in GitHub Desktop, we can choose to "Add an existing repository" since we've just created it, and you'll select your website folder and then "Add repository". And you'll see that it has recognized a lot of files that are included in our website project.

However, there are a few files that we do not want to push up to version control. Notably, all of the files in node_modules.

As a reminder, the node_modules are the dependencies that we have installed such as to run gulp.

So back in VSCode, we need to create a new file which is named .gitignore. And here we can list the names of specific files or folder directories to ignore - in other words, to not include in version control.

So to ignore the entire node_modules directory, we'll simply include it by name.

// Add in a new file named .gitignore
node_modules

And upon saving, when we review the files list in GitHub Desktop, you can see that the node_modules related files are no longer listed.

The other change we should make before we commit these files is to update the README.

Now, your README may be the same as what you initially downloaded for the project. The README is what will show on the main project page when visiting the repository on GitHub, so you want to ensure that it is useful and specific to the project. In this case, we'll remove the content that relates to the course. And as the file is written with Markdown, this single pound sign (#) will ultimately convert to an h1, so this would be the proper place to include the title of "Unicorn Space Tours".

It is appropriate to leave basic instructions of how to run the project. So these other instructions, if you happen to still have them in your README, would be appropriate to maintain. That way, when you go to revisit the project, or if you are in a team and you had a teammate come into the project, they would have the instructions as well to learn how to run the project.

As your website grows, you may find it useful to add even more information into the README.

With that saved, you can click through the file list (in GitHub Desktop), which is useful to double check any changes you may have made. Of course since this is our first commit, which means the first set of changes that we will be pushing up to GitHub, all of the statuses show as green which means new additions.

To create a commit, in the summary field we add a title. The title should allow you to recognize what work was done in that commit. In this case, we can say something like "Add all website files".

And then in the description you can continue to add more details as needed.

Then we'll select "Commit to master" - and master is the name of the branch, which we we'll explore in the GitHub UI in a minute.

And then because this is a brand new repository, our last step within GitHub Desktop for now is to "Publish repository", and it will ask you a few questions to double-check how you would like to publish the repository. You can choose to keep the code private, which means that only you will be able to see it on github.com, or to keep it public. For our purposes this choice is up to you.

And finally, select "Publish repository". You'll then have to wait a minute while it publishes out.

But then in the GitHub Desktop, you can select "View on GitHub" and there you can see that it added our commit of "Add all website files". And it shows you how recently - so "A minute ago" since we just pushed it up.

And again, you'll see the contents of our README reflected on the homepage, and you can browse the files that we included. Again, you'll notice that all files except for the node_modules have been included in our repository at this point.

A few other settings you may choose to use for your projects. You can add an "About" description and a URL, but for now, let's revisit what it looks like to make additional changes for our website.

Back in our website files, let's say that we wanted to make a change. And we're just going to add a bit of copy. So on the end of this sentence, I'm going to say "so book now!" to encourage more sign ups.

And now in GitHub Desktop, you can see that it shows me which files have had new changes, and even gives a preview where the red line shows you the previous version and the green line shows you the change.

Once again, we want to give our commit a descriptive title. So in this case, I'll say "Add copy to encourage signups" and then we'll once again commit. And this time, since the repository is already published, our action has been changed to "Push to origin" which just means it will be pushing our new changes up to GitHub.

And now within the github.com repository, I'll refresh, and you instantly see that new change has come through. You can even click directly on it to once again review what changes have been pushed up.

There are more features available for GitHub. Check the transcript for links to learn more about how to use GitHub and version control.

In summary, in this lesson you signed up for a GitHub account to enable the use of version control for our website. Following the signing up, we downloaded GitHub Desktop. And once we had downloaded GitHub Desktop, since we had an existing site, we used git init to initialize our repository. And then we were able to find our repository using the finder included in GitHub Desktop, and then review our changes and push them up to github.com in order to store them and keep track of any changes that we make.

Resources to Learn More About GitHub#

Next Lesson