Practice Version Control

If you are writing source code (HTML, CSS, JavaScript, C#, etc.), then you should be using a version control system.

Version control systems help you by providing a history of your source code changes. It goes a lot deeper than that, and its benefits get more profound as your skills with it improve. Nevertheless, version control is a necessity in today’s job market. The most popular version control system today is git, and the most popular place to host your git repositories online is GitHub.

In this tutorial, we will create a git repository to hold the source code for a simple website. We will also push it up to GitHub using the GitHub CLI.

YOU Need This!

I wrote this tutorial for beginners like you who are getting into software development of any kind. Virtually every employer is going to expect that you’ve learned something about version control, even if the primary job you are doing is writing JavaScript or building web pages.

Beyond assuming that you’ve setup your development system, I’ve written this without expecting you to know anything about using git and GitHub. If you already know some of this, great! I hope this helps you reinforce your understanding of the basics of version control.

Not knowing version control - for software developers - is like not knowing how to turn on your computer.

Setting Up Your Repository Folder

1. We will start with an empty folder. Create a new folder somewhere on your computer (e.g.: under C:\GH\Sandbox) and name the folder My-First-Repo.

2. Launch Visual Studio Code and select Open Folder... from the File menu (or press Ctrl+k Ctrl+o).

   Note

   There are a lot of keyboard shortcuts in Visual Studio. That’s why many times you will encounter shortcut combinations, such as the one that opens a folder:

   1. Press Ctrl+k
   2. Then press Ctrl+o
   3. You should see a dialog where you can select which folder to open.

3. Create a new file by pressing Ctrl+n. Then paste in the following code.

   # Folder to ignore for Node-based projects
   node_modules
   
   # Folder for my local computer only (Dan's personal favorites)
   [Nn]o[Ttrack]
   [Rr]n[Dd]

4. Save the file (Ctrl+s) and name it .gitignore (note the leading dot in the filename).

5. Create another new file named .gitattributes, and paste in the following code.

   # Set default behavior to automatically normalize line endings.
   * text=auto
   
   # Force batch scripts to always use CRLF line endings so that if a repo is accessed
   # in Windows via a file share from Linux, the scripts will work.
   *.{cmd,[cC][mM][dD]} text eol=crlf
   *.{bat,[bB][aA][tT]} text eol=crlf
   *.{ics,[iI][cC][sS]} text eol=crlf
   
   # Force bash scripts to always use LF line endings so that if a repo is accessed
   # in Unix via a file share from Windows, the scripts will work.
   *.sh text eol=lf

   Why .gitattributes?

   This sample code is from the article .gitattributes Best Practices by Muhammad Rehan Saeed. If you want a deeper understanding, I strongly recommend reading Dymystifying the .gitattributes File.

6. Create one more file named ReadMe.md and enter the following code.

   # My First Repo
   
   I am following Dan's [Practice Version Control](https://dgilleland.github.io/CPSC-1520/tutorials/0011/) tutorial for my website's source code.

7. What you should see is a folder with three core files that every repository should have.

   • DirectoryMy-First-Repo

     • .gitignore
     • .gitattributes
     • ReadMe.md

We’ve created a folder for our source control. Now it’s time to add version control.

Set Up Version Control

The git version control system works by treating a folder as a repository of your source code. To set up version control, you need to initialize the folder (a one-time step) and then make regular and frequent commits of changes to your source code. We’ll do all these steps from within Visual Studio Code’s built-in terminal environment.

1. Open the terminal in VS Code (Ctrl+`).

2. Type git init to initialize the folder as a git repository.

3. Stage (prepare) your current files for entry into the version control history.

   git add .

4. Commit (save) the staged files as a permanent “snapshot” of the current state of your source code.

   git commit -m "My first commit"

5. Follow steps 3 & 4 whenever your changes are ready to be added to the git history.

How often should you do a git add . and git commit -m "Message"? Whenever you make a set of changes that represents a stable update to your source code. The key, however, is to not put off doing commits. Small and frequent commits is the secret sauce to good version control.

One last note. You should put some thought into the messages you use for your commits. If you make them meaningful, then they will help “future you” down the road. Don’t fall into the trap of sloppy commit messages!

Add the Repo to Your GitHub account

Right now, your code repository exists only on your computer. Most of the time, we want to have a copy of it “in the cloud” (if only as a backup should the worst happen to your computer). In this part, we will use the GitHub CLI to take our code and clone it onto GitHub.

1. In the terminal, type the following.

   gh repo create

2. Using the arrow keys on your keyboard, select the option “Push an existing local repository to GitHub”.

3. Press Enter to accept the default path of your current repository (.).

4. Press Enter to use the current name of your repository folder (My-First-Repo) as the repository name on GitHub.

5. Select your personal Github user account as the “Repository Owner”.

6. Press Enter for all the remaining prompts to accept the defaults.

When you are done, your local repository will be cloned onto GitHub. To open the GitHub repo from VS Code, type gh browse in the terminal.

Adding Source Code

1. We’re going to use the following folder structure for our new files.

   • DirectoryMy-First-Repo

     • Directorysrc

       • index.html Our Web Page
       • Directorycss

         • styles.css Some simple styles
       • Directoryimg

         • professor.svg Because having pictures is cool
       • Directoryjs

         • main.js This site is all about JavaScript, you know…
     • .gitignore
     • .gitattributes
     • ReadMe.md

   Preview your site

   I’m going to assume that you know how to preview your HTML pages in the browser.

   If you’ve never worked with HTML/CSS before this, I recommend that you check out this course on HTML MDN .

2. Create the index.html file and use the following code.

   index.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Simple Website</title>
       <link rel="stylesheet"
         href="./css/styles.css">
   </head>
   <body>
       <h1>Welcome</h1>
       <img src="./img/professor.svg" alt="My Instructor">
       <p>I am practicing the use of Version Control as I learn JavaScript. Join me on the journey!</p>
   </body>
   </html>

3. Create a simple styles.css with the following code.

   styles.css

   img {
    float: right;
    width: 250px;
    padding-left: 50px;
   }

4. Add the following image by right-clicking it and saving the image to your computer. Make sure to name it professor.svg.

   

5. Lastly, commit and push the changes.

   git add .
   git commit -m "First pass on my website content"
   git push

   Notice how I’ve added the git push command. This will make sure to push your local git history to GitHub.

More Source Code

Let’s throw in just a bit more to improve the look of our site. Specifically, we want to add a 3rd-party CSS file and a touch of JavaScript.

1. Modify your index.html file to include the following highlighted changes.

   index.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Simple Website</title>
       <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
   </head>
   <body class="container">
       <h1>Welcome</h1>
       <img src="./img/professor.svg" alt="My Instructor">
       <p>I am practicing the use of Version Control as I learn JavaScript. Join me on the journey!</p>
   </body>
   </html>

2. This has applied the third-party library PicoCSS. Let’s commit our work.

   git add .
   git commit -m "Added PicoCSS stylesheet"

3. Now, let’s throw in a touch of JavaScript. Create the main.js file with the following content.

   main.js

   let today = new Date();
   let copyrightMessage = `<footer>&copy; ${today.getFullYear()}</footer>`;
   document.body.innerHTML += copyrightMessage;

   Don’t worry if you are unsure of what the code does - we’ll look at understanding JavaScript in later tutorials. This sample is just to complete our sample of typical file types used in websites: *.html, *.css, *.js, and images.

4. To get our JavaScript to run in our website, we need to link to it with a <script> tag. Modify the <head> of the page to match the following.

   index.html

   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Simple Website</title>
       <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
       <script src="./js/main.js" type="module"></script>
   </head>

5. Now when we view our page, a footer is added dynamically with a copyright for the current year. Let’s commit our work.

   git add .
   git commit -m "Add copyright year via JavaScript"
   git push

---

Conclusion

In this tutorial, we created a local repository using Visual Studio Code and git. We added files, committed changes, and pushed/synchronized our work with GitHub. This whole cycle of a) write code, b) commit changes, and c) repeat is what makes up the bulk of our creative work as software developers.

Build a Routine

As you continue to expand your knowledge and develop your skills, you have the opportunity to get better and better with version control. I find myself using git several times a day. From the public repositories of my work and personal GitHub accounts, I’ve done well over 4,000 commits in 2024 alone. Just remember the secret sauce: Small and Frequent commits.

Warning for Students

One of the things you learned in this tutorial is how to use the GitHub CLI to publish your local repository onto your GitHub account.

But do not publish the assignments and labs your instructors have given you for your courses. Making a copy like that could be considered academic dishonesty! Those assignments are already in private GitHub repositories, so the only thing you need to do is the git pull and git push to synchronise your local work with what’s already on GitHub.