Log In

Version Control and Cloud Deployment

Understanding Git and GitHub for version control is crucial for any developer or team working on software projects. These tools allow you to track changes, collaborate with others, and deploy your applications easily and efficiently to cloud platforms. By mastering these skills, you can streamline your workflow and improve the quality and reliability of your code.

The following topics are covered in this tutorial:

  • Using GitHub repositories to store and share your project source code

  • Using GitHub Codespaces in conjunction with VS Code for web development

  • Developing and previewing changes to a website using GitHub Codespaces

  • Creating Git commits and pushing changes back to a GitHub repository

  • Deploying a website to the cloud directly from GitHub using Vercel

  • Understanding the GitHub collaboration workflow with branches & pull requests

  • Installing & using Git locally on your computer and connecting with GitHub

The best way to learn these skills is to follow along step-by-step and type out all the code yourself. Git can often by confusing at first, owing to a large number of technical terms, but it starts to feel natural with a bit of practice. This tutorial assumes knowledge of HTML & CSS.

Problem Statement

We'll explore abovementioned topics by attempting to solve this problem statement:

PROBLEM: Improve the development workflow for the Jovian Careers website developed in the previous tutorial as follows:

  • Set up a GitHub repository to host the source code and facilitate collaborative development
  • Deploy the website directly from GitHub to the cloud using Vercel: https://vercel.com
  • Add appropriate meta tags to ensure that the page previews properly when shared as a link.

The code for this tutorial can be found here:

Getting Started with GitHub

Git is a popular version control system that enables developers to track changes to their codebase and collaborate with others, while GitHub is a web-based platform that provides hosting for Git repositories and tools for collaboration.

Version Control

Version control is a system that tracks changes made to a file or a set of files over time.

  • It enables developers to keep track of different versions of their code

  • It enables developers collaborate with others, and manage changes to their codebase.

  • It also allows developers to revert to previous versions of their code if needed.

  • It enables developers to work on different versions of their code simultaneously without the risk of losing any changes.

  • It helps developers detect and resolve conflicts that may arise when different team members work on the same code.

While there are many version control systems (SVN, Git, Mercurial, etc.), Git is the most popular and widely used system for version control.

EXERCISE: Learn about the differences between various version control systems here: https://medium.com/@derya.cortuk/version-control-software-comparison-git-mercurial-cvs-svn-21b2a71226e4

Introduction to Git

Git is a distributed version control system, which means that each developer has a complete copy of the codebase on their local machine.

  • It uses a branching system that allows developers to work on different versions of their code simultaneously without affecting the main codebase.

  • Developers can make changes to their local copy of the codebase and then push those changes to a central repository that stores all the different versions of the code.

  • Git also allows developers to merge changes made by different team members and resolve conflicts that may arise during the merging process.

  • Git has the ability to track changes made to individual lines of code and the ability to roll back to any previous version of the codebase.

We'll explore all these concepts in much more detail over the course of this tutorial. Git is often accessed via a command line tool or a desktop application.

GitHub - What & Why

GitHub is a web-based platform that provides hosting for Git repositories and a range of collaboration tools for developers. Other similar platform include GitLab and BitBucket.

While Git is a powerful version control system, GitHub offers several additional features that make it an indispensable tool for software development teams.

  • GitHub provides a web-based interface for managing Git repositories, making it easy to view and manage code changes, track issues, and collaborate with others.

  • GitHub offers a range of collaboration tools, such as pull requests, code reviews, and team management features, that help teams work together more efficiently.

  • GitHub provides hosting for both public and private repositories, making it an ideal platform for open-source projects and proprietary software development alike.

  • GitHub has a vast community of developers, making it an excellent platform for discovering and contributing to open-source projects.

  • GitHub provides integration with other tools, such as continuous integration and deployment platforms, project management tools, and more, making it easy to build a complete software development workflow.

EXERCISE: Learn more about the differences between GitHub, GitLab, and BitBucket here: https://blog.mergify.com/github-vs-gitlab-vs-bitbucket/

Creating a Project Repository

Follow these steps to sign up and create a new repository on GitHub:

  1. Go to GitHub.com and click on the "Sign up" button in the top right corner. Follow the prompts to create a new account by entering your email address, a username, and a password.

  2. After creating your account, you'll be taken to the GitHub dashboard. To create a new repository, click on the "New" button located on the left side of the dashboard.

  3. On the "Create a new repository" page, enter a name for your repository, a brief description, and choose whether you want it to be public or private. If you choose a private repository, you'll need to have a paid GitHub account.

  4. Once you've filled out the necessary information, click on the "Create repository" button to create your new repository.

  5. Now that you've created your repository, you'll be taken to the repository page, where you can add files, make changes to your code, and collaborate with others.

Congratulations! You've successfully signed up for GitHub and created a new repository.

From here, you can start adding files, making changes to your code, and collaborating with others to build your software project. You can do either by downloading the repository to your computer of using a cloud-based development platform like GitHub Codespaces.

EXERCISE: Learn more about the README.md, .gitignore and LICENSE files here:

  1. README.md - https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes

  2. .gitignore - https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files

  3. LICENSE - https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository

Using GitHub Codespaces

GitHub Codespaces is a cloud-based development environment that allows you to write, test, and debug code directly in your browser.

  • It allows you to quickly set up a development environment without needing to install any software locally.

  • It provides a consistent development environment across different machines and operating systems.

  • It makes it easy to collaborate on code with other developers in real-time, using shared Codespaces.

  • It lets you work from anywhere, as long as you have access to a browser and an internet connection.

You can think of it as a personal computer on the cloud, that you can access from anywhere. Learn more about codespaces here: https://docs.github.com/en/codespaces

Starting a Codespace

Here are the steps to open up a repository in Codespaces and launch it within VS Code:

  1. Navigate to the GitHub repository that you want to work on.

  2. Click on the "Code" button, and select "Open with Codespaces" from the dropdown menu.

  3. Select the Codespace configuration that you want to use, or create a new one if necessary.

  4. Wait for the Codespace to be created, which may take a few minutes, if done for the first time.

  5. Once the Codespace is ready, click on the "Open in Visual Studio Code" button

You can either work with the browser-based version of VS Code, or you can connect remotely to the codespace using your installation of VS Code.

Learn more about using VS Code with Codespaces here: https://code.visualstudio.com/docs/remote/codespaces

NOTE: GitHub provides 120 hours of free codespaces usage for personal accounts. Learn more about the pricing here.

Web Development with Codespaces

  1. Within the repository root, create an src folder. This is where we will store our HTML, CSS, and image files.

  2. Add new files like index.html or styles.css within the src folder and add code within them.

  3. You can also upload existing files or images by right-clicking within the src folder and selecting "Upload".

  4. To preview the files, you will need to install an extension called Live Server. This extension allows you to see your web pages as you develop them.

  5. To install the Live Server extension, click on the extensions icon on the left-hand side of the Codespaces window.

  6. In the search bar, search for "Live Server" and click on the extension when it appears.

  7. Click on the "Install" button to install the Live Server extension.

  8. Once the Live Server extension is installed, open your index.html file in the Codespaces editor.

  9. Click on the "Go Live" button located in the bottom right corner of the editor window.

This will open your index.html file in a new browser tab, allowing you to preview your web page. Any time you make changes to the file, the page will be reloaded automatically.

EXERCISE: Check out the following resources:

  1. VS Code extensions: https://code.visualstudio.com/docs/editor/extension-marketplace

  2. Documentation for the "Live Server" extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

  3. Commonly used extensions here: https://blog.bitsrc.io/top-10-visual-studio-code-extensions-for-web-developers-5bd6a76bdf5f

Updating a GitHub Repository

Once you've made changes to your code, it's important to update your GitHub repository to keep your code up-to-date and available to others.

  1. Open the inbuilt command line terminal within the browser-based VS Code window.

  2. (Optional) Review the changes you have made using the git status and git diff commands.

  3. Stage the changes you made by typing git add <file-name> or git add . to stage all changes.

  4. Commit the changes you staged by typing git commit -m "commit message". Make sure your commit message is descriptive and explains what changes you made.

  5. (Optional) You can verify that the change was made successfully using the git log command.

  6. Push your changes to your GitHub repository by typing git push. This will update your repository with your latest changes.

Once you have successfully pushed your changes, go to your GitHub repository to confirm that your changes have been updated.

You can also perform all of the above actions without typing any Git commands, using VS Code's user interface. Learn more here: https://code.visualstudio.com/docs/sourcecontrol/overview

EXERCISE: Make some changes to the web page, then stage, commit, and push them to GitHub using the VS Code's user interface. Make some more changes, then stage, commit, and push them using terminal commands. Practice till you become familiar with the workflow.

EXERCISE: Look up documentation or tutorials to understand the following git commands:

  • git status
  • git diff
  • git add
  • git commit
  • git log
  • git push

What options to each of the above commands support? Hint: Use the git help command.

Cloud Deployment with Vercel

Vercel is a cloud platform that makes it easy to deploy websites and applications. It offers seamless integration with GitHub and other version control systems, allowing developers to deploy their projects directly from their repositories.

Follow these steps to deploy your website to Vercel:

  1. Go to https://vercel.com and sign up for an account. You can use your GitHub account to sign up or create a new account using your email address.

  2. Once you have signed up, you will be taken to the Vercel dashboard. From here, you can start a new project by clicking the "New Project" button.

  3. Choose the repository you want to deploy. Vercel supports GitHub, GitLab, and Bitbucket repositories. Select the repository and the branch you want to deploy.

  4. Select the project root folder (in this case, it is the src folder) and click "Deploy" to deploy the project.

Vercel will build your project and deploy it to its cloud platform. You can view your site by clicking the "Visit" button next to your project name. Example site: https://jovian-careers-site.vercel.app/

Whenever you push new changes to your repository, Vercel will automatically build and deploy your project to its cloud platform. This means that your site will always be up-to-date with your latest changes.

EXERCISE: Make some more changes to the site on Codespaces, and push them to GitHub. Observe whether an automatic deployment is triggered on the Vercel dashboard and how long it takes for the new site to be deployed.

HTML Meta Tags

Let's now improve the link preview of our site using HTML meta tags. HTML meta tags provide information about a web page to search engines and browsers. They are placed in the section of an HTML document and are not displayed on the page itself.

You can use the site https://metatags.io or https://heymeta.com to check how a link preview when shared on various sites.

Common Meta Tags

There are several types of meta tags, each with its own purpose. Here are some common meta tags:

  • meta charset: This tag specifies the character encoding used in the document, which affects how text is displayed. The recommended value is UTF-8.

  • meta name="viewport": This tag specifies the viewport properties for responsive design. It includes attributes such as width, initial-scale, and minimum-scale.

  • meta name="description": This tag provides a brief summary of the page content and is used by search engines when displaying search results.

  • meta name="keywords": This tag specifies keywords related to the page content and was used in the past by search engines for indexing, but is now less important.

  • meta name="author": This tag specifies the author of the page.

  • meta name="robots": This tag specifies instructions for web crawlers, such as whether to index or follow links on the page.

Platform-Specific Meta Tags

There are also platform-specific tags for social media sites such as Facebook and Twitter. These tags are used to provide more information about the page when it is shared on these platforms. Here are some examples:

  • meta property="og:title": This tag specifies the title of the page when it is shared on Facebook and several other sites.

  • meta property="og:description": This tag specifies the description of the page when it is shared on Facebook and several other sites.

  • meta property="og:image": This tag is used to specify the image that should be displayed when a page is shared on social media platforms, such as Facebook or Twitter.

  • meta name="twitter:title": This tag specifies the title of the page when it is shared on Twitter.

  • meta name="twitter:description": This tag specifies the description of the page when it is shared on Twitter.

  • meta name="twitter:card": This is used to display the preview of the web page as a card on Twitter.

Title and Favicon

The title tag and favicon link tag are also related to meta tags.

  • The title tag specifies the title of the page, which appears in the browser's title bar and is also used by search engines.

  • The favicon link tag specifies the icon that appears in the browser's address bar and bookmark menu.

We can thus add the following proper meta tags to our web page:


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn about job openings at Jovian and submit your application now">
    <meta name="keywords" content="data science, software development, jobs">
    <meta name="author" content="Jovian">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Jovian Careers">
    <meta property="og:description" content="Learn about job openings at Jovian and submit your application now">
    <meta property="og:image" content="/jovian_meta.png">
    <meta name="twitter:title" content="Jovian Careers">
    <meta name="twitter:description" content="Learn about job openings at Jovian and submit your application now">
    <meta name="twitter:image" content="/jovian_meta.png">
    <title>Jovian Careers</title>
    <link rel="icon" href="/jovian_favicon.png" type="image/x-icon">

Use this image as the favicon: https://i.imgur.com/GMMpgdl.png

Use this image as the meta image: https://i.imgur.com/KBD7w8k.png

Learn more about HTML meta tags here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name

EXERCISE: Change the values of some of the above meta tags, and verify that they lead to a change in link previews on various platforms when deployed to Vercel.

GitHub Collaboration Workflow

GitHub development involves a collaborative workflow for managing code changes, which includes branching, creating pull requests, getting them reviewed, and merging them. Here are the steps involved in this workflow:

  1. Branch: Create a new branch for your changes, so you can work on them independently

  2. Pull Request: Create a pull request to propose your changes to the rest of the team.

  3. Review & Iteration: Your pull request will be reviewed by other developers, who can add comments. You can make changes accordingly and update your pull request.

  4. Merge: Once your pull request has been approved, you merge your changes into the main codebase.

The main codebase is then updated with your changes, and the new code is available to everyone on the team.

Branching with Git

Branching is a fundamental feature of Git and GitHub that allows developers to work on multiple versions of the same codebase simultaneously.

A branch is essentially a separate copy of the codebase that you can make changes to without affecting the main branch (usually called "master" or "main").

Here's how you can create branches within GitHub Codespaces:

  1. Click on the "Terminal" icon in the left-hand menu to open the integrated terminal.

  2. To create a new branch, type the following command in the terminal: git branch <branch-name>. Replace <branch-name> with the name of the new branch you want to create.

  3. To switch to the new branch, type the following command in the terminal: git checkout <branch-name>.

  4. You can now make changes to the codebase on the new branch, using the integrated editor in Codespaces.

  5. Once you have made your changes, commit them to Git using the following commands:

git add .
git commit -m "Your commit message"
  1. To push your changes to the remote repository, use the following command:
git push -u origin <branch-name>

This will create a new branch on the remote repository and push your changes to it. You can also do this directly from VS Code's user interface as explained here: https://code.visualstudio.com/docs/sourcecontrol/overview

EXERCISE: Look up the documentation or tutorials for the following git commands:

  • git branch
  • git checkout
  • git fetch

Practice using them by creating various branches, and try to achieve the same result using VS Code's user interface.

Creating Pull Requests

Pull requests are a way to propose changes to the codebase and get them reviewed by other developers. Here are the steps to create a new pull request in GitHub:

  1. Create a new branch as described in the previous section.

  2. Make your changes to the codebase on the new branch & push it to GitHub.

  3. Click on the "Pull requests" tab at the top of the repository page.

  4. Click on "New pull request" to create a new pull request.

  5. Select the base branch (the branch you want to merge into), and the compare branch (the branch containing your changes).

  6. Add a title and description for your pull request, and click on "Create pull request".

Your pull request will now be visible to other developers who can review & approve the changes. Once approved, the changes can be merged into the main branch.

NOTE: Vercel automatically creates a "preview" deployment for your pull request to preview the changes on a temporary site without affecting the main site. Learn more about it here: https://vercel.com/docs/concepts/deployments/preview-deployments

EXERCISE: Create multiple pull requests with minor changes, and verify that each PR gets its own independent preview deployment on Vercel. Also verify that the main site is not affected till a PR is merged.

Keeping Your Branch Up to Date

When you are working on a new feature or making changes to your code, it's important to keep your feature branch up to date with the latest changes in the main branch.

Follow these steps to keep your branch up to date:

  1. Check out the main branch: git checkout main

  2. Get latest changes: git pull

  3. Check out your feature branch: git checkout <feature-branch-name>

  4. Merge the main branch changes: git merge main

  5. Push changes to the remote repository: git push

These steps will ensure that your feature branch is updated with the latest changes from the main branch.

EXERCISE: Follow these steps to practice keeping your branch up to date:

  1. Create a branch, make some changes to index.html, and create a pull request on GitHub (let's call it PR1).

  2. Then, create another branch from main, make some more changes to index.html, and create a second pull request (let's call it PR2).

  3. Now, approve and merge PR1 to master, and then update PR2 to incorporate the new changes from master.

Repeat this process a few times using the command line and using VS Code's user interface.

Resolving Merge Conflicts

Merge conflicts occur when Git is unable to automatically merge changes from two branches. This can happen when two or more people have made changes to the same file, or when the changes made in one branch conflict with the changes made in another branch.

Follow these steps to fix a merge conflict in VS Code:

  1. If there are any merge conflicts, VS Code will display a notification in the bottom right corner of the screen. Click on the notification to open the "Merge Changes" panel.

  2. In the panel, you'll see the conflicting files with the merge conflicts highlighted. You can then click on each file to view and resolve the conflicts.

  3. To resolve a conflict, you can choose which changes to keep by selecting the correct version from the dropdown menu. You can also manually edit the code to resolve the conflict.

  4. Once you have resolved all the merge conflicts, save your changes and commit them:

git add .
git commit -m "Resolved merge conflicts"

The changes can now be safely pushed to the remote repository.

EXERCISE: Repeat the previous exercise, but this time update the same line in both PR1 and PR2 to intentionally create a merge conflict and fix it.

Using Git Locally (Optional)

Apart from using GitHub codespaces, you can also use Git for local development on your computer. Follow this detailed tutorial to learn how you can use Git locally on your computer: https://www.youtube.com/watch?v=8JJ101D3knE

macOS Installation

Git is pre-installed on most macOS versions, but you may need to update it to the latest version or install it if it's not already installed on your system.

  1. Open the Terminal app on your Mac. You can find it by searching for "Terminal" in Spotlight or by navigating to Applications -> Utilities -> Terminal.

  2. Install Homebrew, a package manager for macOS, by running the following command in the Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. Once Homebrew is installed, you can use it to install Git by running the following command in the Terminal:
brew install git
  1. Verify that Git is installed by running the following command in the Terminal:
git --version

If Git is installed correctly, you should see the version number displayed in the Terminal.

Learn more here: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git#Installing-on-Mac

Windows Installation

Installing and using Git on Windows is a straightforward process that involves downloading the Git installer and using the Git command-line interface to manage your repositories.

  1. Go to the Git website (https://git-scm.com/downloads) and download the Git installer for Windows.

  2. Run the installer and follow the prompts to install Git on your system. Make sure to select the "Use Git from the Windows Command Prompt" option during installation.

  3. Once Git is installed, open the Git Bash terminal by searching for "Git Bash" in the Windows search bar.

Open the Git Bash terminal on your Windows machine, navigate to a desired folder, and start executing git commands.

Learn more here: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git#Installing-on-Windows

Also see: https://gitforwindows.org/

Linux Installation

Most Linux distributions come with Git pre-installed, but you may need to update it to the latest version if it's not already installed on your system.

  1. Open a terminal window on your Linux machine.

  2. Install Git by running the following command (on Ubuntu/Debian):

sudo apt-get update
sudo apt-get install git
  1. Verify that Git is installed by running the following command:
git --version

If Git is installed correctly, you should see the version number displayed in the terminal.

Configuring Git

git config is a Git command used to set configuration options for your Git installation. These options can be set globally, for a specific repository, or for a specific user.

To set a global configuration option, use the --global flag followed by the configuration option you want to set, like this:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

These commands set the user.name and user.email configuration options for Git globally, so they will be used by all repositories on your machine.

You can also set up repository-specific user name and email.

Creating a Repository

  1. Open a terminal window and navigate to the directory where you want to create your repository.

  2. Run the following command to initialize a new Git repository:

git init
  1. This will create a new directory named ".git" in your current directory, which contains all the files and information Git needs to manage your repository.

Making Commits

  1. After making changes to your code, run the following command to add your changes to the staging area:
git add <file-name>
  1. To commit your changes, run the following command:
git commit -m "Commit message"
  1. This will create a new commit with your changes, along with a message describing what was changed. You can verify the commit using git log.

Adding a Remote Respository

  1. Create a new empty repository on GitHub (without a readme, gitignore, or LICENSE)

  2. To add a remote repository, run the following command:

git remote add <remote-name> <remote-url>

This will create a new remote with the specified name and URL, which you can now push to.

Pushing Changes to GitHub

First, follow this guide to create a personal access token for GitHub: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

  1. To push your changes to a remote repository, run the following command:
git push <remote-name> <branch-name>
  1. This will upload your changes to the specified remote and branch.

Note: Before pushing changes to a remote, make sure to pull any changes made by others to avoid conflicts.

Pulling Changes from GitHub

  1. To pull changes from a remote repository, run the following command:
git pull <remote-name> <branch-name>
  1. This will pull changes from the specified remote and branch.

Cloning an Existing Repository

git clone is a Git command used to create a local copy of a remote Git repository. When you clone a repository, you create a complete copy of the repository on your local machine, including all of the code, branches, and history of the project.

  1. Open a terminal window and navigate to the directory where you want to clone the repository.

  2. Run the following command to clone the repository:

git clone <repository-url>

Replace <repository-url> with the URL of the repository you want to clone. You can find the URL on the repository's GitHub page.

  1. This will create a new directory with the same name as the repository, and download all the files and history from the repository to your local machine.

If the repository is private, you will need to enter your GitHub username and password to authenticate before cloning.

EXERCISE: Look up documentation or tutorials for the following Git commands:

  • git config
  • git init
  • git clone

Experiment with them by installing Git on your computer and creating some repositories

Summary and References

The following topics were covered in this tutorial:

  • Using GitHub repositories to store and share your project source code
  • Using GitHub Codespaces in conjunction with VS Code for web development
  • Developing and previewing changes to a website using GitHub Codespaces
  • Creating Git commits and pushing changes back to a GitHub repository
  • Deploying a website to the cloud directly from GitHub using Vercel
  • Understanding the GitHub collaboration workflow with branches & pull requests
  • Installing & using Git locally on your computer and connecting with GitHub

The code for this tutorial can be found here:

Git can often be confusing because of the various terms and commands, but it becomes second nature with practice.

In particular, try to remember the following common workflows:

  1. Feature development workflow: git diff → git add → git commit → git push

  2. GitHub collaboration workflow: Branch → Pull Request → Review & Iteration → Merge

  3. Branch update workflow: Checkout main branch → Pull latest changes → Check out feature branch → Merge master & fix conflicts → Push feature branch

Check out the following resources to learn more: